ES6解构赋值详解：从基础到复杂应用

1.解构初了解

解构是ES6引入的新语法特性，可视为一种

具备结构赋值功能的语法。

解构通常分为数组解构和对象解构两种。

解构具有哪些优点？为何要使用它。

ok，让我们通过一个示例来展示解构的优势。

定义一个返回包含3个数字数组的函数，使用a、b、c接收。

1.使用常规语法

function foo(){
            return [1,2,3]
        }
var temp=foo(),
a=temp[0],b=temp[1],c=temp[2]
console.log(a,b,c)

构造函数手动赋值，利用临时变量temp将值传递给a、b、c。

2.使用解构方法

  function foo(){
      return [1,2,3]
      }
   var [a,b,c]=foo()
  console.log(a,b,c)

输出结果一致，均输出（1，2，3）。

所以你会如何选择。

2.解构详细解析

2.1对象属性赋值形式

相较于我们熟悉的=a赋值形式，

解构语法翻转了这种形式，左侧变量作为“模式”

用于将右侧数组赋值给左侧变量。

接着讨论，在{a,b,c}中，这其实是{a:a,b:b,c:c}的简写。

那么在赋值时，省略的是a:还是:a？

在此我们需要了解对象属性赋值形式。

function foo(){
      return {a:4,b:5,c:6}
    }
var { a:aitem,b:bitem,c:citem }=foo()
     
 console.log(aitem,bitem,citem)
 
 var x=10,y=20
 var o={d:x,e:y}
 console.log(o.d,o.e)

现在我们应该大致明白了吧，

用一张图来解释。

2.2变量的声明

在前文中我们看到了使用var声明变量，其实也可以使用let、const声明。

也可以通过IIFE形式赋值，例如({x,y,z}=bar())。

好的，关于变量，它只能被设置为变量标识符吗？

这种想法是错误的，任何合法的赋值表达式都可以。

用两个例子来解析。

2.3怎么解构

记住一个原则：对称解构。

1.解构的过多

如何理解？即左右赋值不对称，并非所有值都用于解构，

多余的值会被设置为undefined。

2.解构的过少

右侧“变量”多余左侧变量。

3.解构正好

左右变量相等。

数组的解构按顺序排列，变量的取值由其位置决定。

对象的解构中，对象属性无次序，变量必须与属性同名才能取到正确值。对象解构赋值的内部机制是先找到同名属性，再赋给对应变量。真正被赋值的是后者，而非前者。

3.实践

3.1数组的解构

var a1=[1,[2,3,[4]],5]
var [a,[b,c,[d]],e]=a1
console.log(a,b,c,d,e)

输出1，2，3，4，5。

此处采用重复解构形式，解构过程从内向外依次进行。

3.2对象的解构

var  o1={a:{b:{c:6}}}
var {a:{b:{c:w}}}=o1
console.log(w)

输出6。

3.3解构参数

 function foo({x,y}){
        console.log(x.y)
    }
console.log(3,4)

输出3，4。若执行console.log(3)会报错，但x的值已解构。

3.4复杂解构

let wangfei = {
name: "王菲",
   age: 18,
  songs: ["红豆", "流年", "暧昧", "传奇"],
  history: [{ name: "窦唯" }, { name: "李亚鹏" }, { name: "谢霆锋" }],
};
 
let {
   songs: [one, two, three],
  history: [first, second, third],
} = wangfei;
console.log(one, two, three,first, second, third)

4.总结

1.了解解构的含义及优点。

2.学会对象属性赋值的形式。

3.了解了一些解构技巧。

4.通过几个例子动手实践。

到此这篇关于ES6新语法之解构的文章介绍完毕，更多相关ES6新语法解构内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！