美文网首页
变量解构赋值

变量解构赋值

作者: 第八共同体 | 来源:发表于2018-01-03 19:04 被阅读0次

注:内容来自阮一峰老师的书 ECMAScript 6 入门

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
let [a, b, c] = [1, 2, 3];
更高级的用法:

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

如果解构不成功,变量的值就等于undefined。let [foo] = [];foo的值会等于undefined
如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。let [foo] = 1;报错

对于 Set 结构,也可以使用数组的解构赋值。let [x, y, z] = new Set(['a', 'b', 'c']);

解构赋值允许指定默认值。let [foo = true] = [];注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值.所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

上面代码中,因为x能取到值,所以函数f根本不会执行。
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

解构不仅可以用于数组,还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

对象的解构也可以指定默认值。

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

默认值生效的条件是,对象的属性值严格等于undefined。

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

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

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

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

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象.
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错

相关文章

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    数组的解构赋值: 解构,就是从数组和对象中提取值,然后对变量进行赋值 解构赋值: 解构不成功,变量的值就等于und...

  • ES6系列之变量的解构赋值

    本篇目录: 数组的解构赋值变量声明并赋值时的解构变量先声明后赋值时的解构不完全解构默认值交换变量解析一个从函数返回...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • ES6的解构赋值

    一、前言 什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。 二、数组的解构赋...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • 名词

    1 解构: 从数组或对象中提取值,给变量赋值这被称为解构解构赋值的变量都会重新声明解构赋值的规则是,只要等号右边的...

  • 变量的解构赋值 - 字符串、数值、布尔值、函数参数

    一、字符串的解构赋值 二、数值和布尔值的解构赋值 三、函数参数的解构赋值 变量的解构赋值 - 数组篇[https:...

  • Z03_变量的解构赋值

    变量的解构赋值 数组的解构赋值 ES 中从数组和对象之中提取数值,对变量进行赋值,这个过程称为解构 1. 对于 S...

网友评论

      本文标题:变量解构赋值

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