常用的ES6新特性--解构赋值
栏目: JavaScript · 发布时间: 5年前
内容简介:由于var可以重复声明,而且无法限制修改,也没有块级作用域,在一些时候不是很合适,所以出现了let和const
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结构
- 输入模块的指定方法
以上所述就是小编给大家介绍的《常用的ES6新特性--解构赋值》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
科技投资新时代:TMT投资方法、趋势与热点聚焦
马军、宋辉、段迎晟 / 人民邮电出版社 / 2018-3 / 69.00
中国 TMT 行业(科技、媒体及通信)起步较晚但充满朝气。2017 年,TMT 板块的IPO 数量占到了总数的四分之一;对于投资者来说,投资 TMT 的收益非常可观。那么,TMT 的投资趋势如何? TMT 行业又有哪些投资热点? 本书立足于 TMT 投资现状,在介绍了 TMT 投资的基本概念之后,作者详细讲述了TMT 投资的基本研究方法、分析视角、整体行情及趋势分析,同时从行业视角分析了包括......一起来看看 《科技投资新时代:TMT投资方法、趋势与热点聚焦》 这本书的介绍吧!