es6解构应该注意的点

作者: Funwt | 来源:发表于2017-08-29 03:13 被阅读34次

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

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

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

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

如果变量名与属性名不一致,必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

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

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"}]

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

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

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

函数的参数也可以使用解构赋值。

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

add([1, 2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y
undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

相关文章

  • es6解构应该注意的点

    如果要将一个已经声明的变量用于解构赋值,必须非常小心。 上面代码的写法会报错,因为 JavaScript 引擎会将...

  • 20.JavaScript-数组解构赋值

    1.什么是解构赋值 解构赋值是ES6中新增的一种赋值方式 2.数组解构赋值注意点 2.1 在数组的解构赋值中,等号...

  • es6解构

    1.解构不成功 如果解构不成功,变量的值就等于undefined。 2.默认赋值注意点 ES6 内部使用严格相等运...

  • ES6

    ES6: ES6 新语法 1.变量 解构赋值 (解构赋值对应的python里的序列解包) 解构赋值方式一: 解构赋...

  • ES6的解构赋值是深拷贝or浅拷贝?

    面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结. ES6的解构赋值,大家应该都清楚,就是...

  • 变量的解构赋值

    1.数组的解构赋值 基本用法: 默认值 解构赋值允许指定默认值。 注意,ES6 内部使用严格相等运算符(===),...

  • 记录:es6新增数组去重的方法:Set()

    ...es6的解构

  • ES6_note

    ES6笔记 es6 - 解构 数组的 解构赋值 let [a, b, c] = [1, 2, 3]; 这种写法属于...

  • 第5章 解构(destructure)

    解构(Destructure) 解构是ES6新添加的一种功能,解构是指将复杂的数据结构拆分为小的部分。ES6添加了...

  • ES6解构赋值、交换两个变量的值、设置函数默认值、模板字符串、箭

    ES6 1,解构赋值 解构赋值主要包括数组的解构赋值、对象的解构赋值、字符串的解构赋值、函数参数的解构赋值。 (1...

网友评论

    本文标题:es6解构应该注意的点

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