解构赋值es6

什么是解构赋值 

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

前言

什么是解构赋值 

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

一、传统变量赋值

二、解构赋值

解开结构

相较于常规的赋值方式,结构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构，解构顾名思义就是:解开结构

语法

完全结构

数组

对象

按顺序： let {name,sex} = {name:"fanfusuzi",sex:"man"}; console.log(name,sex);
打乱顺序: let {sex,name} = {name:"fanfusuzi",sex:"man"}; console.log(sex,name);
不存在的属性名： let {name,age} = {name:"fanfusuzi",sex:"man"}; console.log(name,age); 

嵌套结构 

数组

对象

const obj={
    man:{
      student:{
           name:'ning',
           age:18
        }
   }
}
 
let {man:{student}} = obj 
console.log(man,student) 
let {man:{student:{name}}} = obj 
console.log(name)
 
如何同时拿到嵌套的每层的数据
let {man,man:{studengt},man:{student:{name}}} = obj
console.log(man,student,name) //{student:{name:'ning',age:18}},{name:'ning',age:18},18

字符串结构 

默认值

如果数组比左边的变量列表短，这里也不会出现报错。缺少的值被认为是 undefined

如果我们想要一个“默认”值给未赋值的变量，我们可以使用 = 来提供

对象 options 的所有属性，除了 extra 属性在等号左侧不存在，都被赋值给了对应的变量：

总结

• 解构赋值可以立即将一个对象或数组映射到多个变量上。

• 解构对象的完整语法：

  let {prop : varName = default, ...rest} = object
  1
  表示属性 prop 会被赋值给变量 varName，如果没有这个属性，就会使用默认值 default。

  没有对应映射的对象属性会被复制到 rest 对象。

• 解构数组的完整语法：

  let [item1 = default, item2, ...rest] = array
  1
  数组的第一个元素被赋值给 item1，第二个元素被赋值给 item2，剩下的所有元素被复制到另一个数组 rest。

  从嵌套数组/对象中提取数据也可以，此时等号左侧必须和等号右侧结构相同。