2021-07-26

一、变量的解构赋值
1)数组和对象解构的区别

  1. 数组的元素是按次序排列的,变量取值由 位置 决定
let [x, y] = [1, 2, 3];
x // 1
y // 2

如果x,y位置互换了,则值也变了
···
let [y, x] = [1, 2, 3];
x // 2
y // 1
···

  1. 对象的属性是没次序的, 变量必须与属性同名才能取到正确的值
let { foo,baz } = { foo: 'aaa', bar: 'bbb' };
foo //'aaa'
baz // undefined
  1. 如果解构失败,变量的值就等于undefined

2) 赋值的话必须嵌套(),否则会报错, 加上()浏览器会把()里的内容当做表达式去解析

let obj = {};
let arr = [];
//解构赋值允许等号左边的模式之中,不放置任何变量名
 ({foo:obj.prop, bar: arr[0]}  = {foo:123, bar:true})  

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

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

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

代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。所以需要跟2)一样加上()才能避免 JavaScript 将其解释为代码块
4) 对数组进行对象属性的解构,因为数组其实就是个特殊的对象

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

推荐阅读更多精彩内容

  • 13:52--14:44 ,52,,14:56--16:16,80, 共132分钟 1.赋值运算符:格式:变量 =...
    教员的忠实读者阅读 173评论 0 1
  • 周一学习小结 针对国外的一些网站,进行了相关的学习 确定爬取的对象 在浏览器F12打开查看页面元素,分析一下这个网...
    大竹英雄阅读 268评论 0 0
  • 记录前端面试被问到的一些问题 对原型和原型链的理解 对作用域和作用域链的理解 寄生组合继承和class 继承的区别...
    喵筱芳阅读 129评论 0 0
  • 观察者模式 定义 观察者模式(Observer Pattern),又叫发布-订阅模式,定义一种一对多的依赖关系,一...
    竹blue阅读 118评论 0 0
  • 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring...
    嘉奇呦_nice阅读 792评论 0 2