解构赋值混淆

本章只是个人的一个笔记,边看边记录,怕自己混淆,特意记录下的随笔,如果有不一样的见解,欢迎指点。
一、解构赋值只是数组和对象?


let a,b,c = 1,'hello',undefined
//Uncaught SyntaxError: Unexpected string

但是,我们可以这样

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

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

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

如果对数值布尔型有疑惑可以看下

let ao = Number(124).toString();
console.log(ao); //"124"

let ab = Number(124).toString;
console.log(ab); //ƒ toString() { [native code] }

函数

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

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

注意看下面两组

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

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

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

第一组{x = 0, y = 0} = {}是为函数move的参数指定默认值。
第二组{x, y} = { x: 0, y: 0 }被视为一个对象,如下

function move () {
  var _ref = arguments.length > 0 && arguments[0] !== undefined 
             ? arguments[0] 
             :{x:0, y:0},
             x = _ref.x,
             y=_ref.y;
  return [x, y];
}

二、在数组解构赋值过程中容易混淆的部分

正常情况下,我们一般这样用

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

默认值

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

undefined

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

可以看到y的解构赋值是undefined,也就是解构赋值失败,所以依然保持默认值'b'

三、在对象解构赋值过程中容易混淆的部分

正常的用法

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

当变量名与属性名不一致时

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

大括号不要当一行中的第一位

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

这种情况{x}会被JavaScript引擎认为是一个代码块

// 正确的写法
let x;
({x} = {x: 1});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,208评论 0 13
  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 924评论 0 0
  • 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring...
    嘉奇呦_nice阅读 792评论 0 2
  • 本文通过学习阮一峰的博客,外加自己的理解,整理了一下我对js变量的解构赋值的理解。 数组的解构赋值 对象的解构赋值...
    宋乐怡阅读 512评论 0 2
  • 裁决之地-经典复古挂机手游 单机传世私服游戏 无兄弟,不传奇!《裁决之地》复刻经典玩法,还原自由PK爆装,再现屠龙...
    erkai_e388阅读 381评论 0 0