欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6 数组扩展

程序员文章站 2023-12-22 12:29:34
...

扩展运算符|展开运算符

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

var arr1 = [1, "asd", {name:"张三"}];
var arr2 = [...arr1];
console.log(arr1[2], arr2[2]);  // {name: "张三"} {name: "张三"}
arr1[2].name = "李四";
console.log(arr1[2], arr2[2]);  // {name: "张三"} {name: "张三"}

可见,...运算符是浅拷贝

合并数组:

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()的区别

  • Array.from(arrayLike, ?mapFn, ?thisArg) - Array

    • args:
      • arrayLike 想要转换成数组的伪数组对象|可迭代对象。
        • 伪数组对象: 有一个length属性和若干索引属性(名为数值,值为任意类型)的任意对象。
          伪数组对象必须含有length属性,且元素属性名必须是数值|可转换为数值。
        • 可迭代对象: 可以获取对象中的元素,如MapSet等。
      • 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 数组 API

上一篇:

下一篇: