解构赋值

概念: ES6 允许 按照一个模式, 从目标结构 (数组/对象) 中提取值, 赋予给变量, 解构的目的方便取值.
目的: 优化取值的过程

数组的解构

  • 完全解构
  • 不完全解构
let arr = ["春天", "夏天", "秋天", "冬天"]

let [spr, sum, aut, win] = arr // 完全解构

let [spr, , aut] = arr // 不完全解构

对象的解构

  • 基本解构
  • 解构重命名

解构赋值只要两边解构相同就行,所以对象也是可以解构赋值的。但是需要注意的是对象和数组的解构有一个很大的区别:对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let obj = {
  name: 'liao',
  age: 18,
  desc: '不错'
}

// 1. 基本解构
let { name, age, desc } = obj

// 2. 解构重命名 {变量名: 新的变量名}
let { name: myname, age: myage, desc: mydesc } = obj

// 3. 解构默认值
let { name, age, desc, girl = '小花' } = obj

// 4. 重命名 + 默认值
let { name, age, desc, girl: myGirl = '小花' } = obj
使用解构赋值的时候,要注意声明变量的作用域问题
// 错误的写法
let x;
{x} = {x: 1};
 
// 正确的写法
let x;
({x} = {x: 1});

上面的例子中错误的原因是{x}被认为是一个块级作用域,导致解构失败,我们在使用解构要尽量避免这种大括号直接在行首的情况。

https://blog.csdn.net/bjhan_csdn/article/details/97389320


已发布

分类

来自

标签:

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注