Loading...
墨滴

balala

2021/05/15  阅读:27  主题:自定义主题1

ES6-解构赋值

解构赋值

用法

ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值。

数组的解构赋值

  • 模式匹配

    只要等号两边的模式相同,左边的变量就会被赋予对应的值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
  • 不完全解构

    等号左边的模式只匹配一部分的等号右边的数组

let [a, [b], d] = [1, [23], 4];
// 1
// 2
// 4
  • 指定默认值
let [x, y = 'b', z = 'c'] = ['a'undefined];
// 'a'
// 'b'
// 'c'

对象的解构赋值

  • 常规用法

    对象解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量

let { foo:baz } = { foo'a'bar'b' };
baz // 'a'
foo // error: foo is not defined
  • 嵌套赋值
let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo123bartrue });

obj // { prop: 123 }
arr // [true]

不可将大括号写在行首,会被解释为代码块,可将整个解构赋值语句放在一个圆括号内。

  • 指定默认值
let { x = 1, y = 2, z = 3 } = { xundefinedynull }
// 1
// null
// 3

字符串的解构赋值

字符串在解构赋值时被转换为一个类数组对象

let { x, y, z } = 'abc';
// 'a'
// 'b'
// 'c'

let { length } = 'hello';
length // 5

数值和布尔值的解构赋值

数值和布尔值在解构赋值时会被转换为对象

let { toString: s } = 123;
s === Number.prototype.toString // true

let { toString } = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

function add([x, y]{
  return x + y;
}
add([12]) // 3

function move({ x = 0, y = 0 }{
  return [x, y]
}
move({ x3 }) // [3, 0]

使用场景

  • 交换变量的值 [x, y] = [y, x]

  • 函数返回多个值

function example({
  return {
    foo1,
    bar2
  };
}
let { foo, bar } = example
  • 函数参数定义
function f({x, y, z}{}
f({ z3y2x1 })
  • 提取JSON数据

const { id, status } = jsonData;

  • 函数参数的默认值

function f({ x = 1 }) {}

  • 遍历Map结构

for (let [key, value] of map) {}

  • 输入模块的指定方法

const { readFile } = require("fs")

🍨Tips

  • 默认值生效的条件是数组成员/对象的属性值严格等于undifined
  • 解构失败的变量值等于undefined
  • undefinednull无法转为对象,所以不能进行解构赋值
  • 解构赋值的复制是浅复制

balala

2021/05/15  阅读:27  主题:自定义主题1

作者介绍

balala