es6--数组的扩展

扩展运算符：

扩展运算符（spread）是三个点（...）

好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

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

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

扩展运算符的应用-合并数组 扩展运算符提供了数组合并的新写法。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

特点：返回一个新数组，不改变原数组

新增：includes()

基本用法：判断数组中是否含有某个成员

<script>
        //判断数组中是否含有某个成员
        console.log([1, 2, 3].includes("2"));
        console.log([1, 2, 3].includes(2));
</script>

基本遵循严格相等(===)，但是对于NaN的判断与===不同，includes认为NaN===NaN

<script>
        //
        console.log([1, 2, NaN].includes(NaN));
    </script>

也是有第二个参数的，第二个参数表示搜索的起始位置，默认值是0

<script>
        //
        console.log([1, 2, NaN].includes(NaN, 3));
    </script>

应用：

<script>
        //数组去重
        const arr = [1, 2, 4, 5, 4, 7, 4];
        let newArr = [];
        for (const item of arr) {
            if (!newArr.includes(item)) {
                newArr.push(item);
            }
        }
        console.log(newArr);
    </script>

 新增Array.from() 构造函数方法：

将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

1.基本用法：

  <script>
        //基本用法
        //所有可遍历的数据可以转换成数组：数组、字符串、Set、Map、NodeList、arguments可以转换成数组
        console.log(Array.from(new Set([1, 2, 1, 3, 1])));
        console.log([...(new Set([1, 2, 1, 3, 1]))]);
    </script>

拥有length属性的任意对象以及可以转换成数字的属性都可以转换为数组形式：

<script>
        //拥有length属性的任意对象
        const obj = {
            '0': 'a',
            '1': 'b',
            'name': 'zhangsan',
            length: 3
        };
        console.log(Array.from(obj));
    </script>

第二个参数

作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

 <script>
        //
        console.log(Array.from('1234', value => value * 2));
        console.log(Array.from('1234').map(value => value * 2));
    </script>

第三个参数：用来修改其this指向

 <script>
        //第三个参数
        //用来修改其this指向

        console.log(Array.from('1234', function() {
            console.log(this);
        }, document));
    </script>

注意：实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组

新增：Array.of()

Array.of方法用于将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

新增：数组实例的 copyWithin()

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

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

它接受三个参数。

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

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

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

拷贝数组内部的值来替换！！！

新增：数组实例的 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员

find()：找到满足条件的一个立即返回

findIndex()：找到满足条件的一个，立即返回其索引

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

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

上面代码找出数组中第一个小于 0 的成员。

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

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

新增：数组实例的 fill()

fill方法：使用给定值，填充一个数组

注意：如果原数组里没有值，那么将使用给定值进行填充；如果数组里面有值，则会使用给定值进行强制覆盖替换

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]