1、扩展运算符
含义：扩展运算符是三个点（...），用于将一个数组转为用逗号分隔的参数序列
用法：...['a', 'b', 'c']
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, 2, ...[3, 4, 5], 6) // 1 2 3 4 5 6 console.log(1, 2, ...[3, 4, 5]) // 1 2 3 4 5
如果扩展运算符后面是一个空数组，则不产生作用
console.log(1, ...[]) // 1
扩展运算符的应用
（1）、替代数组的 apply 方法
a、将数组转为函数的参数
// es5 的写法 function fun (x, y ,z) { console.log(x+y+z) } var arg = [1, 2, 3] fun.apply(null, arg) // 6 // es6 的写法 function fun (x, y ,z) { console.log(x+y+z) } var arg = [1, 2, 3] fun( ...arg ) // 6
b、取数组的最大值
// es5 的写法 Math.max.apply( null, [3, 33, 333]) // 333 // es6 的写法 Math.max( ...[3, 33, 333]) // 333
c、将一个数组添加到另一个数组的尾部
// es5 的写法 var arr1 = [1, 2, 3] var arr2 = [4, 5, 6] Array.prototype.push.apply( arr1, arr2) console.log(arr1) // [1, 2, 3, 4, 5, 6] // es6 的写法 var arr1 = [1, 2, 3] var arr2 = [4, 5, 6] arr1.push( ...arr2) console.log(arr1) // [1, 2, 3, 4, 5, 6]
d、官网提供的另一个案例
// ES5 new (Date.bind.apply(Date, [null, 2015, 1, 1])) // Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间) // ES6 new Date(...[2015, 1, 1]) // Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
（2）、合并数组
es5 使用 contact( ) 连接两个或多个数组，并返回被连接数组的副本
// es5 var arr1 = [1, 2] var arr2 = [3, 4] var arr = arr1.concat( arr2) console.log( arr ) // [1, 2, 3, 4]
es6 可使用扩展运算符拼接 [...arr1, ...arr2, ...arr3]
// es6 var arr1 = [1, 2] var arr2 = [3, 4] var arr = [...arr1, ...arr2] console.log(arr) // [1, 2, 3, 4]
（3）、字符串转数组
扩展运算符还可以将字符串转成真正的数组
[...'hello'] // ["h", "e", "l", "l", "o"]
（4）、函数的返回值
js 的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符可提供变通方法
var dateFields = readDateFields(database) var d = new Date(...dateFields)
上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date
2、Array.from ()
Array.from () 方法用于将 类数组对象 和 可遍历的对象 转成真正的数组
var arrayLike = { '0': 'es6', '1': 'node.js', '2': 'vue', length: 3 } // es5 var arr1 = [].slice.call(arrayLike); console.log( arr1 ) // ["es6", "node.js", "vue"] // es6 var arr2 = Array.from ( arrayLike) console.log( arr2) // ["es6", "node.js", "vue"]
实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>西游记</p> <p>三国演义</p> <p>水浒传</p> <p>红楼梦</p> <script> var p = document.querySelectorAll('p') var pArray = Array.from(p) pArray.forEach(function (item) { console.log(item.textContent) }) //西游记 //三国演义 //水浒传 //红楼梦 </script> </body> </html>
Array.from () 还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组
Array.from([1,3,5],function(item){return item*2}) // [2, 6, 10]
3、Array.of ()
Array.of () 方法 用于将一组值，转成数组
Array.of(3,4,5) // [3, 4, 5] Array.of(3) // [3] Array.of(3).length // 1
Array.of() 总是返回参数值组成的数组。如果没有参数，就返回一个空数组
Array.of() // []
4、数组实例的 copyWithin()
copyWithin() 方法 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)它接受三个参数
target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end（可选）：到该位置 前 停止读取数据，默认等于数组长度。如果为负值，表示倒数。（不包含end位置的数据）
这三个参数都应该是数值，如果不是，会自动转为数值
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4,5] // 上例表示 // 1、从下标为3的位置（数字4）开始读取数据，一直到数组最后一位 // 2、把读到的数据 4和5，从下标为0的位置（数字1）开始替换
// 将3号位复制到0号位，不包含下标为4的数据 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位，-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将2号位到数组结束，复制到0号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5]
5、数组实例的 find() 和 findIndex()
find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
[1,2,3,4,5,6].find(function(item){return item>3}) // 4
find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
findIndex方法，用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
[1,2,3,4,5,6].findIndex(function(item){return item>3}) // 4
另外，这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足
[NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0
上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到
6、数组实例的 includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
7、数组实例的 entries()，keys() 和 values()
keys()是对键名的遍历
values()是对键值的遍历
entries()是对键值对的遍历
for(let index of ['1','c','ks'].keys()){ console.log('keys',index); } // keys 0 // keys 1 // keys 2 for(let value of ['1','c','ks'].values()){ console.log('values',value); } // values '1' // values 'c' // values 'ks' for(let [index,value] of ['1','c','ks'].entries()){ console.log('entries',index,value); } // entries 0 1 // entries 1 c // entries 2 ks