10.6

欧吼吼發表於2024-11-19

一、概念

在JS中，擴充套件運算子（spread）是三個點 (...) ，剩餘運算子（rest）也是三個點 (...)

二、擴充套件運算子

（1）基本使用：擴充套件運算子的主要作用是將一個陣列轉為用逗號分隔的引數序列，它好比 rest 的逆運算

//傳遞資料代替多個字串的形式
function  test(a,b,c){
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

var arr = [1, 2, 3];
test(...arr);

//將一個陣列插入到另一個陣列中
var arr1 = [1,2,3];
var arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

//字串轉陣列
var str = 'hello';
var arr3 = [...str];
console.log(arr3); // ["h", "e", "l", "l", "o"]

（2）擴充套件運算子（…）會呼叫預設的 Iterator 介面。

// 例一
var str = 'hello';
[...str] //  ['h','e','l','l','o']

// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

上面程式碼的擴充套件運算子內部就呼叫 Iterator 介面。

實際上，這提供了一種簡便機制，可以將任何部署了 Iterator 介面的資料結構，轉為陣列。也就是說，只要某個資料結構部署了 Iterator 介面，就可以對它使用擴充套件運算子，將其轉為陣列。

let arr = [...iterable];

有關對 Iterator 的介紹，請檢視這篇文章 ES6中的Iterator（遍歷器）和 for of 迴圈

（3）由於擴充套件運算子可以展開陣列，所以可以用來替代函式的 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);

三、剩餘運算子

把用逗號隔開的值序列組合成一個陣列

//當函式引數個數不確定時，用 rest運算子
function f1(...args) {
  console.log(args); // [1,2,3]
}

f1(1,2,3);

//當函式引數個數不確定時的第二種情況
function f2(item, ...arr) {
  console.log(item); // 1
  console.log(arr);  // [2,3]
}
f2(1, 2, 3);

//rest運算子配合 解構使用
let [a,...temp]=[1, 2, 4];
console.log(a);    // 1
console.log(temp); // [2,4]

相關文章