Javascript 解构赋值

By 刘志军 , 2021-10-30, 分类: javascript

JavaScript

解构赋值是ES6中的特性,可以将对象或数组中的值同时赋值给多个变量。

1、数组解构

let [a, b, c] = [1,2,3]
console.log(a, b, c) // 1 2 3

除了数组,任何可迭代的对象都支持被解构, 例如字符串

let [first, second] = "he"

console.log(first, second) // h e

2、对象解构

赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名

let {a, b, c} = {a:1, b:2, c:3}
console.log(a,b,c) // 1 2 3

左侧的变量名需要和对象中的属性名相同,如果对应不上的话,左侧的变量名将被赋值为undefined。例如:

let {a,b, d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 undefined

如果变量名与属性名不一样,可以用冒号分隔符将属性名赋值给变量名,例如

let {a,b, c:d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 3

3、不完全解构

解构赋值左侧变量个数可以不等于右侧数组中元素的个数

1、 左侧多余的变量会被设置为undefined

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

console.log(a, b, c) // 1 2 undefined

2、右侧多余的值将被直接忽略

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

console.log(a, b, c)  // 1 2 3

3、左侧可以用逗号跳过某些值

let [a, , c] = [1, 2, 3, 4]

console.log(a, c)  // 1 3

4、右侧多余的值可以通过...收集到一个变量中

let [a, b, ...c] = [1, 2, 3, 4]

console.log(a, b, c)  // 1 2 [3, 4]

4、用解构赋值实现变量交换

let a = 1, b=2;
[a, b] = [b, a]
console.log(a) //2
console.log(b) //1

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2021-11-12
Javascript 原型与原型链
2020-12-08
JavaScript高级程序设计读书笔记二:变量与作用域
2020-12-07
JavaScript 高级程序设计笔记:基础语法
2021-09-21
Javascript 中,相等操作符两等号“==”与三个等号 “===” 有什么区别?
2020-12-08
JavaScript高级程序设计读书笔记三:基本引用类型
2021-10-19
javascript 字符串长度
2021-05-13
python和javascript中的round函数区别
2021-10-15
javascript 箭头函数介绍
2021-10-15
javascript条件式访问属性
2021-11-09
javascript对象的3个属性特征