ES6中的数组解构赋值【详解】

1.数组的解构赋值

1.1 基本用法

ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为结构

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

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

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功,foo的值都会等于undefined

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错

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

1.2 默认值

结构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

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

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

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined

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

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

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

上面代码中,因为x能取到值,所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;
if ([1][0] === undefined) {
   
  x = f();
} else {
   
  x = [1][0];
}
//[1][0]指的是数组[1]中的一个元素

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

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

上面最后一个表达式之所以会报错,是因为xy做默认值时,y还没有声明。

1.3更多对象解构赋值

数组的解构赋值

对象的解构赋值

字符串的解构赋值

数值与布尔值的解构赋值

函数参数的解构赋值

解构赋值实战用途

相关推荐

  1. ES6数组赋值详解

    2024-02-18 10:28:02       57 阅读
  2. ES6赋值

    2024-02-18 10:28:02       35 阅读
  3. ES6 赋值

    2024-02-18 10:28:02       40 阅读
  4. ES6语句冒号(:)

    2024-02-18 10:28:02       48 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-18 10:28:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-18 10:28:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-02-18 10:28:02       82 阅读
  4. Python语言-面向对象

    2024-02-18 10:28:02       91 阅读

热门阅读

  1. sql常用语句小结

    2024-02-18 10:28:02       46 阅读
  2. sqlserver union 和union all

    2024-02-18 10:28:02       48 阅读
  3. 算法训练营day30,贪心算法4

    2024-02-18 10:28:02       63 阅读
  4. 网络安全习题集

    2024-02-18 10:28:02       40 阅读
  5. Jedis的使用

    2024-02-18 10:28:02       52 阅读
  6. 13.5. 多尺度目标检测

    2024-02-18 10:28:02       38 阅读