Javascript 解构赋值 Javascript 解构赋值详情

刘志军 2021-11-15 我要评论

想了解Javascript 解构赋值详情的相关内容吗，刘志军在本文为您仔细讲解Javascript 解构赋值的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Javascript,解构赋值,Javascript,解构赋值，下面大家一起来学习吧。

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

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

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

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

(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]

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