常用的ES6新特性--解构赋值

0x584a 发布于2019-08-26 13:31 / 945人阅读

摘要：因为先把解构赋给，把值赋给，所以，都为对象的解构赋值数组的解构和对象的解构有一个不同，数组的元素按次序排列，变量的取值由其位置决定而对象的属性没有次数，变量必需和属性同名，才能取得正确的值。

let和const

由于var可以重复声明，而且无法限制修改，也没有块级作用域，在一些时候不是很合适，所以出现了let和const

let：不能重复声明，可以修改，有块级作用域，适合for循环等一些场景

const：不能重复声明，有块级作用域，不可以修改，比较适合做全局

变量的结构赋值

数组的解构赋值

</>复制代码 
let [a,b,c] = [1,2,3]
let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3
let [x,y,...z] =["a"];//x="a",y=undefined,z=[]  结构不成功变量的值就为undefined

不完全解构

</>复制代码 
let [a,[b],c] = [1,[2,3],4];//a=1,b=2,c=4

对于set结构,可以使用数组的解构数组

</>复制代码 
let [x,y,z] = new Set(["a","b","c"]);//a=a,y=b,z=c

主要数据结构具有Iterator接口，都可以采用数组形式的解构赋值，如下斐波那契数列的例子，利用generator函数

</>复制代码 
function* fibs(){
    let a = 0 ;
    let b = 1;
    while(true){
        yield a;//利用yield返回中间值
        [a,b] = [b,a+b];
    }
}
let [first,second,third,fourth,fifth,sixth] = fibs();
//first=0,second=1,third=1,fourth=2,fifth=3,sixth=5

默认值

解构赋值允许指定默认值,es6内部使用严格相等运算符===判断一个位置是否有值，所以只有当一个数组成员严格等于undefined，默认值才会生效;默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

</>复制代码 
let [x,y="b"] = ["a"];//x="a",y="b"
let [x=1] = [undefined];//x=1
let [x=1] = [null];//x=null
let [x=1,y=x] = [2];//x=2,y=2   因为先把2解构赋给x，x把值赋给y，所以x，y都为2
let [x=1,y=x]=[1,2];//x=1,y=2

对象的解构赋值

数组的解构和对象的解构有一个不同，数组的元素按次序排列，变量的取值由其位置决定；而对象的属性没有次数，变量必需和属性同名，才能取得正确的值。

</>复制代码 
let {foo:foo,bar:bar} = {foo:"qqq",bar:"www"}//foo=qqq,bar=www
//嵌套解构
let obj = {p:["hello",{y:"world"}]};
let {p:[x,{y}]} = obj//x=hello,y=world  此时p作为模式不会被赋值
let {p,p:[x,{y}]} = obj//p=["hello",{y:"world"}]  此时P作为变量赋值

以下实例进行了三次解构，分别是对loc,start,line三个属性，但是最后解构赋值时，只有line是属性，start和loc都是模式,而不是变量

</>复制代码 
const node = {
    loc:{
        start:{
            line:1,
            column:5
        }
    }
};
//第一个参数是对loc进行解构，得到loc = { start: { line: 1, column: 5 } }
//第二个参数对start进行解构，得到start = { line: 1, column: 5 }
//第三个参数对line进行解构，得到 line = 1
let{ loc,loc:{start},loc:{start:{line}}} = node;
console.log(loc);//{ start: { line: 1, column: 5 } }
console.log(start);    //{ line: 1, column: 5 }
console.log(line);//1

嵌套赋值

</>复制代码 
let obj = {};
let arr = [];
({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true});
console.log(obj);//{prop:123}
console.log(arr);//[true]

对象的默认值,和数组的默认值相似

</>复制代码 
var {x:y=3}={x:5}//y=5
var {x=3} = {x:undefined}//x=3
var {x=3} = {x:null}//x=null
var {foo} = {bar:"bz}//foo=undefined解构失败变量的值等于undefined

一些错误写法：

</>复制代码 
let _tmp = {baz :"bz"};
_tmp.foo.baz;//报错，因为foo已经是undefined，再取子属性会报错
let x；
{x} = {x:1};//会报错，因为JavaScript引擎会把{x}解释成代码块，只有避免将大括号写在行首，避免将其解释成代码块，才能避免报错
let x;
({x} = {x:1});//正确写法

字符串的解构赋值

</>复制代码 
const [a,b,c,d,e] = "hello"//a="h",b="e",....
let {length:len}="hello"//len=5

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，会先转为对象；而undefined和null无法转为对象，所以对它们解构赋值会报错

</>复制代码 
let {toString:s} = 123;
console.log(s === Number.prototype.toString);//true
let {toString:s} = true;
console.log(s === Boolean.prototype.toString);//true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数的解构赋值

</>复制代码 
[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

函数参数的解构可以使用默认值，但是不同的写法会有区别，有如下两种情况，一种是为函数的参数指定默认值，一种是为变量指定默认值

变量的默认值

函数test的参数是一个对象，通过对对象的解构，得到参数x,y，解构失败，参数为默认值

</>复制代码 
function test({x=0,y=0} ={}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[2,0]
console.log(test({}));//[0,0]
console.log(test());//[0,0]

函数参数的默认值，下面是为函数的参数指定默认值

</>复制代码 
function test({x,y} = {x:0,y:0}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[ 2, undefined ]
console.log(test({}));//[ undefined, undefined ]
console.log(test());[0,0]

变量解构赋值的用途

交换变量的值

从函数返回多个值

函数参数的定义

提取JSON数据

函数参数的默认值

遍历Map结构

输入模块的指定方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108968.html

ES6常用新特性——读《Understanding ECMAScript 6》总结

摘要：对象解构对象解构语法在赋值语句的左侧使用了对象字面量，例如代码中，的值被存储到本地变量中，的值则存储到变量中。当使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为。现在ES6在很多项目中大量使用。最近我也花时间看了一下《Understanding ECMAScript6》的中文电子书。在这里总结了一些在实际开发中常用的新特性。块级作用域在ES6...

jsliang 2019-08-21 11:50 评论0 收藏0
ES6 常用新特性讲解

摘要：一共讲解了个常用的新特性，讲解过程也是由浅入深。最后一个新增的方法主要是为了弥补当做构造函数使用时产生的怪异结果。特性共享父级对象共享父级不能当做构造函数语法最简表达式前后对比很容易理解，可以明显看出箭头函数极大地减少了代码量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司组织了 ES6 新特性的分享会...

荆兆峰 2019-08-20 18:06 评论0 收藏0
工作中常用es6+特性

摘要：结合工作中使用情况，简单对进行一些复习总结，包括常用的语法，等，以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别，主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下，是一个标准化组织，他们结合工作中使用情况，简单对es6进行一些复习总结，包括常用的语法，api等，以及短时间内要上手需要重点学习的知识点（不同工作环境可能有一些差别），...

xcold 2019-08-23 18:39 评论0 收藏0
ES6-解构

摘要：对象和数组是中常用的数据解构，由于的普及，二者已经成为语言中特别重要的一个部分。解构是一种打破数据结构，将其拆分成更小部分的过程。数组解构数组解构和对象解构非常相似，只是将对象替换成数组。例这种解构对从配置中抽取数据来说尤为有用。对象和数组是js中常用的数据解构，由于JSON的普及，二者已经成为语言中特别重要的一个部分。ES6中添加了可以简化解析这种解构的新特性：解构。解构是一种打破...

import. 2019-08-22 17:03 评论0 收藏0
ES6解构赋值运算符

摘要：本次我领到的任务是在中有一个解构赋值运算符，可以大大方便数据字段的获取。解构赋值运算符配合会比较有用。本次我领到的任务是：在ES6中有一个解构赋值运算符，可以大大方便数据字段的获取。比如 const [a, b] = [1, 2, 3]; const {name, age} = {name: helijia, age: 3}; 上面的语句是我们常用的，可是你能解释为什么下面的...

qpal 2019-08-21 17:58 评论0 收藏0