JavaScript 擴充運算符

JavaScript 擴充運算子 (...)

• JavaScript 中的 Spread 運算子將陣列展開（解包）為其各個元素。

*它可與陣列和物件一起使用，在陣列中，它的使用時間為：

1。 建構數組
2. 將參數傳遞給函數

1- 建立陣列：

• 在這裡我們可以使用它來擴展一個數組元素並在另一個（例如數組）中使用它。

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• 如您所見，擴充運算子使事情變得更加容易。

• 如果您再次想要擴充陣列的各個元素，請使用擴充運算子：
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• 另一個例子來了解更多：

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• 請記住，這裡我們正在創建一個全新的數組，我們不會更改（變異）食物數組，請看：

console.log(foods); // ['chicken', 'meat', 'rice']

• 擴充運算子與解構類似，但不同之處在於擴充運算子不會建立新變量，因此我們只能在寫入以逗號分隔的值的地方使用它。

擴充運算子與陣列的兩個有用用例：

1.建立陣列的副本：

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2.合併兩個或多個陣列：

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• 展開運算子不僅適用於數組，還適用於所有可迭代對象，例如：數組、字串、映射和集合（大多數內建資料結構），但不適用於（對象）。
• 在字串上：原始字串上的每個字母 = 一個單獨的元素，例如：

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• 但請記住，除了我們在頂部指定的兩種情況（“構建數組”和“傳遞參數”）之外，我們仍然不想使用擴展運算符，因為例如，如果我們想要使用一些用逗號分隔的值來透過範本文字建立字串，它不會工作並且會給我們一個錯誤，因為它不是一個需要用逗號分隔多個值的地方：

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- 將參數傳遞給函數

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• 使用擴充運算子：
• 從 ES2018 開始，Spread 運算子實際上也適用於對象，即使對像不是可迭代的，例如：

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• 在第一個中，我們創建了一個與餐廳對象具有相同屬性的新對象，但我們添加了另一個屬性，即 netWorth 屬性。
• 在第二個中，我們複製了餐廳對象，請注意，對複製對象的變更不會影響原始對象，反之亦然。

希望您能理解這裡的所有內容，如果您有任何疑問，請隨時在評論部分提問，感謝您的閱讀？

以上是JavaScript 擴充運算符的詳細內容。更多資訊請關注PHP中文網其他相關文章！