ES6标准学习： 4、数组的扩展
数组的扩展
一、类数组对象与可遍历对象转换为数组
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
