ES6学习3章:变量的解构赋值
2017-12-15 11:04
609 查看
写在最前
变量解构的用途
# 交换变量的值 var x = 10, y = 1; [x, y] = [y, x] console.log(x,y) // 1,10 # 从函数返回多个值 function example(){ return [1,2,3] } var [a,b,c]=example(); # 函数参数的定义 function f({w,y,z}){...} f({x:3,y:4,z:1}) # 提取json数据 var jsonData = { id:42, status:'OK', data:[867,5309] } let {id,status,data:number}=jsonData; # 遍历Map结构
任何部署了Iterator接口的对象,都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便
一、数组的解构
1.1 基本用法
本质上,变量解析的写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。var [a,b,c]=[1,2,3] console.log(a) //1 let [head,...tail]=[1,2,3,4] console.log(tail) // [2,3,4] # 解构不完全时 let [x,y,...z]=['a'] x // "a" y // undefined z // [] # 解构不成功时 let [foo]=[] foo //undefined # 解构默认值 let [foo=1]=[2] foo // 2 # 解构默认值生效的条件是 等号右边的值 严格等于undefined let [foo = true] = [] console.log(foo) // true let [f1 = 1] = [undefined] console.log(f1) // 1 let [f2=2]=[null] console.log(f2) //null 默认值不生效 let [f3 = 3] = [''] console.log(f3) // '' 默认值不生效
只要某种数据具有Iterator接口,都可以采用数组形式的解构赋值
二、对象的解构赋值
1、基本用法
对象的解构需要相同的key才能对应赋值对象的解构赋值与数组的解构赋值不同。数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
对象的解构赋值内部机制,是先找到同名的属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者
# 基本使用 var {baz,foo}={foo:'aaa',bar:'bbb'}; foo // aaa baz // undefined # 赋值机制 var {foo:baz}={foo:'aaa'} baz // aaa
三、基本数据类型的解构赋值
原理:字符串被转换为一个类似数组的对象。在进行解构赋值时,如果“=”右侧不是对象或者数组,会先把其转为对象,再尝试解构# 字符串解构 const [a,b,c,d,e] = 'hello'; a // h # 数组和布尔值解构 let {toString:s}=123; // 数值有toString方法,所以能解构 s===Number.prototype.toString
undefined和null无法转为对象,所以对它们进行解构赋值,都会报错
四、函数参数的解构赋值
# 基本使用 function add([x, y]) { return x + y; } console.log(add([1, 3])) // 传入数组参数时,add函数会对参数对应解构 # 默认值 function add({x=0,y=0}={}){ return [x,y] } console.log(add({x:3,y:8}))
五、变量解构的用途
相关文章推荐
- es6学习之变量的解构赋值
- es6 学习笔记 之 变量声明 和 变量的 解构赋值
- ES6学习——变量的解构赋值
- ES6学习2(变量的解构赋值)
- ES6学习之变量的解构赋值
- es6学习篇之 let和const命令 、变量的解构赋值
- ES6变量解构赋值
- es6学习--变量解析赋值
- es6 变量的解构赋值
- react native 语法ECMAScript 6 学习笔记----变量的解构赋值
- ES6中变量的解构与赋值
- ES6:变量的解构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值
- ECMAScript 6 入门学习(2.变量的解构赋值)
- 【ES6】变量的解构赋值
- 【ES6】变量的解构赋值
- ES6—变量 解构赋值
- ES6(三: 变量的解构赋值)
- es6 变量的解构赋值
- ES6(二) Destructuring-变量的解构赋值