ES6之数组的扩展

1.扩展运算符：是三个点（...），将一个数组转为用逗号分隔的参数序列

由于扩展运算符可以展开数组，所以不再需要apply方法将数组转化为函数的参数了

扩展运算符的应用：

• 复制数组

	const a1 = [1,2];
    const a2 = a1;
    a2[0] = 2;
    console.log(a1)   // [2,2]

上例中a2并不是a1的克隆，而是指向同一份数据的另一个指针，因此修改a2会导致a1改变
要想实现修改复制后的数组不会改变原数组：
ES5中：

	const a1 = [1,2];
    const a2 = a1;
    a2[0] = 2;
    console.log(a1)   // [1,2]

ES6中：

	const a1 = [1,2];
    const a2 = [...a1]
    a2[0] = 2;
    console.log(a1); // [1,2]

• 合并数组（两种方法均为浅拷贝）

ES5：

	const arr1 = [1,2];
    const arr2 = ['a','b','c'];
    const arr3 = ['f9','t6'];

    const arr = arr1.concat(arr2,arr3);
    console.log(arr);  // [1, 2, "a", "b", "c", "f9", "t6"]

ES6：

	const arr1 = [1,2];
    const arr2 = ['a','b','c'];
    const arr3 = ['f9','t6'];

    const arr = [...arr1,...arr2,...arr3];
    console.log(arr);  // [1, 2, "a", "b", "c", "f9", "t6"]

• 与解构赋值结合

	const [first,...last] = [1,2,3,4,5];
    console.log(first);  // 1
    console.log(last);  // [2,3,4,5]

    const [...first,last] = [1,2,3,4,5]; 
    // Uncaught SyntaxError: Rest element must be last element
    console.log(first);
    console.log(last);

• 字符串
  扩展运算符可以将字符串转化为真正的数组

	console.log([...'mango']);  //  ["m", "a", "n", "g", "o"]

• 实现了Iterator接口的对象
  任何定义了遍历器接口的对象，都可以用扩展运算符转为i真正的数组，对于没有部署Iterator接口的类似数组的对象，扩展运算符就无法将其转化为真正的数组

2.Array.from()：Array.from(arrayLike[, mapFn[, thisArg]])

用于将两类对象转为真正的数组，类似数组的对象和可遍历的对象

• 只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组

	console.log(Array.from('hello'));  // ["h", "e", "l", "l", "o"]

    let set = new Set([1,2,3]);
    console.log(Array.from(set));   // [1,2,3]

• 如果一个参数是真正的数组，Array.from会返回一个一摸一样的新数组

	let arr = [1,2,3];
    console.log(Array.from(arr));  // [1,2,3]

• 扩展运算符也可以将某些数据结构转为数组（调用遍历器接口Symbol.iterator），如果没有部署这个接口，就无法转换

	function fn() {
        const args = [...arguments];
        console.log(args);  // ["ab",6]
    }
    fn('ab',6);

• Array.from还支持类似数组的对象（类似数组的对象：本质特征必须有length属性，因此），因此，任何有length属性的对象，都可已通过Array.from方法转换为数组，而此时扩展运算符无法转换

	let arr = Array.from({length:3});
    console.log(arr);  //  [undefined, undefined, undefined]

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

	const arr = [1,2,3]
    console.log(Array.from(arr,x=>x*x));  // [1,4,9]

• 如果map函数里面用到this关键字，还可以传入Array.from的第三个参数，用来绑定this

3.Array.of()

用于将一组值，转换为数组.基本可以代替Array()或new Array()，并且不存在由于参数不同而导致的重载

	let arr = Array.of(1,2,3)
    console.log(arr);  // [1,2,3]

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

4.数组实例的copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置，然后返回当前数组（会修改原数组）

Array.prototype.copyWithin(target,start = 0,end = this.length)

• target（必须）：从该位置开始替换数据，如果为负值，表示倒数
• start（可选）：从该位置开始读取数据，默认值为0，如果为负值，表示从末尾开始计算
• end（可选）：到该位置停止读取数据，默认等于数组长度，如果为负值，表示从末尾开始计算

	let arr1 = [1,2,3,4,5].copyWithin(0,3);
    console.log(arr1);  //  [4, 5, 3, 4, 5]

    let arr2 = [1,2,3,4,5].copyWithin(0,3,4);
    console.log(arr2);  //  [4, 2, 3, 4, 5]

    let arr3 = [1,2,3,4,5].copyWithin(0,-2,-1);
    console.log(arr3);  //  [4, 2, 3, 4, 5]

5.数组实例的find()和findIndex()

• find()用于找出第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员，如果没有符合条件的成员，则返回undefined
• find()可以接受三个参数：当前值，当前位置，原数组
• findeIndex()返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
• 这两个方法都可以接受第二个参数，用来绑定回调函数的this对象
• 这两个方法都可发现NaN，弥补了数组的indexOf方法的不足

	console.log([NaN].indexOf(NaN));  // -1
    console.log([NaN].findIndex(x => Object.is(NaN,x)));  // 0

indexOf无法识别数组的NaN，findexIndex()方法可以借助Object.is方法实现

6.数组实例的fill()：使用给定值，填充一个数组，可接受三个参数，依次为填充值、起始位置、结束位置

	let a = [1,2,3].fill(5);
    console.log(a);  // [5,5,5]

    let b = [1,2,3].fill('x',1,2);
    console.log(b);  // [1, "x", 3]

如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象

7.数组实例的entries()、key()和values()：用于遍历数组

• entries()：是对键值对的遍历
• keys()：是对键名的遍历
• values()：是对键值的遍历

	for(let i of ['aaa','bbb','ccc'].keys()) {
        console.log(i);
        // 0
        // 1
        // 2
    }

    for(let e of ['aaa','bbb','ccc'].values()) {
        console.log(e);
        // aaa
        // bbb
        // ccc
    }

    for(let [i,e] of ['aaa','bbb','ccc'].entries()) {
        console.log(i,e);
        // 0 "aaa"
        // 1 "bbb"
        // 2 "ccc"
    }

如果不适用for…of循环，可以手动调用遍历器对象的next方法，进行遍历

8.数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值

该方法接受第二个参数，表示搜索的起始位置，默认为0。如果为负数，则表示倒数的位置，如果大于数组长度，则会重置从0开始

9.数组实例的flat()、flatMap()

• Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数组没有影响
• flat()默认只会“拉平”一层，如果想要拉平多层，需要设置参数，默认值为1

	let a = [1,2,3,4,[5,6],7,8].flat();
    console.log(a);  // [1, 2, 3, 4, 5, 6, 7, 8]

    let b = [1,2,[3,4,[5,6,],7],8].flat();
    console.log(b); // [1, 2, 3, 4, [5,6], 7, 8]

    let c = [1,2,[3,4,[5,6,],7],8].flat(2);
    console.log(c);  // [1, 2, 3, 4, 5, 6, 7, 8]

• 不管有多少层嵌套，都要转换成一维数组，可用Infinity关键字做参数

	let a = [1,2,[3,4,[5,6,["a","b"],"c"],7],8].flat(Infinity);
    console.log(a);  //  [1, 2, 3, 4, 5, 6, "a", "b", "c", 7, 8]

• 如果原数组有空位，flat()方法会跳过空位

	let a = [1,2,,3,4].flat();
    console.log(a);  //  [1, 2, 3, 4]

• flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.flatMap()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组
• faltMap()只能展开一层数组

	let a = [1,2,3,4].flatMap((x) => [x,x * 2]);
    console.log(a);  //  [1, 2, 2, 4, 3, 6, 4, 8]

    let b = [1,2,3,4].flatMap(x => [[x * 2]]);
    console.log(b);  // [[2],[4],[6],[8]]

• flatMap()可接受三个参数：当前数组成员，当前数组成员的位置，原数组

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

空位不是undefined，一个位置的值等于undefined，依然是有值的，空位是没有任何值