一文詳解 JavaScript 中展開運算子的不同使用方式

這篇文章帶大家了解 JavaScript 中使用擴充運算子的不同方式，以及擴充運算子和剩餘運算子之間的主要差異，希望對大家有所幫助！

由三個點 ( ...) 表示，JavaScript 擴充運算子是在 ES6 中引入的。它可用於將集合和數組中的元素擴展為單一單獨的元素。

擴充運算子可用於建立和複製陣列和物件、將陣列作為函數參數傳遞、從陣列中刪除重複項等等。

語法

擴充運算子只能用於可迭代物件。它必須在可迭代物件之前使用，沒有任何分隔。例如：

console.log(...arr);

功能以及參數

以Math.min()方法為例。此方法接受至少一個數字作為參數，並傳回傳遞的參數中最小的數字。

如果您有一個數字數組並且您想找到這些數字中的最小值，那麼在沒有展開運算符的情況下，您需要使用它們的索引一個一個地傳遞元素，或者使用apply()方法來傳遞數組作為參數。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

請注意，第一個參數是null，因為第一個參數用來更改this呼叫函數的值。

擴充運算子是將陣列元素作為參數傳遞給函數的更方便和可讀的解決方案。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

建立陣列

擴充運算子可用於從現有陣列或其他包含Symbol.iterator()方法的可迭代物件建立新陣列。這些是可以使用for...of循環迭代的物件。

例如，它可用於複製陣列。如果您只是將現有數組的值分配給新數組，則對新數組進行更改將更新現有數組：

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

透過使用擴充運算符，可以將現有數組克隆到一個新數組中，並且對新數組所做的任何更改都不會影響現有數組：

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

應該注意的是，這只會克隆一維數組。它不適用於多維數組。

擴充運算子也可用於將多個陣列連接為一個。例如：

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

您也可以在字串上使用擴充運算子來建立一個數組，其中每個項目都是字串中的一個字元：

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

#建立對象

擴充運算子可以以不同的方式用於建立物件。

它可用於淺克隆另一個物件。例如：

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

它還可以用於將多個物件合併為一個。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

需要注意的是，如果物件共用相同的屬性名稱，將使用最後一個物件展開的值。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

擴充運算子可用於從數組建立對象，其中數組中的索引成為屬性，該索引處的值成為屬性的值。例如：

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

它也可以用於從字串建立對象，其中，字串中的索引成為屬性，該索引處的字元成為屬性的值。例如：

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

將 NodeList 轉換為陣列

#NodeList是節點的集合，它們是文件中的元素。元素透過集合中的方法訪問，例如itemor entries，與陣列不同。

您可以使用擴充運算子將 NodeList 轉換為 Array。例如：

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

從陣列中刪除重複項

Set物件是一個只儲存唯一值的集合。與 NodeList 類似，可以使用擴充運算子將 Set 轉換為陣列。

由於 Set 僅儲存唯一值，因此可以將其與擴充運算子配對以從陣列中刪除重複項。例如：

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

擴充運算子與休息運算子

rest 運算子也是一個三點運算子( ...)，但它用於不同的目的。 rest 運算子可以在函數的參數清單中使用，表示該函數接受未定義數量的參數。這些參數可以當作數組處理。

例如：

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

在此範例中，rest 運算子用作calculateSum函數的參數。然後，您循環遍歷數組中的項目並將它們相加以計算它們的總和。

然後，您可以將變數一個一個地calculateSum作為參數傳遞給函數，或使用擴充運算子將陣列的元素作為參數傳遞：

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

#結論

擴充運算子可讓您用更少的程式碼行做更多的事情，同時保持程式碼的可讀性。它可以用於可迭代物件以將參數傳遞給函數，或從其他可迭代物件建立陣列和物件。

【相關推薦：javascript影片教學、程式設計基礎影片】

#

以上是一文詳解 JavaScript 中展開運算子的不同使用方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！