回到目錄

擴展運算符

擴展運算符（spread）是三個點（...）

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

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

作用

1. 復(fù)制數(shù)組

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

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

上面代碼中，a2 并不是 a1 的克隆斜做，而是指向同一份數(shù)據(jù)的另一個指針趁尼。修改 a2，會直接導(dǎo)致 a1 的變化催蝗。

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

2. 合并數(shù)組

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

本質(zhì)上(...) 會調(diào)用數(shù)組的 Iterator ,所以只要存在 Iterator 的數(shù)據(jù)都可以被擴展

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

數(shù)字 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]

當(dāng)然這種方式在平時工作中慎用丙号，不然會讓人覺得莫名其妙

所有可以 Iterator 的數(shù)據(jù)都可以被擴展成數(shù)組

Array api

// 還是用上面的例子
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]

數(shù)組實例的 API

例子

// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號位熔酷，-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號位到數(shù)組結(jié)束孤紧，復(fù)制到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

// 另外，這兩個方法都可以發(fā)現(xiàn)NaN拒秘，彌補了數(shù)組的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]]

數(shù)組的空位

ES5

ES6

明確將空位處理成 undefined躺酒，這句話的意思就是es6 之后的遍歷方法 都會把空位處理成 undefined
回到目錄