ES6 数组扩展

亦凉 2022-02-21 01:21 270阅读 0赞

## 扩展运算符|展开运算符 ##

`...`不仅可以操作对象，也可以操作数组。

可见，`...`运算符是**浅拷贝**。

合并数组：

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

## API ##

*  `Array.of(...items)` 将参数中所有值作为元素形成数组
 *  `Array.from(arrayLike, ?mapFn, ?thisArg)` 从类数组对象|可迭代对象中创建一个新的数组实例。
 *  `arr.find(predicate, ?thisArg)` 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。
 *  `arr.findIndex(predicate, ?thisArg)` 找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1。
 *  `arr.fill(value, ?start, ?end)` 将数组中指定区间的所有元素的值，都替换成某个固定的值。
 *  `arr.copyWithin(target, start, ?end)` 在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。
 *  `arr.keys(o)` 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。
 *  `arr.values(o)` 返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。
 *  `arr.entries(o)` 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。
 *  `arr.includes(searchElement, ?fromIndex)` 判断当前数组是否包含某指定的值。
 *  `arr.flat(depth)` 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
 *  `arr.flatMap(callback, ?thisArg)` 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

## detial ##

*  `Array.of(...items) - Array`
    
        var arr = Array.of(1, 2, 3, 4);
        console.log(arr);       // (4) [1, 2, 3, 4]
        var arr = Array.of("asd", false, null, undefined, {name:"JT"});
        console.log(arr);       // (5) ["asd", false, null, undefined, {…}]
        var arr = Array.of(3);  // 只传入一个参数，且为Number类型。
        console.log(arr);       // [3]
    
    [JS中Array()和Array.of()的区别][JS_Array_Array.of]
 *  `Array.from(arrayLike, ?mapFn, ?thisArg) - Array`
    
     *  args:
        
         *  `arrayLike` 想要转换成数组的伪数组对象|可迭代对象。
            
             *  `伪数组对象`: 有一个`length`属性和若干索引属性(名为数值，值为任意类型)的任意对象。  
                伪数组对象必须含有`length`属性，且元素属性名必须是数值|可转换为数值。
             *  `可迭代对象`: 可以获取对象中的元素，如`Map`和`Set`等。
         *  `mapFn` 数组中的每个元素会执行的回调函数(新数组的元素是经过处理的返回值)。
         *  `thisArg` 执行回调函数`mapFn`时的`this`对象
     *  code  
        **三个参数**
    
        // arrayLike
        console.log(Array.from([1,2,3]));  // (3) [1, 2, 3]
        
        // mapFn
        console.log(Array.from([1,2,3], value=>value+1)); // (3) [2, 3, 4]
        
        // thisArg
        var aaa = {
          do: function(n) {return n * 2;}
        };
        var arrayLike = [1, 2, 3];
        var arr = Array.from(arrayLike, function(value) {
          return this.do(value);  // mapFn中的this会被置换。
        }, aaa);
        console.log(arr);   // (3) [2, 4, 6]
    
    **NOTE: 无法在箭头函数表达式的外部动态置换其内部运行时的this对象**  
    所以，如果有置换函数内部this对象的需求，就应该使用常规的函数写法。
    
    **转换伪数组对象**
    
        var arr = Array.from({
          0: "1",
          1: "2",
          2: "3",
          length: 3
        });
        console.log(arr); // (3) ["1", "2", "3"]
        
        var arr = Array.from({
          0: "1",
          1: "2",
          2: "3",
          length: 2
        });
        console.log(arr); // (2) ["1", "2"]
        
        var arr = Array.from({
          0: "1",
          1: "2",
          2: "3",
        });
        console.log(arr); // (2) []
        // 可见，length属性是一个“指标”。若length不存在或为0，会返回一个空数组(含0个元素)。
    
    **转换可迭代对象**
    
        // String
        console.log(Array.from("hello")); // (5) ["h", "e", "l", "l", "o"]
        
        // Set
        var set = new Set([1, 2, 3, 4]); // arr可迭代，可用于构造Set对象。
        console.log(Array.from(set)); // (4) [1, 2, 3, 4]
        
        // Map
        var map = new Map([["k1", "v1"], ["k2", "v2"]]);
        // map.set("k1", "v1").set("k2", "v2");
        var arr = Array.from(map);
        console.log(arr);   // (2) [Array(2), Array(2)]
        arr = arr.flat();
        console.log(arr);   // ["k1", "v1", "k2", "v2"]
    
    **NOTE: Set和Map对象的赋值**
    
     *  Set对象添加元素
        
         *  `new Set().add(1).add(2)`
         *  `new Set([1, 2])`
     *  Map对象添加键值对
        
         *  `new Map().set("k1", "v1").set("k2", "v2")`
         *  `new Map([["k1", "v1"], ["k2", "v2"]])`
 *  `arr.find(predicate, ?thisArg)` 返回找到的数组元素值(找不到就返回`undefined`)  
    `preficate: function(element, index, array)`  
    当断言为真时(predicate()返回true)，返回对应的`element`值。
    
        var arr = [1, 2, 3, 4, 5];
        arr.find(function(element, index, array) {
          // console.log(`arr[${index}] = ${element}`);
          return element > 2;   // 3 这是元素值
          // return index == 1;       // 2
        });
    
    `arr.find()`当断言为真时，返回的是元素的值`element`。  
    `arr.findIndex()`当断言为真时，返回的是元素的下标`index`。  
    若有多个元素满足断言，只返回第一个。
 *  `arr.findIndex(predicate, ?thisArg)` 返回找到的数组元素的下标(找不到就返回`-1`)
    
        var arr = [1, 2, 3, 4, 5];
        arr.findIndex(function(element, index, array) {
          return element > 2;   // 2 这是下标
          // return index == 1; // 1
        });
 *  `arr.fill(value, ?start, ?end)` 返回arr(经过修改)  
    将下标在`[start, end)`区间内的元素值用指定的value填充|替换(直接操作原数组)。  
    默认值：`start == 0, end == arr.length`(即填充所有元素)
    
        var arr = Array.from("Hello");
        console.log(arr);   // (5) ["H", "e", "l", "l", "o"]
        
        arr.fill("你好", 2, 4);
        console.log(arr);   // (5) ["H", "e", "你好", "你好", "o"]
        arr.fill(666);
        console.log(arr);   // (5) [666, 666, 666, 666, 666]
 *  `arr.copyWithin(target, start, ?end)` 返回`arr`(经过修改)  
    用索引在`[start, end)`区间内的元素，依次覆盖数组的元素(从`target`开始)  
    `end`默认值等于`length`。
    
        Array.from("0123456789");
        // (10) ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
        Array.from("0123456789").copyWithin(2, 5);
        // (10) ["0", "1", "5", "6", "7", "8", "9", "7", "8", "9"]
        Array.from("0123456789").copyWithin(2, 5, 7);
        // (10) ["0", "1", "5", "6", "4", "5", "6", "7", "8", "9"]
 *  遍历  
    `keys()`可遍历数组的索引`index`。  
    `values()`可遍历数组的元素值`element`。  
    `entries()`可遍历数组的`[index, element]`对。  
    三者都返回`array Iterator`类型的对象。  
    不同的是：`iterator.next().value`。分别是\[index\], \[element\], \[index, element\]。  
    各有两种遍历方式：`for...of`和`普通for`。
    
     *  `arr.keys(o) - Array Iterator`
        
            var arr = Array.from("abc");
            
            var iterator = arr.keys();
            for (var index of iterator) {
              console.log(`${index} ${arr[index]}`);
            }
            
            var iterator = arr.keys();  // 重新获取iterator
            for (var i = 0; i < arr.length; i++) {
              var index = iterator.next().value;
              console.log(`${index} ${arr[index]}`);
            }
        
        `iterator.next()`返回一个固定格式的对象`{value: xxx, done: 布尔值}`。
     *  `arr.values(o) - Array Iterator`
        
            var arr = Array.from("abc");
            var iterator = arr.values();
            for (var value of iterator) {
              console.log(value);
            }
            
            var iterator = arr.values();
            for (var i = 0; i < arr.length; i++) {
              console.log(iterator.next().value);
            }
     *  `arr.entries(o) - Array Iterator`
        
            var arr = Array.from("abc");
            var iterator = arr.entries();
            for (var entry of iterator) {
              console.log(entry);
            }
            
            // for..of中的entry实际为[index, element]，可替换。
            var iterator = arr.entries();
            for (var [index, element] of iterator) {
              console.log(index, element);
            }
            
            var iterator = arr.entries();
            for (var i = 0; i < arr.length; i++) {
              console.log(iterator.next().value);
            }
            
            // iterator.next() 是 {value: [index, element], done: 布尔值};
            // iterator.next().value 是 [index, element];
            var iterator = arr.entries();
            for (var i = 0; i < arr.length; i++) {
              var value = iterator.next().value;
              console.log(value[0], value[1]);
            }
 *  `arr.inlcudes(searchElement, ?fromIndex)`
    
        var arr = Array.from("abc");
        console.log(arr.includes("b"));     // true
        console.log(arr.includes("b", 2));  // false
    
    **NOTE**  
    `arr.include(searchElement, ?fromIndex)` arr中是否有指定的`元素值`。  
    `set.has(value)` set中是否有指定的`value`  
    `map.has(key)` map中是否有指定的`key`
 *  `arr.flat(depth)` 返回arr(经过修改)  
    `depth`默认为`1`。
    
        [1, [2, [3, [4, [5, 6, 7]]]]].flat()  // 相当于flat(1)
        // (3) [1, 2, Array(2)]
        [1, [2, [3, [4, [5, 6, 7]]]]].flat(0) // 不操作
        // (2) [1, Array(2)]
        [1, [2, [3, [4, [5, 6, 7]]]]].flat(1)
        // (3) [1, 2, Array(2)]
        [1, [2, [3, [4, [5, 6, 7]]]]].flat(2)
        // (4) [1, 2, 3, Array(2)]
        [1, [2, [3, [4, [5, 6, 7]]]]].flat(Infinity)  // 深度递归层数不确定，用Infinity(仅此处)。
        // (7) [1, 2, 3, 4, 5, 6, 7]
 *  `arr.flatMap(callback, ?thisArg)` 返回新数组，每个元素都是回调函数的返回值。(解构深度depth为1)。  
    `callback: function(value, index, array) {...}`
    
        var arr = [1, 2, 3];
        
        console.log(JSON.stringify(arr.flatMap(value => value*2 )));    // [2,4,6]
        console.log(JSON.stringify(arr.flatMap(value => [value*2] )));  // [2,4,6]
        console.log(JSON.stringify(arr.flatMap(value => [[value*2]] )));// [[2],[4],[6]]
        
        console.log(JSON.stringify(arr.map(value => value*2 )));        // [2,4,6]
        console.log(JSON.stringify(arr.map(value => [value*2] )));      // [[2],[4],[6]]
        console.log(JSON.stringify(arr.map(value => [[value*2]] )));    // [[[2]],[[4]],[[6]]]
    
    `arr.flatMap(callback, ?thisArg)`和`arr.map(callback, ?thisArg)`返回值有差异。

## 源码 ##

[ES6 Array.from()源码][ES6 Array.from]

[JS_Array_Array.of]: https://blog.csdn.net/wuyujin1997/article/details/89175583
[ES6 Array.from]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill