腳本之家服務器常用軟件

快捷導航

JavaScript中展開運算符及應用的實例代碼

更新時間：2021年01月14日 17:03:46 作者：banana peel

這篇文章主要介紹了JavaScript中展開運算符及應用的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

展開運算符（spread operator）允許一個表達式在某處展開。展開運算符在多個參數(shù)（用于函數(shù)調(diào)用）或多個元素（用于數(shù)組字面量）或者多個變量（用于解構賦值）的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法實際相當于

obj2 = {value1: 1, value2: 2}

展開運算符的寫法與obj2 = obj1直接賦值的寫法的區(qū)別在于如果直接賦值的話，對于引用類型來說，相當于只是賦值了obj1的內(nèi)存空間地址，當obj2發(fā)生改變的時候，obj1也會隨著發(fā)生改變。而是用展開運算符寫法的話，由于obj1對象中的屬性類型都是基本類型，相當于重新創(chuàng)建了一個對象，此時obj2發(fā)生改變的時候，并不會影響obj1這個對象。但是僅限于其屬性都為基本類型的情況（或者說只進行了一層的深拷貝）。如果該對象中的屬性還有引用類型的話，修改屬性中引用類型的值，則兩個對象的屬性值都會被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

展開運算符的應用

1.在函數(shù)中使用展開運算符

function test(a, b, c){};

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

2.數(shù)組字面量中使用展開運算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解構賦值，解構賦值中展開運算符只能用在最后，否則會報錯。

// 解構賦值中展開運算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.類數(shù)組變成數(shù)組

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.對象中使用展開運算符
ES7中的對象展開運算符符可以讓我們更快捷地操作對象：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

將一個對象插入另外一個對象當中：

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并兩個對象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

到此這篇關于JavaScript中展開運算符及應用的實例代碼的文章就介紹到這了,更多相關js展開運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript中展開運算符及應用的實例代碼

展開運算符的應用

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具