ES6的一些数组对象的方法

最新推荐文章于 2025-05-08 16:32:45 发布

原创最新推荐文章于 2025-05-08 16:32:45 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript

本文介绍了ES6中的一些新特性，特别是针对数组对象的方法，包括：结构赋值、箭头函数、扩展运算符、Array.from、find、findIndex、includes、模板字符串、String的扩展方法（startsWith和endsWith）。此外，还提到了Set数据结构及其遍历方法，并讨论了解构赋值的规则和深拷贝的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6的一些新特性

ES6

数组结构赋值

 const [a,b]=[1,2]
  console.log(a,b)  //1,2

对象结构赋值

   var obj = {name:'zs,age:18}
       const {name,age}=obj
       console.log(name,age) // 'zs',18

箭头函数

箭头函数不绑定关键字,箭头函数中的this指向的是函数定义位置的上下文this

   var obj = {name:'mark'}
   function sum() {
   	console.log(this) //obj
   	return ()=>{
   	console.log(this) //obj
   	}
   };
   let res=sum.call(obj)
   res(); // obj
   ```

扩展运算符

       //合并数组
       let arr1 =[1,2,3]
       let arr2 = [4,5,6]
       let arr3 = [...arr1,...arr2] //[1,2,3,4,5,6]
       //另一种合并数组
       let arr3= arr1.push(...arr2)
       
       //将伪数组转化成真正的数组
       let divs = document.getElementsByTagName('div')
       const arr=[...divs]
       //2.用Array.from()方法将伪数组转换成数组
       var arrayLike={
       '0':'张三',
       '1':'李四',
       '2':'王五',
       'length':3
       }
       var ary = Array.from(arrayLike)  //

Array.from方法

        var arrayLike={
       '0':'1',
       '1':'2',
       'length':2
       }
       //调用Array.from方法可以将伪数组转化成数组 第二参数回调函数可以进行数组遍历运算
       var arr = Array.from(arrayLike,item => item*2)
       console.log(arr)  // [2,4]

数组find方法查找数组中第一个满足条件的值

       let ary =[{id:1,name:'张三'},{id:2,name:'张三'}];
       
       let arr2 = ary.find(item=>item.id==2);
       console.log(arr2) // {id:2,name:'张三'}
       如果查找不存在输出就是undefined

findIndex()方法用于找出第一个符合条件的数组成员的下标,如果没有就返回-1

       let ary = [1,5,10,15]
       let str = ary.findIndex(item=>item>5)
       console.log(str) //2

includes方法表示某个数组是否包含给定的值,返回布尔值

       let arr1 = [1,2,3]
       arr1.includes(2) // true
       arr1.includes(4)  //false

模板字符串

       let result ={
           name:'张三',
           age:20,
           sex:'男'
       }
       //模板字符串可以换行 嵌入变量 ${变量}
       let html = `<div> 
       	<span>${result.name}</span>
       	<span>${result.age}</span>
       	<span>${result.sex}</span>
       </div>`;

String的扩展方法
- 实例方法: startsWith() 和 endsWith()
- startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
- endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值

    let str = "Hello itheima !";
    let s1 = str.startsWith("H");
    console.log(s1); //true
    let s2 = str.endsWith("!");
    console.log(s2); //true

- 字符串 repeat方法 表示将原字符串重复n次 ,返回一个新字符串
      'hello'.repeat(2)  // 'hellohello'

set数据结构

    利用set数据结构进行数组去重
    const s2= new Set(['a','a','b',''b])
    connsole.log(s2.size)  //2 当数据重复会自动过滤
    const s3 = [...s2]
    console.log(s3)  //['a','b']

set数据结构实例方法

      const s1= new Set() 
      //向set结构中添加值用add方法
      s1.add('a').add('b')
      console.log(s1.size) // 2
      
      //从set结构中删除值 delete 返回的是一个布尔值
      const s2 =s1.delete('b')
      console.log(s1) // 1
      console.log(s2) //true
      
      //判断某一个值是否是set数据结构中的成员 使用has
      const s3 = s1.has('a')
      console.log(s3) //true
      
      //清除set数据结构中的所有值
      s1.clear()

遍历set 用forEach

      const s5 = new Set(['a','b','c'])
      s5.forEach(item =>{console.log(item)})

所有代码执行 :同步> 回调>异步
解构赋值
1.等号两边格式保持一致
2.解构的属性,必须属于右边的自身属性
3.可以用等号给默认值 ,如果右边对象本身就有,就按具有的属性,如果没有则按默认的来
4.可以给属性取一个别名

     let obj ={
     	name:'heima',
     	age:10,
     	agel:30
     	
     }
     let {name:cName , agel = 20} = obj
     
     console.log(cName,agel)

深拷贝

最常用的深拷贝方式

      let obj = {
      	name:'zs',
      	age:18
      }
      
      let newObj = JSON.parse(JSON.strinfy(obj))

let instance = new obj.constructor