1. 變量的解構賦值
1.1 直接解構賦值
-
一看就懂，代碼如下：
<script> console.log("=======1.數組的解構======="); const DOG_NAMES = ['麥兜','泡泡','貝塔']; let [mai,pao,bei] = DOG_NAMES; console.log(mai); //麥兜 console.log(pao); //泡泡 console.log(bei); //貝塔 console.log("\n\n\n\n=======2.對象的解構======="); const dog_1 = { dogName:'麥兜', dogAge:3, dogKind:'邊牧', dogSex:'女', dogPlayGames:function(){ console.log('狗狗超級愛玩球。。。。'); } } /** * a. 對象解構的時候，屬性名要和上面聲明的對象里的屬性名一致 * b. 即：相當于聲明了幾個變量，并對新聲明的變量進行了賦值 */ let {dogName,dogAge,dogPlayGames} = dog_1; console.log(dogName); console.log(dogAge); // dog_1.dogPlayGames(); dogPlayGames(); </script> -
效果如下：
1.2 解構賦值——修改屬性名
- 如下：
const dog_1 = { dogName:'麥兜', dogAge:3, dogKind:'邊牧', dogSex:'女' } let {dogName:dName,dogAge} = dog_1;//dogName 改成 dName console.log(dName);
1.3 連續(xù)解構賦值
-
如下：
const dog_1 = { dogName:'麥兜', dogAge:3, dogKind:{ kindId:'A1', kindName:'邊牧' } } // let {dogName:dName,dogAge} = dog_1; // let {dogKind} = dog_1; // console.log(dogKind); // console.log(dogKind.kindName); let {dogKind:{kindId:kId,kindName}} = dog_1; //連續(xù)解構賦值 console.log(kId); console.log(kindName);
2. 擴展運算符
2.1 簡介（官網）
- 什么是擴展運算符（…運算符）？
就是展開語法 (Spread syntax), 可以在函數調用/數組構造時，將數組表達式或者 string 在語法層面展開；還可以在構造字面量對象時，將對象表達式按 key-value 的方式展開。(譯者注: 字面量一般指 [1, 2, 3] 或者 {name: “mdn”} 這種簡潔的構造方式)。 - 參考官網：
官網-展開語法.
2.2 應用例子
2.2.1 簡單例子1
- 代碼如下：
<script> function sum_1(x,y,z){ console.log(arguments); return x + y + z; } const numbers = [1,2,3]; let result_1 = sum_1(...numbers);//等價于 let result_1 = sum_1(1,2,3); console.log('result_1--->'+result_1); </script> - 效果如下：
2.2.2 數組拷貝
- 代碼如下：
var arr_1 = ['麥兜','貝塔','泡泡']; var arr_2 = [...arr_1]; //數組拷貝 console.log(arr_2); arr_2.push('西瓜'); console.log(arr_2); - 效果如下：
- 需要注意的是：
- 擴展運算符拷貝的是，淺拷貝 (只遍歷一層)
- 再來個例子說明：
- 擴展運算符拷貝的是，淺拷貝 (只遍歷一層)
2.2.3 連接多個數組
- 函數寫法
let dogs = ['麥兜','貝塔','泡泡']; let cats = ['貓咪1','貓咪2']; let pets_1 = dogs.concat(cats); //使用函數 concat 連接 - 擴展運算符寫法
let pets_2 = [...dogs,...cats]; //使用擴展運算符連接 - 效果如下：
2.2.4 拷貝對象（多層和多維數組一樣）
-
代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-705848.html
console.log('\n\n\n\n=============拷貝對象==========='); let user_1 = {name:'小花',age:18}; let user_2 = {...user_1}; user_2.name = '小明'; console.log(user_1); console.log(user_2); console.log('\n\n\n\n=============拷貝對象多層==========='); let pserson_1 = { name:'小花', age:18, schoolInfo:{ schoolId:1001, schoolName:'XXX第一高級中學' } } let person_2 = {...pserson_1}; person_2.name = '小剛'; person_2.schoolInfo.schoolName = '第二中學'; console.log(pserson_1); console.log(person_2); -
效果如下：
文章來源地址http://www.zghlxwxcb.cn/news/detail-705848.html
2.2.5 合并對象
- 第一種寫法：
let school_1 = {name:'北京大學',address:'北京'}; let school_2 = {...school_1,name:'清華大學',createDate:'1911'}; //在copy時，修改屬性以及添加屬性
- 第二種寫法：
var obj1 = { foo: "bar", x: 42 }; var obj2 = { foo: "baz", y: 13 }; var mergedObj = { ...obj1, ...obj2 }; // 合并后的對象：{ foo: "baz", x: 42, y: 13 }
2.2.6 關于展開對象（jsx）
- 單獨使用原生 js 的話，對象是不能通過擴展運算符進行展開的。
- 可以通過
jsx（babel）來展開：- 代碼如下：
<script type="text/babel"> //1. 創(chuàng)建組件 class DogComponent extends React.Component{ render(){ const {dogName,dogAge,dogKind,dogDesc} = this.props;//對象的解構賦值 return( <ul> <li>姓名：{dogName}</li> <li>年齡：{dogAge}</li> <li>種類：{dogKind}</li> <li>備注：{dogDesc}</li> <li>備注-2：{this.props.dogDesc}</li> </ul> ) } } //2. 定義對象 const dog ={ dogName:'麥兜', dogAge:3, dogKind:'邊牧', dogDesc:'溫柔、撒嬌、粘人、偶爾調皮～' } //3. 渲染組件到頁面 ReactDOM.render(<DogComponent {...dog}/>,document.getElementById('dog')); </script> - 效果如下：
- 代碼如下：
到了這里，關于ES6之 變量的解構賦值 ? 擴展運算符(…)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
