7.数组的扩展

回到目录

扩展运算符

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

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

function add (x,y,z) {
    return x+y+z
}
add([...[1,2,3]) // 6

作用

复制数组

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1; // [2, 2]

上面代码中，a2 并不是 a1 的克隆，而是指向同一份数据的另一个指针。修改 a2，会直接导致 a1 的变化。

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

合并数组

let arr1 = [1, 2];
let arr2 = [2, 3];
let arr3 = [...arr1, ...arr2]; // [1 ,2 ,2, 3]

本质上(...) 会调用数组的 Iterator ,所以只要存在 Iterator 的数据都可以被扩展

let arr1 = [...5]; // Uncaught TypeError: number 5 is not iterable (cannot read property Symbol(Symbol.iterator))

数字 5 不能被扩展的原因是 cannot read property Symbol(Symbol.iterator)，所以如果我们给他定义了这个方法，那么就可以被扩展了

Number.prototype[Symbol.iterator] = function() {
  let i = 0;
  let num = this.valueOf();
  return {
    next: () => {
      return i < num ? { value: 2 * i++ } : { done: true };
    }
  };
};

console.log([...6]); // [0, 2, 4, 6, 8, 10]

当然这种方式在平时工作中慎用，不然会让人觉得莫名其妙

所有可以 Iterator 的数据都可以被扩展成数组

Array api

type	作用
Array.from(Array, cb, this)	将类数组和可遍历的对象转为真正的数组
Array.of()	将一组值，转换为数组。

// 还是用上面的例子
Number.prototype[Symbol.iterator] = function() {
  let i = 0;
  let num = this.valueOf();
  return {
    next: () => {
      return i < num ? { value: 2 * i++ } : { done: true };
    }
  };
};
[...6]; // [0, 2, 4, 6, 8, 10]
Array.from(6); // [0, 2, 4, 6, 8, 10]
for (let v of 6) {
  console.log(6);
}
// 0 2 4 6 8 10

Array.from(6, v => v + 10); // [10, 12, 14, 16, 18, 20]
Array.from(
  6,
  function(v) {
    return this.valueOf() + v;
  },
  6
);

Array.of(1, 2); // [1, 2]

数组实例的 API

type	作用	返回值	是否修改原数组
copyWithin(target, start = 0, end = this.length)	在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。 target（必需）：从该位置开始替换数据。如果为负值，表示倒数。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。	新的数组	是
find((value, index, arr)=>{}, this )	用于找出第一个符合条件的数组成员	返回找到的数组成员，没找到就返回 undefined	否
findIndex((value, index, arr)=>{}, this )	用于找出第一个符合条件的数组成员	返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1	否
fill(value, startIndex, endIndex)	使用给定值，填充一个数组。value (可选):填充值。startIndex (可选)：开始填充的位置。endIndex (可选)：结束填充的位置。注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。	填充后的新数组	是
includes(value,index)	表示某个数组是否包含给定的值,用来替代 indexOf	返回布尔值,true/false	否
flat(n=1)	用来给数组降维。n 表示降低的维数，n 也可以是 Infinity ，表示无论有多少维，都降成一维	返回降维后的数组	是
flatMap((value,index,array) => {},n)	等同于先对数组执行 map() ,然后再执行 flat()	返回新的数组	是
entries()	对键值对的遍历	遍历器对象	否
keys()	对键名的遍历	遍历器对象	否
values()	对键值的遍历	遍历器对象	否

例子

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

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

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

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

function f(v) {
  return v > this.age;
}
let person = { name: "John", age: 20 };
[10, 12, 26, 15].find(f, person); // 26

// 另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。
[NaN]
  .indexOf(NaN)
  // -1

  [NaN].findIndex(y => Object.is(NaN, y));
// 0

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

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

["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']

let arr = new Array(3).fill({ name: "Mike" });
arr[0].name = "Ben";
arr;
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr;
// [[5], [5], [5]]

数组的空位

ES5

type	api
跳过空位	forEach(), filter(), reduce(), every() 和 some()
跳过空位，但会保留这个值	map()
视为 undefined	join()和 toString()

ES6

明确将空位处理成 undefined，这句话的意思就是es6 之后的遍历方法都会把空位处理成 undefined
回到目录