ES6之解构赋值

前言

        首先要明白这是es6的新语法特性：我认为这是为了赋值更加的简介方便：解剖一下解构赋值的概念：按照一定的模式从数组和对象中提取需要的值，然后对变量进行赋值。原始的赋值是这样的：为变量赋值只能直接指定值。    

let a=11;
 let b="迪丽热巴"

     现在我们可以这样：

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

1：数组的解构赋值

  1：按照一一对应解构

let   [name,age,height]=["迪丽热巴"，50, 168]
   console.log(age)   //  50

    2: 部分不结构

let  [ , , , only , ]=[1,2,3,4,5]
        console.log(only)   //  4

3: 使用剩余参数

 let [one,two,...last]=[1,2,3,4,5,6,7,8]
    console.log(last)   // [3, 4, 5, 6, 7, 8]  注意，这里解构出来是一个数组

2：对象的解构赋值

        与数组解构有一个很大的不同点：数组的元素是按次序排列的，变量的取值由它的位置决定，但是对象并没有顺序的概念，所以变量必须与属性名一样才能够正确从对象中解构出来。

1:正常解构

 let {name,newlists}={   name:"迪丽热巴",
                            age:44,
                            height:188,
                            newlists:["你好","世界","我来了"]  }
            console.log(name)    // 迪丽热巴
            console.log(newlists) // ['你好', '世界', '我来了']

2：不正常解构（对象中没有对象的属性，返回undefined）

3：解构出来，改变变量名字（想改变就使用吧）

let obj={name:"迪丽热巴",
                 age:44,
                 height:188,
                 newlists:["你好","世界","我来了"] 
                 }

let {name:changName,newlists:changeNewlists}=obj
console.log("解构出来换个变量名字",changName)  //   解构出来换个变量名字 迪丽热巴
console.log(changeNewlists) //  ['你好', '世界', '我来了']

 

3,字符串的解构赋值

1： 字符串本质是一个类似数组的对象，是不可变的。可以参考数组的解构

let [name,...last]="迪丽热巴"
console.log(name) // 迪
console.log(last)  //  ['丽', '热', '巴']   注意：这里解构出来的数组。
   可以使用join（）将数组转为字符串

2：也可以对length属性解构

let name="我是哈哈哈哈"
let {length：len}=name    //注意这里的语法不是[],而是{}
console.log(length) // 6

解构赋值的使用场景（重点）

1：解构函数返回值

函数只能返回一个值，如果需要返回多个值，只能把他们放在数组或者对象当中。

     返回数组

function example(){
    return [1,2,3]
}
 let [a,b,c]=example()
 console.log(a,b,c)   // 1  2  3

        返回对象

function example(){
    return {name:"迪丽热巴",age:78}
}

let {name,age}=example()
  
console.log(name,age)  //  迪丽热巴 78

2：解构JSON（经常使用）

let jsonData={
    id:11,
    status:false,
    data:["123","12344"]
}

let {status,data}=jsonData
console.log(status,data)   //false    ['123', '12344']

3：输入模块的指定方法

加载模块的时候，往往需要指定输入的方法，解构赋值使得输入语句非常清晰。

const {sourceMapConsumer,souerceNode}=require("soursce-map")