扩展运算符
扩展运算符（ spread ）是三个点（ ...)如同 rest 参数的逆运算 将一个数组转为用逗号分隔参数序列
console.log(...[1,2,3,4]) // 1 2 3 4
console.log(l , ...[2 , 3 , 4 ], 5 ) // 1 2 3 4 5
// 该运算符主要用于函数调用
function push(array, ... items) {
array.push ( ...items);
}
// 扩展运算符后面还可以放置表达式
const arr = [
...(x > 0 ? ['a'] : [] ),
'b'
]
// 扩展运算符后面是个空数组，则不产生任何效果
[...[], 1] // [1]
替代掉数组的 apply 方法
// 例子1： 函数传参时传的是数组的形式
// ES5 的写法
function f (x, y, z) {
//
var args = [0, 1 , 2] ;
f.apply(null, args) ;
// ES6 的写法
function f(x, y, z) {
// ...
}
var args = [Q, 1, 2];
f (...args) ;
//例子2： 应用 Math .max 方法简化求出数组中的最大元素。
// ES5 的写法
Math .max.apply(null , (14 , 3 , 77])
// ES6 的写法
Math.max ( ...[14, 3, 77])
// 例子3: 通过 push 函数将一个数组添加到另一个数组的尾部
var arr1 = [0, 1 , 2] ;
var arr2 = [3 , 4, 5];
// ES5写法
Array.prototype.push.apply(arr1,arr2);
// ES6写法
arr1.push(...arr2)
扩展运算符的应用
// 合并数组
扩展运算符提供了数组合并的新写法。
// ESS
[1 , 2].concat(more)
// ES6
[1 , 2 , ...more]
var arr1 = [ ' a ','b'];
var arr2 = [ 'c' ];
var arr3 = [ 'd','e' ] ;
// ES5 的合并数纽
arr1.concat(arr2 , arr3) ; //[ 'a','b ','c','d','e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a','b ','c','d','e' ]
// 与解构赋值结合
例子1
const [first, .. . rest] = [1 , 2 , 3 , 4 , 5];
first // 1
rest // [2 , 3 , 4 , 5]
例子2
const [first, ...reset] = ['123'];
first // "123"
rest // []
如果将扩展运算符用于数组赋值，则只能将其放在参数的最后一位，否则会报错。
const [ ... butLast, last]= [1 , 2 , 3 , 4 , 5] ; // 报错
const [first, .. . middle , last] = [1 , 2 , 3 , 4 , 5] ; // 报错
const [ butLast, ...last]= [1 , 2 , 3 , 4 , 5] ; // [1] , [2,3,4,5]
Array. from()
用于将两类对象转为真正数组:类似数组的对象和可遍历的的对象（包括ES6新增的数据结构Set和Map）
// ESS 的写法
var arrl = [].slice.call(arrayLike); // [ 'a','b','c' ]
// ES6 的写法
let arr2 = Array.from(arrayLike) ; // [ 'a','b','c' ]
// querySelectorAll 方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach 方法。
// 只要是部署了 Iterator 接口的数据结构 Array.from 都能将其转为数组。
例子1：
Array.from ('hello') // ['h', 'e', 'l', 'l', 'o']
例子2:
let namesSet =new Set ([ 'a ','b'] )
Array.from(nameSet) // ['a', 'b']
Array from 还可以接受第 个参数，作用类似于数组的 map 方法，用来对每个元素进行 处理，将处理后的值放入返回的数组。
如果 map 函数里面用到了 this 关键字，还可以传入 Array.from 第三个参数，用来绑定this
Array.from(arrayLike, x => x * x)
／／等同于
Array.from(arrayLike).map(x => x * x );
Array.from([1 , 2 , 3), (x) => x * x)
// [1 , 4 , 9]
Array from 的第 个参数指定了第二个参数运行的次数。这种特性可以 让该方法的用法变得非常灵活。
Array. from ( { length: 2 } , () => ’ j ack ’) //[’ jack ’,’jack ’]
Array.from（）的另一个应用是，将宇符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF 的 Unicode 字符算作 2个字符 的bug
function countSymbols(string) { return Array.from(string) .length;}
Array.of()
用于将一组值转换为数组。
主要目的是弥补数组构造函数 Array ()的不足, 因为参数个数的不同会导致 Array()的行为有差异。
Array() 与 Array.of() 设置新数组的区别，
Array.of() 和 ES5方法 Array() 比较
Array.of(3 , 11 , 8) // [3 , 11 , 8]
Array.of(3) // [3]
Array.of(3).length // 1
Array() // []
Array(3) // [ , , , ] 这里输出的并不是预想中的结果
Array (3, 11 , 8) // [3 , 11 , 8]
// 参数个数只有1个时，实际上是指定数组的长度。
// 当参数个数不少于2个时，Array()才会返回由参数组成的新数组。
Array.of 方法可以用下面的代码模拟实现:
function ArrayOf() {
return [].slice.call(arguments);
}
数组实例的 copyWithin()
数组实例的 copyWithin 方法会在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法会修改当前数组。
Array.prototype.copyWithin(target, start= 0 , end= this.length)
它接受 个参数。
• target （必选〉 ：从该位置开始替换数据。
start （可选）：从该位置开始读取数据，默认为 。如果为负值，表示倒数。
• end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
这3个参数都应该是数值，如果不是，会自动转为数值。
[1, 2 , 3 , 4, 5].copyWithin(0, 3) // [4, 5 , 3 , 4, 5 ]
数组实例的 find()和 findIndex()
数组实例的 find 方法用于找出第一个符合条件的数组成员。
它的参数是 个回调函数， 所有数组成员依次执行该回调函数 直到找出第1个返回值为 true 的成员，然后返回该成员
如果没有符合条件的成员，则返回 undefined
[1 , 4 , - 5 , 10] .find( (n) => n < 0) // -5
[1 , 5 , 10, 15].find(function (value , index , arr) {
return value > 9;
}) // 10
这两个方法都可以发现 NaN 弥补了数组的 indexOf 方法的不足。
findindex方法可以借Object.is方法做到。
[NaN].indexOf(NaN) // -1
[NaN].findlndex(y => Object.is(NaN, y)) // 0
数组实例的fill()
fill 方法使用给定值填充 数组。
例子1：
['a','b','c'].fill(7) // [7,7,7]
例子2：
new Array(3).fill (7)
// [7 , 7 , 7]
fill 方法还可以接受第二个和第三个参数 用于指定填充 起始位置和结束位置
上面的代码表示， fill 方法从1号位开始向原数组填充7，到2号位之前结束。
['a','b','c'].fill(7 , 1 , 2)
//[ 'a', 7 , 'c']
['a','b','c'].fill(7 , 1 , 3)
// ["a", 7, 7]
['a','b','c'].fill(7 , 2 , 3)
// ["a", "b", 7]
数组实例的 entries ()、 keys()和 values() <用于遍历数组>
可用 for ... of 循环遍历 唯一的区别在于keys()是对键名的遍历; values ()是对键值的遍历; entries()是对键值对的遍历。
for(let index of [1,2].keys()) {console.log(index)}
// 0 1
for(let index of [1,2].values()) {console.log(index)}
// 1 2
for(let index of [1,2].entries()) {console.log(index)}
// [0, 1] [1, 2]
数组实例的 includes()
Array prototype ncludes 方法返回一个布尔值，表示某个数组是否包含给定的值， 与字符串的 includes 方法类似。
ES2016引入该方法
[1,2,3].includes(2) // true
[1,2,3].include(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
indexOf 方法有两个缺点 ：
一是不够语义化，其含义是找到参数值的第一个出现位置，所以要比较是否不等于-1 ，表达起来不够直观；
二是，其内部使用严格相等运算符（＝＝＝）进行 判断，会导致对 NaN 的误判。
[NaN].indexOf(NaN) // -1 即表示不存在
includes 使用的是不一样的判断算法：
[NaN].includes(NaN) // true
数组的空位
数组的空位指数组的某个位置没有任何值。比如，Array 构造函数返回的数组都是空位。
空位不是 undefined ，一个位直的值等于 undefined 依然是有值的 空位是没有任何 值的， in 运算符可以说明这一点
0 in [undefined, undefined, undefined] // true
0 in [, , , ] // false
第一个数组的0号位置是有值的 第二个数组的0号位置没有值。
由于空位的处理规则非常不统 ，所以建议避免出现空位。
ES5 对空位的处理很不一致 ，大多数情况下会忽略空位
ES6 则是明确将空位转为 undefined ！！！
ES5 对空位的处理很不一致 ，大多数情况下会忽略空位
• forEach （）、 filter （）、 every （）和 some （）都会跳过空位。
• map （）会跳过空位，但会保留这个值。
• join （）和 toString （）会将空位视为 undefined ，而 undefined null 会被处
理成空字符串。
ES6的例子：空位处理
1.Array.from 方法会将数组的空位转为 undefined.
Array.from(['a', , 'b']) // ['a', undefined, 'b']
2.扩展运算符（ ．．．）也会将空位转为 undefined.
[...['a', ,'b']] // ['a', undefined, 'b']
3. copyWithin() 会连空位一起复制。
[,'a','b', ,].copyWithin(2,0) // [ ,'a', ,'a']
4. fill() 会将空位视为正常的数组位置。
new Array(3).fill(3) // [3,3,3]
5. for ... of 循环也会遍历空位,转换为undefined
let arr = [ , 'a', ,] // [empty, "a", empty]
for(let i of arr) {
console.log(i) // undefined 'a' undefined
}
6. entries()、 keys()、 values() 、find()和 findindex() 会将空位处理成 undefined