ES6标准学习： 4数组的扩展

Posted 2020-09-17

数组的扩展

一、类数组对象与可遍历对象转换为数组

  Array.from()方法用于将类数组对象、可遍历对象转换为数组，其中可遍历对象包括es6新增的set和map结构

所谓的类数组对象，本质特征是必须拥有length属性

 1 let arrayLikeObj = {
 2   ‘0‘: ‘a‘,
 3   ‘1‘: ‘b‘,
 4   ‘2‘: ‘c‘,
 5   length: 3
 6 }
 7 
 8 ES5转换为数组： 
 9 let arr = [].slice.call(arrayLikeObj)  // [‘a‘, ‘b‘, ‘c‘]
10 
11 ES6转换为数组：
12 let arr = Array.from(arrayLikeObj) //  [‘a‘, ‘b‘, ‘c‘]

实际中有哪些类数组对象呢？

1、DOM操作返回的NodeList集合

2、函数的arguments对象

如果参数本事就是一个数组,Array.from会返回一个一模一样的新数组。

Array.from()还可以接受第二个参数，类似于map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLikeObj, x => x * x)
// 等同于
Array.from(arrayLikeObj).map(x => x * x)

值得注意的是：如果第二个参数里面用到了this,还可以传入第三个参数，用来绑定this

 

二、一组值转换为数组

Array.of()用于将一组值转换为数组

1 Array.of(1, 1, 1) // [1, 1, 1]

这个函数的主要作用是为了弥补Array()构造函数的不足。因为参数的个数会导致Array()的行为有差异。

1 Array() // []
2 Array(3) // [ , , ,]
3 Array(1, 1, 1) // [1, 1, 1]

只有当参数个数不少于2时，Array()才会返回由参数组成的新数组.

Array.of总是返回有参数值组成的数组，如果没有参数，返回一个空数组。

 

三、copyWithin()

数组实例的copyWithin方法，在当前数组内部指定位置的成员复制到其他位置（会覆盖），然后返回当前数组

Array.prototype.copyWithin(target, start, end)

target: 必须参数，从该位置起开始替换数据

start: 可选，从该位置器开始读取数据，默认为0

end: 可选，到该位置前停止读取数据，默认等于数组长度

start,end可以为负数，如果为负数，则表示倒数

这三个参数都应该是数值，如果不是数值，会转换为数值

1 [1,2,3,4,5].copyWithin(0,3)  // [4, 5, 3, 4 ,5]

上面的代码表示：将从3号位置直到数组结束的成员(4, 5)复制到从0号开始的位置，结果覆盖了原来的1, 2。

 

四、find()、findIndex()

find方法用于找出第一个符合条件的数组成员，他的参数是一个回调函数，所有成员依次执行这个回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果未找到，返回undefined

1 [1, 4, -6, 10].find((value) => value < 0)  // -6

1 [1,5, 10, 15].find(function(value, index, arr)) {
2   return value > 9
3 }  // 10

find的回调函数有三个参数

value: 当前值

index: 当前索引

arr: 原数组

 

findIndex()方法的用法与find的方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，返回-1

[1, 5, 10, 15].findIndex(function(value, index, arr)) {
    return value > 9
}
  // 2

以上两个函数都可以接受第二个参数，用来绑定回调函数的this

值得一体的是，这两个方法都可以发现NaN，弥补了indexOf方法的不足

1 [NaN].indexOf(NaN) // -1
2 
3 [NaN].findIndex(v => Object.is(NaN, v)) // 0

 

五、fill()

fill()方法使用给定的值填充数组

[1, 2, 3].fill(7)  /// [7, 7 ,7]

fill方法可以用于初始化空数组，fill方法还可以接受第二个和第三个参数，用于制定填充的开始位置和结束位置（不包括结束位置）

1 [‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2) // [‘a‘, 7 ,‘c‘]

 

六、entries(),keys(),values()

es6提供了这三个新方法用于遍历数组，他们都返回一个遍历器对象，可以用for ... of 循环遍历,他们的区别在于：keys()是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历

 1 for (let index of [‘a‘, ‘b‘].keys()) {
 2   console.log(index)
 3 }
 4 // 0
 5 // 1
 6 
 7 for (let index of [‘a‘, ‘b‘].values()) {
 8   console.log(index)
 9 }
10 // ‘a‘
11 // ‘b‘
12 
13 for (let [index, ele] of [‘a‘, ‘b‘].entries()) {
14   console.log(index, ele)
15 }
16 // 0 "a"
17 // 1 "b"

 

七、includes()

Array.prototype.includes()方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的include方法类似，不过，该方法属于es7。

1 [1, 2, 3].includes(2)  // true
2 [1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示从后往前的位置，如果此位置超过数组长度(比如第二个参数为-5,但数组长度只有4),则会重置从0开始

1 [1, 2, 3].includes(3, 3)  // true
2 [1, 2, 3].includes(3, -1) // true

没有该方法时，我们通常使用indexOf，但是indexOf方法有两个缺陷：

1、不够语义化，其含义是找到参数值的第一个出现位置，但是比较的确实是否不等于-1

2、其内部使用===进行判断，会导致对NaN的不够准确

1 [NaN].indexOf(NaN) // -1

 

 八、数组的空位

数组的空位指数组的某一个位置没有任何值：

注意，空位并不是undefined，一个位置的值等于undefined仍然是有值的，空位是没有任何值

1 0 in [undefined]
2 true
3 0 in []
4 false

es5对空位的处理很不一致，大多数情况下会忽略空位：

forEach(), filter(), every(),some()会跳过空位

map()会跳过空位，但会保留这个值

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

 1 [, ‘a‘].forEach((x, i) => console.log(i)) // 1
 2 
 3 [‘a‘, ‘b‘].filter(x => true) // [‘a‘, ‘b‘]
 4 
 5 [, ‘a‘].every(x => x ===‘a‘)  // true
 6 
 7 [, ‘a‘].some(x => x !== ‘a‘) // false
 8 
 9 [, ‘a‘].map(x => 1) // [, 1]
10 
11 [, ‘a‘, undefined, null].join(‘#‘) // ‘#a##‘
12 
13 [, ‘a‘, undefined, null].toString() // ‘,a,,‘

ES6则是明确将空位转换为undefined

Array.from会将数组的空位转换为undefined,也就是说，这个方法不会忽略空位

Array.from([‘a‘,,‘b‘]) // [‘a‘, undefined, ‘b‘]

 

copyWithin() 会将空位一起复制

[,‘a‘,‘b‘,,].copyWithin(2, 0) // [, ‘a‘, ,‘a‘]

for ...of循环也会遍历空位

let arr = [,,]

for (let index of arr) {

console.log(1)

}  // 1 1