《深入理解ES6》之解构

Posted 2020-10-02

结构是一种打破数据解构，将其拆分为更小部分的过程。

对象解构

　　对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量。

let node={
    type:"indefine",
    name:"foo"
};
let{type,name}=node;

console.log(type);//indefine
console.log(type);//foo

解构赋值

　　可以在定义变量之后想要修改它们的值。

let node={
    type:"indefine",
    name:"foo"
},
type="literal",
name=5;
({type,name}=node);

console.log(type);//indefine
console.log(type);//foo

　　一定要用一对小括号包裹解构赋值语句，javascript引擎讲一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将快语句转化为一个表达式，从而实现整个解构赋值的过程。

默认值

　　当指定的属性不存在，这个局部变量会被赋值为undefined，也可以随意定义一个默认值，在属性名称后面添加一个等号和相应的默认值。

let node={
    type:"indefine",
    name:"foo"
}
let{type,name，value=true,age}=node;

console.log(type);//indefie
console.log(type);//foo
console.log(value);//true
console.log(age);//undefined

为非同名局部变量赋值

　　使用解构赋值来声明变量localType和localName，这两个变量分别包含node.type和node.name属性的值。

let node={
    type:"indefine",
    name:"foo"
}
let{type：localType,name:localName，age=4}=node;

console.log(localType);//indefie
console.log(localName);//foo
console.log(age);//4

嵌套对象解构

    let node={
        type:"indefine",
        name:"foo",
        loc:{
            start:{
                line:1,
                column:2
            },
            end:{
                line:1,
                column:4
            }
        }
    };
    let{loc:{start:localStart}}=node;

    console.log(localStart.line);//1
    console.log(localStart.column);//2
  

　　解构模式可以应用于任意层级深度的对象，且每一层都具有同等的功能。

数组解构

　　解构赋值，数组解构可以赋值上下文，但不需要用小括号包裹表达式。

let colors=["red","green","blue"],
    firstColor="black",
    secondColor="purple";
[firstColor,secondColor]=colors;
console.log(firstColor);//red

　　数组解构可以交换两个变量的值。

let a=1,b=2;
[a,b]=[b,a];
console.log(a);//2
console.log(b);//1

　　嵌套数组解构与嵌套对象解构的语法类似。

let colors=["red",["green","ligntgreen"],"blue"];
let [firstColor,[secondColor]]=colors;
console.log(firstColor);//red
console.log(secondColor);//green

　　可以讲不定元素应用到数组解构中。可以将数组中的其余元素赋值给一个特定的变量，也可以实现数组复制的功能。

let colors=["red","green","blue"];
let[firstColor,...restColor]=colors;

console.log(firstColor);//red
console.log(restColor[0]);//green

var fruits=["apple","bannan"];
[...cloneF]=fruits;
console.log(cloneF);//[apple,bannan]