Spread運算子

允許從 iterable 表示式（如另一個數組文字）初始化部分陣列文字，或允許表示式擴充套件到多個引數（在函式呼叫中）。

語法

var array = [[arg0ToN,] ...iterable [,arg0ToN]]
func([args,args | ...iterable])

引數

iterable

必需。 迭代物件。

arg0ToN

可選。 陣列文字的一個或多個元素。

args

可選。 函式的一個或多個引數。

本文將帶大家瞭解如何在JavaScript中使用Spread（延展操作）運算子。

ES6中引入了延展操作運算子（...）。

延展操作運算子將可迭代的物件擴充套件為其單獨的元素，可迭代物件是可以使用 for 迴圈進行迴圈的任何物件。

可迭代的示例：Array，String，Map，Set，DOM節點。

1.在log中使用延展操作運算子

你可以在 console.log 中對可迭代物件使用延展操作操作符

let fruits = ['🍈','🍉','🍋','🍌'];
console.log(...fruits); //🍈 🍉 🍋 🍌

2.用延展操作運算子複製陣列

let fruits = ['🍈','🍌'];
let fruitsCopy = [ ...fruits ];
console.log(...fruitsCopy); //🍈 🍉 🍋 🍌

複製物件

let user = {name : "John",age : 20 }
let userCopy = {...user}

延展操作運算子不執行深度複製。

3.延展操作運算符合並

let fruits = ['🍈','🍌'];
let vegetables = ['🍅','🍆','🥒'];
let fruitsAndVeg = [...fruits,...vegetables]

合併物件

合併物件時，如果已經存在某個鍵，則將其替換為具有相同鍵的最後一個物件。

let user1 = {name : "John",age : 20 };
let user2 = {name : "Ram",salary: '20K' };
let userCopy = {...user1,...user2};
userCopy ; // {name : "Ram",age :20,salary : '20K'};

4.延展操作運算子作為引數傳遞

function sum(a,b) {
 return a+b;
}
let num = [1,2];
sum(...num); // 3

與 math 函式一起使用

let num = [5,9,3,5,7];
Math.min(...num);
Math.max(...num);

5.延展操作運算子在解構變數中

let [melon,...fruits ] = ['🍉','🍌','🍊'];
melon; //🍉
fruits; // [ '🍋','🍊']

解構物件

let user = {name : "Ram",age: 20,salary: '20K',job : "Tester" };
let { name,age,...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K',job : 'Tester'};

6.將NodeList物件轉換為陣列

NodeList類似於陣列，但是沒有 Array 的所有方法，例如 forEach，map，filter 等。

let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]

7.將字串轉換為字元

字串也是可迭代的物件，因此我們也可以使用 ... 來字串。

let name = "Ram";
let chars = [...name]; // ["R","a","m"]

8.從陣列中刪除重複項

let num = [1,1,1];
let uniqueNum = [...new Set(num)];
uniqueNum; //[ 1,3 ]

總結

到此這篇關於JavaScript中使用Spread運算子的八種方法就介紹到這了,更多相關JavaScript使用Spread運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！