解构赋值

·  阅读 37
解构赋值

解构赋值

前言

在ES5中,在数组取值的时候我们如果要取全部(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
        }
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改