ES6（二）解构赋值

目录

前言

一、解构赋值

原理：(以数组为例)

语法：

举个栗子~

现在来验证一下结果~

 二、数组解构赋值的常见类型

 基本类型

可嵌套类型

可忽略类型

不完全解构

剩余运算符

解构默认值

三、对象解构

原理：

语法：

举个栗子~

结果验证      

 四、对象解构第二种写法

原理：

语法：

举个栗子~

 结果验证   

五、对象解构赋值的常见类型

基本类型

可嵌套类型

忽略类型

不完全解构类型

剩余运算符类型

解构默认值

结束语

---

前言

      在ES5（也就是我们之前所学的javascript基础）中，在数组取值的时候我们如果要取全部（n个）值，就相对应的要声明n个变量，看以下代码：
     

 {let array = [1,2,3];console.log(array[0]);console.log(array[1]);console.log(array[2]);    //声明三次变量才可以取出来}

这样看起来是不是很！麻！烦！？能不能一条语句解决呢？于是，ES6给我们带来了“解构赋值”

一、解构赋值

原理：(以数组为例)

      数组解构允许我们按照一一对应的关系从数组中提取值，赋值给变量。

语法：

      let关键字＋[   ]（中括号：关键符号，代表解构，里面存放变量）= 数组（也可以是数组名）；

举个栗子~

let array = [1,2,3];  //一个数组
let [a,b,c] = array;//解构符号内声明三个变量，对应array数组中的三个值

 
要点注意！！一定要用let关键字！！

现在来验证一下结果~

 {let array = [1,2,3];  //一个数组let [a,b,c] = array;  //解构符号内声明三个变量，对应array数组中的三个值console.log(a);console.log(b);console.log(c);} 

 二、数组解构赋值的常见类型

 基本类型

     上面例子就是啦~

可嵌套类型

 let [a, [[b], c]] = [1, [[2], 3]];// a = 1// b = 2// c = 3

可忽略类型

      let [a, , b] = [1, 2, 3];// a = 1// b = 3

不完全解构

      let [a , b] = [1];// a = 1//b = undefined

剩余运算符

      let [a, ...b] = [1, 2, 3];//a = 1//b = [2, 3]

解构默认值

     let [a = 2] = [undefined]; // a = 2 其中2为默认值，只有当解构模式有匹配结果，//且匹配结果是 undefined 时，才会触发默认值作为返回结果

三、对象解构

原理：

      对象解构允许我们使用变量名匹配对象的属性，匹配成功，将把对象属性值赋值给变量。
      通俗理解：实际上就是对象的属性匹配，如果对象中的属性与解构符号中的
      变量名匹配，则将属性值赋值给变量，也是一一对应的关系。

语法：

      let关键字＋{变量名1}（大括号：关键符号，代表解构，里面存放变量）= {属性名1：属性值}（也可以是对象名）;

举个栗子~

     

let obj = {name: '凤求凰'，age: '未知', sex: '男'}；
//对象及对象中的三个属性
let {name, age, sex} = obj；
//三个解构变量与obj对象中的三个属性名一一匹配

要点注意！！一定要用let关键字！！

结果验证      

{let obj = {name: '凤求凰', age: '未知', sex: '男'};//对象及对象中的三个属性let {name, age, sex} = obj;//三个解构变量与obj对象中的三个属性名一一匹配console.log(name);console.log(age);console.log(sex);}

 四、对象解构第二种写法

原理：

      对象解构允许我们用书写对象属性的方式书写解构变量，其属性值就是变量名

语法：

      let关键字＋{属性名：变量名}= 对象{属性名：属性值}（也可以是对象名）

要注意！解构符号里的属性名一定要绝对匹配于对象中的属性名！！！！！！！

举个栗子~

 结果验证   

 {let obj = {name: '凤求凰', age: '未知', sex: '男'};let {name: MyName, age: MyAge, sex:TheSex} = obj;console.log(MyName);console.log(MyAge);console.log(TheSex);}

五、对象解构赋值的常见类型

基本类型

      上面例子就是~

可嵌套类型

      语法同基本类型相似，记住嵌套部分依旧用中括号，对象属性用大括号包裹
     

 {let obj = {name: ['凤求凰', {age: '未知', sex: '男'}]};let {name:[Myname, {age}, {sex}]} = obj;//Myname = 凤求凰//age = 未知//sex = 男}

忽略类型

     

 {let obj = {name: ['凤求凰', {age: '未知'}]};let {name:[Myname, { }]} = obj;//Myname = 凤求凰}

不完全解构类型

     

 {let obj = {name: ['凤求凰', {age: '未知'}]};let {name:[Myname, {age}, add]} = obj;//Myname = 凤求凰//age = 未知//add = undefined}

剩余运算符类型

     

 {let {name, ...ect} = {name: '凤求凰', age: '未知', sex: '男'};//Myname = 凤求凰//age: "未知",sex: "男"[[Prototype]]: Object}

解构默认值

     

 {let {name: Myname = '凤凰于飞', age :MyAge = 20''} = {name: '凤求凰'};//Myname = 凤求凰//MyAge = 20}

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤