二、变量的解构赋值

2021-10-01  本文已影响0人  祥仔90后

总结#

1.按照一定模式,从数组和对象中提取值,对变量进行赋值
2.可以默认值

1、什么是解构赋值

解构赋值就是按照一定模式从数组和对象中提取值,对变量进行赋值
如下代码:

let a = 1;
let b = 2;
let c = 3;

用解构赋值写

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

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

let [foo] = [];
let [bar, foo] = [1];
//foo undefined
//bar undefined
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'

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

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

:默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
下面表达式之所以会报错,是因为x用y做默认值时,y还没有声明。

let [x = y, y = 1] = [];     // ReferenceError: y is not defined
3、频繁用途

(1)交换变量的值

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

(2)从函数返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

(3)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
上一篇下一篇

猜你喜欢

热点阅读