ES6数组的扩展(包含ES5数组的方法)

104 阅读3分钟

1、数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组,ES5 只能用变通方法来复制数组。 使用concat合并 复制数组,更改新数组不会影响原来的数组。

const arr = [ 1, 2, 3]

const arr1 = arr.concat()

arr1[0] = 666

console.log(arr) // [1,2,3] 更改arr1并不会影响原来的数组

console.log(arr1) // [666,2,3] arr1的第一项已经更改


2、Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    }; 
    
es5 写法
 	const arr1 = [].slice.call(arrayLike)
es6 写法
  	const arr1 = Array.from(arrayLike)
    
   	如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。
    
    	Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。
        因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。
    	

3、Array.of()用于将一组值转为数组。 这个方法的主要目的是为了弥补Array的不足。因为参数的个数不同,导致Array行为有差异。

    console.log(Array(6)) // 一个参数返回的是length(数组的长度)
    console.log(Array(6,7)) // 只有参数不少于2个时候,Array()才会返回由参数组成的新数组。
    Array.of基本上可以用来替代Array 或者new Array 并且不存在由于参数不同而导致的重载,他的行为非常统一。
    console.log(Array.of()); // 空数组
    console.log(Array.of(undefined))
    console.log(Array.of(1)) // [ 1 ]
    console.log(Array.of(1,2,3)) // [1, 2, 3]  

4、数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

const arr = [1,2,3,4]
   console.log(arr.find(el => el === 1))
   find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
     console.log(arr.find((el,index,arr) => {
       console.log(el)
       console.log(index)
       console.log(arr)
     }))

5、数组实例的findIndex方法的用法与find方法非常类似, 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

  const arr1 = [8,9,10]
  console.log(arr1.findIndex(el => el === 11))
   arr1.findIndex((el,index,arr) => {
   console.log(el, index, arr)
  }) 

6、Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值 ,与字符串的includes方法类似。ES2016 引入了该方法。

 const arr = [1,2,3,4,5,6]
 console.log(arr.includes(6)) // true
 console.log(arr.includes(7)) // false
 // 该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,
 // 如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
 console.log(arr.includes(6,6)) // true
 console.log(arr.includes(6,-1)) // true
 该方法是indexOf的增强版本 
 没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。
 indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。
 二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。
 console.log([NaN].includes(NaN)) // true
 console.log([NaN].indexOf(NaN)) // -1

 const arr = [5,6,7,8] 
 console.log(arr.splice(arr.length-1,1)) // 返回删除那一项 8
 console.log(arr) // 5,6,7

7、数组实例的copyWithin()方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员), 然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

console.log(arr.copyWithin(0,3))

8、filter、every、some、map等操作方法

    arr.forEach((item,index,arr)=> {
      console.log(item, index, arr)
    })
    arr.every(item => {  // 全部满足返回ture 有一个不满足返回false
     console.log(item.age > 10)
    })
    filter()过滤原数组,返回新数组
    const arr1 = arr.filter(item => {
     return item.age > 19
    })
    arr.map(item => item.age * 2)