标签：const log 弄懂 js console 解构 xixi name
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。