ES6标准学习: 2、解构赋值

解构赋值

1、基本使用方法

es6允许按照一定的方式,从数组和对象中提取值,从而对变量进行赋值,这种模式被称为解构。

以前,我们为一个变量赋值,通常这么写:

1 var a = 1
2 var b = 2
3 var c = 3 

而在es6中,我们可以这么写:

1 var [a, b, c] = [1, 2 , 3] 

上面的代码表示,我们可以从数组中提取值,并按照位置的对应关系对变量进行赋值。

嵌套的解构赋值也是允许的:

1 let [a, [[b], c]] = [1, [[2], 3]]

某些位置没有需要被赋值的变量也是允许的:

1 let [, , c] = [1, 2, 3]
2 // c = 3

如果解构不成功,变量的值就等于undefined:

1 var [value] = []
2 var [a, b] = [1]
3
4 // value,b 都是undefined

还有一种情况是不完全解构,即等号左边的模式值等于等号右边的模式的一部分,这中情况下,解构也是可以成功的:

1 let [x, y] = [1, 2, 3]
2 // x = 1
3 // y = 2

注意:如果等号右边的不是可以遍历的结构,那么将会报错

// 报错
let [vaule] = 1
let [vaule] = false
let [vaule] = NaN
let [vaule] = undefined
let [vaule] = null
let [vaule] = {}

2、默认值

解构赋值允许制定默认值

1 var [value = true] = []  // value = true
2 var [x, y = ‘b‘]  = [‘a‘] // x= ‘a‘ y =‘b‘
3 var [x, y = ‘b‘]  = [‘a‘, undefined]  // x = ‘a‘ y = ‘b‘

这里解释一下最后一行,es6内部使用 === 判断一个位置是否优质,所以,如果一个可遍历解结构的成员不严格等于undefined,默认值是不会生效的:

1 var [x = 1] = [undefined] // x = 1
2 var [x = 1] = [null]  // x = null

因为null不严格等于undefined,所以第二行的x = null

默认值可以引用解构赋值的其他变量,但该变量必须已经声明

1 let [x = 1, y = x] = [] // x = 1, y = 1
2
3 let [x = 1, y = x] = [2] // x = 2, y = 2
4
5 let [x = 1, y = x] = [1, 2] // x = 1, y = 2
6
7 let [x = y, y = 1] = []  // ReferenceError

3、对象的解构赋值

解构不仅可以用于数组,还可以用于对象

1 var {a, b} = {a: 1, b: 2}
2 // a: 1
3 // b : 2

对象解构与数组的解构有一个很大的区别在于:数组的元素是有顺序的,变量的取值由它的位置所决定,而对象的属性没有次序,变量必须与对象的属性同名,才能被正确的赋值:

1 var {c} = {a: 1, b: 2}
2 // c: undefined

如果真的需要变量名与属性名不一致,那么必须像下面这样写:

1 var {a: value} = {a: 1}
2 // value  = 1
3
4 let obj = {first: 1, last: 2}
5 let {f: first, l: last} = obj
6 // f : 1
7 // l : 2

从以上的代码中,我们其实可以看出来,对象的解构赋值,其实是下面这种形式的缩写:

var {first: first, last: last} = {first: 1, last: 2}

也就是说,对象的解构赋值,是先找到同名的属性,然后在赋值给对应的变量,真正被赋值的是后者,而不是前者。

采用这种写法时,变量的声明和赋值是一体。对于let和consteryan ,变量不能重新生命,所以一旦赋值的变量以前声明过,就会报错:

1 let first
2 let {first} = {first: 1} // SyntaxError: Duplicate declaration ‘first‘

和数组一样,解构也可以用于嵌套结构的对象

 1 var obj = {
 2   p: [
 3     ‘hello‘,
 4     {y: ‘helloy‘}
 5   ]
 6 }
 7
 8 var { p: [x, {y}] } = obj
 9 // x = ‘hello‘
10 // y = ‘helloy‘

对象的解构也可以指定默认值,默认生效的条件是:对象的属性值严格等于undefined。并且如果解构失败,那么变量的值就等于undefined

注意:如果解构模式是嵌套的对象,而且子对象所在的福属性不存在,会报错:

1 var {foo: {bar}} = {baz: ‘baz‘}

在上面的代码中,等号左边对象的foo属性对应于一个子对象。该子对象的bar属性解构时会报错。因为foo这时等于undefined,再取自子属性就报错

如果讲一个已经声明的变量用于解构赋值,需要注意写法:

// 错误的写法
var x
{x}  = {x: 1} // SyntaxError: syntax error

为什么上面代码会报错?

因为js的引擎会将{x}理解成一个代码块,从而发生了语法错误。 只有不将大括号写在行首,才能避免js引擎将其解释为代码块。

// 正确的写法
({x} = {x: 1})

4、字符串、数值和布尔值的解构赋值

1、字符串也可以解构赋值,此时字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = ‘hello‘
// a: h
// b: e
// c: l
// d: l
// e: o

2、解构赋值时,如果等号右边的时数值或者布尔值,则会先转换为对象

1 let {toString: s} = 123
2 s === Number.prototype.toString // true


5、函数参数的解构赋值

1、基本使用

1 function add ([x, y]) {
2   return x + y
3 }
4
5 add([1, 2]) // 3

在上面的代码中,函数add的参数其实并不是一个数组,而是通过解构得到的变量x, y

2、函数参数解构的默认值

函数参数的解构也可以使用默认值:

1 function move ({x = 0, y = 0} = {}) {
2   return [x, y]
3 }
4
5 move({x: 1, y: 1}) // [1, 1]
6 move({x: 3}) // [3, 0]
7 move({}) // [0, 0]
8 move() // [0 ,0]

在上面的代码中,函数move的参数是一个对象,通过对这个对象的解构赋值,得到变量x与y的值,如果解构失败,x, y为默认值

这里还有另一种写法,可以与上面的写法比较一下,看看有什么不同:

1 function move({x, y} = {x: 0, y: 0}) {
2   return [x, y]
3 }
4
5 move({x: 1, y: 1}) // [1, 1]
6 move({x: 1})  // [1, 0]
7 move({}) // [undefined, undefined]
8 move() // [0, 0]

这种写法,其实是为函数move的参数指定默认值,而不是为x ,y 变量指定默认值,所以两种写法的结果并不相同。

6、用途

解构赋值有哪些用途呢?

1、交换变量的值

[x, y] = [y, x]

2、从函数返回多个值

1 function example() {
2   return [1 ,2, 3]
3 }
4 var [a, b, c] = example()

3、函数参数的定义

 1 function fn([x, y, z]) {
 2   //...
 3 }
 4 fn([1, 2, 3])
 5
 6
 7 function fn({x, y, z}) {
 8   //...
 9 }
10 fn({z: 3, x: 1, y: 2})

4、提取json数据

1 var json = {
2   ‘id‘: ‘42‘,
3   ‘status‘: ‘ok‘,
4   ‘data‘: [1, 2]
5 }
6 let {id, status, data} = json

5、指定函数参数的默认值

以上就是对解构赋值的大概介绍,如果有什么问题,还请读者指出批评。

参考书籍: 《ES6标准入门--阮一峰》

时间: 2024-10-20 10:38:15

ES6标准学习: 2、解构赋值的相关文章

学习es6之(变量的解构赋值)

数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6可以写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值,下面是一些使用嵌套数组进行解构的例子. let [foo, [[

ES6新特性:解构赋值(上)

1:什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是解构赋值? 来看看官方的解释: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 这句话也不难理解,但是前端君怎么会这么敷衍了事,随便贴一段官方的文字解释就算呢. 来,我们来上一段代码进一步解释一下什么叫解构赋值. 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值分别赋给下面的变量: var a = arr[0]; var b = a

es6分享——变量的解构赋值

变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法: let [a,b] = [1,2]; 一般用途: 1.交换变量的值 [x,y] = [y,x]; 2.函数返回多个值 function f1() { return [1,2,3]; } var [a,b,c] = f1(); // 返回json对象: function f1() { return

ES6:变量的解构赋值

1.数组的解构赋值 基本用法: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).  以前,为变量赋值,只能直接指定值. var a = 1; var b = 2; var c = 3; ES6允许这样写: var [a,b,c] = [1,2,3]; console.log(a); //1 console.log(b); //2 console.log(c); //3 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,

ES6 之 数组的解构赋值

数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1;let b = 2;let c = 3; ES6允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子

ES6(二)解构赋值+字符串的扩展

详解一下之前的解构赋值 ①解构赋值中的"..." let [a,...b]= [1]; b // [] ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[] //注意:"...b"只能放在最后 ②解构赋值的等号两边的数据类型必须一样 即: let [] = [] 或者 let {} = {} 但是:Set结构也允许使用数组进行解构赋值 let [a,b]= new Set([1,2,3,4]) a //1 b //2 技巧: 如果你不确定该结构是否

ES6 函数参数的解构赋值

function add([x, y]){ return x + y; } add([1, 2]); // 3 原文地址:https://www.cnblogs.com/nongzihong/p/10678522.html

解构赋值 —— ES6新语法学习心得

## 3.解构赋值 ## 作用:将数组.对象.函数的参数 解构,对变量进行赋值,可以直接调用该变量,大大提高效率 ## 例 1: ##  标准模式的解构赋值 var [a,b,c]=[1,2,3] console.log(a) //1 console.log(b) //2 console.log(c) //3 ## 例2 : ##  嵌套解构赋值,只要"模式匹配",就能解构赋值,如果没有对应的值,就是undefined let [foo, [[bar], baz]] = [1, [[2

ES6 之 解构赋值

本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. ES6 以前,为变量赋值,只能直接指定值. let a = 1 let b = 2 let c = 3 ES6 允许写成下面的样式. let [a, b, c] = [1, 2, 3] 该代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 相关示例 本质上来说,这种写法属于“模式匹配”.即

es6(es2015)解构赋值

?es6新增结构赋值,结构赋值分为两种 数组解构赋值,对象解构赋值. 数组解构赋值: 分别按顺序给数组中的每一项赋值.  如上所示如果c未给赋值,c为undefind. a==1,b==2 那么3并没有被保存到变量中,这时如果想要将剩余值进行保存,可以只用“...” ...c 这样的形式,可以将剩余值以数组的形式将其保存到变量c中. 另外...可用于复制数组 实际项目中有时候我们需要将函数中的实际参数放到一个数组中, es5:Array.prototype.slice.call(argument