说明:本文仅作为功能介绍,为抛砖引玉之用,更多具体用法请参照本文末链接,或使用搜索引擎查。有错误或建议 +微信:13316098767 QQ:380105206
0.问:JS中如何不使用第三个变量实现两个变量的值互换?
传统方式:
let a = 1;
let b = 2;
console.log('a =', a, ' b =', b)
// 结果: a = 1 b = 2
// 如果要互换 a b的值需要引入第三个变量
let c = a;
let a = b;
let b = c;
console.log('a =', a, ' b =', b)
// 结果: a = 2 b = 1
新方法:(其实已经不新了)
let a = 1;
let b = 2;
[b, a] = [a, b] //这个就实现了互换
console.log('a =', a, ' b =', b)
// 结果: a = 2 b = 1
1.JS 中的解构(distructuring)
1.1 数组应用
高效简洁的取数组值
let arr = [1, 2, 3, 4, 5]
//传统方法取第数组中的值
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log('传统方法:abc取值', a, b, c)
//输出结果:传统方法:abc取值 1 2 3
//解构方式取值
let [a, b, c] = arr
console.log('解构方法:abc取值', a, b, c)
//输出结果:解构方法:abc取值 1 2 3
按需取值
let arr = [1, 2, 3, 4, 5]
//跳过中间
let [a, , c] = arr
console.log('解构方法:ac取值', a, c)
//输出结果:解构方法:ac取值 1 3
剩余部分取值,使用...省略号
let arr = [1, 2, 3, 4, 5]
//...变量取剩余部分
let [a, b, c, ...d] = arr
console.log('解构方法:abcd取值', a, b, c, d)
//输出结果:解构方法:abcd取值 1 2 3 [4, 5]
默认值
let arr = [1, 2]
//默认值(数组只有2个值,所以第三个是取不到值的)
let [a, b, c=0] = arr
console.log('解构方法:abc取值', a, b, c)
//输出结果:解构方法:abc取值 1 2 0
1.2 对象应用
传统方式与解构方式的使用对比,解构方式更加简洁高效,通俗易懂
let person = {
name: "张三",
age: 22,
gender: "男"
}
//传统取值方法
let name = person.name
let age = person['age']
let gender = person.gender
console.log("传统取值:", name, age, gender);
//输出结果:传统取值:张三 22 男
//解构取值方法
let {name, age, gender} = person
console.log("解构取值:", name, age, gender);
//输出结果:解构取值:张三 22 男
默认值
let person = {
name: "张三",
age: 22
}
//解构取值方法
let {name, age, gender = '女'} = person
console.log("解构取值:", name, age, gender);
//输出结果:解构取值:张三 22 女
对象合并(继承,当然还有其它方式可以完成)
let male = {
gender: "男",
age: 18
}
let zhangsan = {
...male, //解构取值方法,在此处有点类似继承的味道
name: "张三",
age: 22
}
console.log(zhangsan);
//输出结果:{ gender: '男', age: 22, name: '张三' }
1.2 console.log中的应用
//前面代码中输出时写法:
let a = 1;
let b = 2;
console.log('a =', a, ' b =', b)
// 结果: a = 2 b = 1
//可采用如下方式调用,简单明晰
console.log({a, b})
//输出结果 :{ a: 1, b: 2 }
本文非完整介绍,请参考官方介绍文档,或使用相关搜索引擎查看更多使用方法
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment