美文网首页
ES6-解构赋值

ES6-解构赋值

作者: 清风昙 | 来源:发表于2022-03-06 00:12 被阅读0次

ES6为对象和数组提供了解构功能,允许按照一定模式从对象和数组中提取值,并对变量进行赋值。

  • 对象解构
    对象解构的语法形式是在一个赋值操作符的左边放置一个对象字面量。
let obj = {
  title: 'es6 学习',
   price: 100
}
let {title, price} = obj
console.log(title)  // es6学习

如果使用var、let、const声明变量,必须提供初始化程序,即等号右侧必须提供值。如下代码会报错:

var {title, price}
console.log(title)

如果变量之前已经声明,后续想用解构赋值,则需用圆括号包裹整个解构赋值语句。如:

let obj = {
  title: 'es6 学习',
  price: 100
}
let title, price
{title, price} = obj  // 语法错误
({title, price}) = obj // 正确

使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,则这局部变量会被赋值为undefined,可以为该变量定义一个默认值,在变量名称后面添加一个等号(=)和相应的默认值即可。如:

let obj = {
  title: 'es6 学习',
  price: 100
}
let {title, price, value = 0} = obj
console.log(value)  // 0

使用解构赋值时,使用与对象属性名不同的局部变量名,可以采用“属性名:局部变量名”的语法形式。如:

let obj = {
  title: 'es6 学习',
  price: 100
}
let {title: bookTitle, price: bookPrice} = obj
console.log(bookTitle) // es6 学习

title: bookTitle语法含义:读取名为title的属性并将其值存储到变量bookTitle中。注意变量的名称在冒号(:)右侧,而左边是要读取的对象的属性名。

  • 数组解构
    与对象解构语法不同,数组解构使用方括号。由于数据解构本质的不同,数组解构没有对象属性名的问题,因而语法上更加简单。如:
let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a)  // 1

在数组解构语法中,变量值是根据数组中元素的顺序进行选取的。如:

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

与对象解构不同,如果为已经声明过的变量进行数组解构赋值,不需要使用圆括号包裹解构赋值语句。如:

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

相关文章

网友评论

      本文标题:ES6-解构赋值

      本文链接:https://www.haomeiwen.com/subject/scpbrrtx.html