码迷,mamicode.com
首页 > 其他好文 > 详细

《深入理解ES6》之解构

时间:2017-08-09 16:49:21      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:转化   clone   code   style   bsp   first   pre   实现   属性   

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

对象解构

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

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]

 

《深入理解ES6》之解构

标签:转化   clone   code   style   bsp   first   pre   实现   属性   

原文地址:http://www.cnblogs.com/jiaxiaonuo/p/7325950.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!