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

本篇文章帶大家瞭解一下 JavaScript 中使用擴充套件運運算元的不同方式，以及擴充套件運運算元和剩餘運運算元之間的主要區別，希望對大家有所幫助！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

由三個點 ( ...) 表示，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 中展開運運算元的不同使用方式的詳細內容，更多請關注TW511.COM其它相關文章！