第2章 变量的解构赋值

基本用法

es6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构。
以前,为变量赋值只能直接将值指定给变量。

let a = 5;
const b = 10;
var c = 15

而es6允许写成这样:

let [a,b,c] = [5, 10, 15]
// 这句代码表示,可以从数组中根据对应的数组位置(下标)取到对应的值,并赋值给对应的变量

本质上,这种写法属于『模式匹配』,只要等号两边的模式相同,左边的变量就会被赋予对应的值,比如下面这种情况:

let [a, [[b],c] ] = [1, [[2], 3]]
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3

解构赋值可以设置默认值,如果解构不成功,返回的值为undefined

let [ a = true,b, ...c ] = [] 
console.log(a) // true ,这样也是可以获取到值的
console.log(b) // undefined
console.log(c) // []

es6内部使用严格相等运算符(===)来判断一个位置是否有值。所以如果数组内的值不严格等于undefined,那么默认值是不会生效的。

let [a = 1, b = 2]  = [null, undefined]
console.log(a) // null
console.log(b) // 2

默认值可以引用解构赋值的其他变量,前提是该变量必须已经先声明。

let [a = 1, b = a] = []
console.log(b) // 1
let [x = 1 , b = a] = [2]
console.log(b) // 2
let [x = b , b = 1] = []
console.log(x) // 报错,因为b还未声明

对象的解构赋值

解构赋值不仅可以对数组赋值,还可以对对象进行赋值,不过与数组赋值不同的是,对对象进行解构赋值,对应的不再是变量所处的位置,而是与对象中属性名相同的变量才能进行赋值。而且,与数组不同的是,真正被赋值的是后者,而不是前者

let {a: x, b: y} = {a:2, b: 5}
console.log(x, y) // 2,5
 console.log(a, b) // 报错,a、b为undefined

对象赋值也可以嵌套赋值

let  obj =  { p: [ 'hello', { y: 'world'}]}
let {p: [x, { y } ]} = obj
console.log(y) // world
// 此处的p是模式,不会被赋值,要想p也被赋值,可以写成以下这种形式
let {p, p: [x, { y } ]} = obj
console.log(p)  // [ 'hello', { y: 'world'}]

解构赋值右边的内容只要不是对象或数组形式的数据,都会先被转换成对象形式,null和undefined不能被转换成对象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 969评论 0 0
  • 本文通过学习阮一峰的博客,外加自己的理解,整理了一下我对js变量的解构赋值的理解。 数组的解构赋值 对象的解构赋值...
    宋乐怡阅读 640评论 0 2
  • 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destru...
    呼呼哥阅读 492评论 0 3
  • 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destru...
    陈老板_阅读 455评论 0 0
  • 刚才去医院洗了牙,牙垢太多以至都成了结石,洗牙前我单纯的从字面理解就是把牙洗干净些,可是,当大夫拿起了器具洗的一刻...
    风云涌阅读 152评论 0 2

友情链接更多精彩内容