js复习：几个例子弄懂解构赋值
作者：互联网
js复习：几个例子弄懂解构赋值
前言
复习啊复习，js的基础都快忘完了，时不时捡起来再看看。
一、概念
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
二、例子
1.声明时解构
const arr = ['haha','xixi','hehe']
const [a,b,c] = arr
console.log(a) //haha
console.log(b) //xixi
console.log(c) //hehe
解释：将数组中的三个值取出来，赋值给a,b,c三个变量
2.剩余参数解构
const arr = ['haha','xixi','hehe']
const [a,...rest] = arr
console.log(rest) //["xixi","hehe"]
解释：使用rest语法收集剩余参数，变量rest输出剩下的数值为一个数组
3. 默认值
const arr = ["haha",'xixi']
const [a,b,c="hehe"] = arr
console.log(c) //hehe
解释：为防止从数组中抽出空值，可以在解构时使用等号提前赋一个默认值
4.解构对象
const obj = {
name : "xixi",
age : 18
}
const {name,age} = obj
console.log(name) //xixi
console.log(age) //18
解释：从对象里抽取属性为name，将值赋值给name变量
5.解构时的重命名
const obj = {
name : "xixi",
age : 18
}
const {name : xName} = obj //重命名
console.log(xName) //xixi
解释：解构对象时使用冒号，将属性值赋值给一个新变量
6.嵌套解构
const obj = {
parent : {
child : "xixi"
}
}
const { parent : { child } } = obj //嵌套解构
console.log(child) //xixi
解释：当出现嵌套时，可以使用多级解构直接将属性值提取出来
7.遍历对象值时的解构
const stu = [
{ id: 1},
{ id: 2},
{ id: 3},
]
for (let {id} of stu){
console.log(id) //循环输出 1 2 3
}
解释：在遍历对象时使用解构，依次将属性值遍历出来
8.函数参数解构
const stu = {id:0, name:"xixi"}
function fun({id,name}){
console.log(name) //xixi
}
fun(stu)
解释：取出对象属性作为参数传递值
9.变量交换
let a = "xixi";
let b = "haha"; //这里要必须要有分号结尾，否则js认为这一句的"haha"和下一句[a,b]是连在一起的
[a,b] = [b,a];
console.log(a); //haha
console.log(b); //xixi
注意： 这样解构时需要前一语句必须要有分号结尾，否则会报错。
10.使用正则时的解构
var re = /\w+\s/g;
var str = "all over the world"
const [a,b,c,d] = str.match(re)
console.log(a,b,c,d) //输出all over the undefined
解释：使用正则表达式将str可以匹配到的值赋值给a,b,c。有人问为什么d是undefined?因为world没有匹配到。
11.es6计算属性的解构
const attrName = "name"
const obj = {
[attrName]:"xixi"
}
const {[attrName]:myName} = obj
console.log(obj[attrName]) //xixi
console.log(obj["name"]) //xixi
console.log(myName) //xixi
解释：es6中的对象属性也可以是一个变量，因此obj[“name”]也可以输出属性值，也可以单独为其赋值新变量。
# 参考
标签：const,log,弄懂,js,console,解构,xixi,name 来源： https://blog.csdn.net/high32/article/details/113828595