JavaScript中展開運(yùn)算符及應(yīng)用的實(shí)例代碼
展開運(yùn)算符（spread operator）允許一個(gè)表達(dá)式在某處展開。展開運(yùn)算符在多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或者多個(gè)變量（用于解構(gòu)賦值）的地方可以使用。
let obj1 = {
value1: 1,
value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}
上面的用法實(shí)際相當(dāng)于
obj2 = {value1: 1, value2: 2}
展開運(yùn)算符的寫法與obj2 = obj1直接賦值的寫法的區(qū)別在于如果直接賦值的話，對(duì)于引用類型來說，相當(dāng)于只是賦值了obj1的內(nèi)存空間地址，當(dāng)obj2發(fā)生改變的時(shí)候，obj1也會(huì)隨著發(fā)生改變。而是用展開運(yùn)算符寫法的話，由于obj1對(duì)象中的屬性類型都是基本類型，相當(dāng)于重新創(chuàng)建了一個(gè)對(duì)象，此時(shí)obj2發(fā)生改變的時(shí)候，并不會(huì)影響obj1這個(gè)對(duì)象。但是僅限于其屬性都為基本類型的情況（或者說只進(jìn)行了一層的深拷貝）。如果該對(duì)象中的屬性還有引用類型的話，修改屬性中引用類型的值，則兩個(gè)對(duì)象的屬性值都會(huì)被修改。
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);
展開運(yùn)算符的應(yīng)用
1.在函數(shù)中使用展開運(yùn)算符
function test(a, b, c){};
let arr = [1, 2, 3];
test(...arr);
2.數(shù)組字面量中使用展開運(yùn)算符
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.用于解構(gòu)賦值，解構(gòu)賦值中展開運(yùn)算符只能用在最后，否則會(huì)報(bào)錯(cuò)。
// 解構(gòu)賦值中展開運(yùn)算符只能用在最后。 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.對(duì)象中使用展開運(yùn)算符
ES7中的對(duì)象展開運(yùn)算符符可以讓我們更快捷地操作對(duì)象：
let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}
將一個(gè)對(duì)象插入另外一個(gè)對(duì)象當(dāng)中：
let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}
合并兩個(gè)對(duì)象:
let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}
到此這篇關(guān)于JavaScript中展開運(yùn)算符及應(yīng)用的實(shí)例代碼的文章就介紹到這了,更多相關(guān)js展開運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS數(shù)組進(jìn)階示例【數(shù)組的幾種函數(shù)用法】
這篇文章主要介紹了JS數(shù)組進(jìn)階,結(jié)合實(shí)例形式總結(jié)分析了數(shù)組的幾種常見函數(shù)基本用法,涉及JavaScript數(shù)組元素刪除、拼接、添加、倒序排列等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
javascript實(shí)現(xiàn)拍照功能詳細(xì)示例代碼
這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)拍照功能的相關(guān)資料, 最近做項(xiàng)目,遇到一個(gè)正常但又少見的需求之拍照,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
學(xué)習(xí)JSON.stringify的9大特性和轉(zhuǎn)換規(guī)則
本文介紹JSON.stringify9大特性和轉(zhuǎn)換規(guī)則,JSON.stringify()方法將一個(gè)JavaScript對(duì)象或值轉(zhuǎn)換為?JSON?字符串,如果指定了一個(gè)replacer?函數(shù),則可以選擇性地替換值,或者指定的replacer是數(shù)組,則可選擇性地僅包含數(shù)組指定的屬性,更多內(nèi)容需要的小火煸可以參考下面溫行內(nèi)容2022-02-02
element-ui的表單驗(yàn)證清除校驗(yàn)提示語(yǔ)的解決方案
對(duì)表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時(shí)候,其中有一項(xiàng)比較特殊,不是簡(jiǎn)單的輸入框,下拉框這些表單元素,而是自己寫的一個(gè)el-table的選擇彈窗,本文給大家介紹element-ui的表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ),感興趣的朋友一起看看吧2024-01-01
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對(duì)象提供了許多方法和屬性,可以通過它們來進(jìn)行日期的格式化,需要的朋友可以參考下2023-09-09
Javascript 各瀏覽器的 Javascript 效率對(duì)比
2008-01-01
刷新頁(yè)面實(shí)現(xiàn)方式總結(jié)(HTML,ASP,JS)
多種方法實(shí)現(xiàn)頁(yè)面的刷新代碼2008-11-11
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來，以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問題2011-10-10
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap fileinput文件上傳預(yù)覽插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05