Javascript Distructuring (JS解构) 应用实践-强烈推荐JS用户了解

说明：本文仅作为功能介绍，为抛砖引玉之用，更多具体用法请参照本文末链接，或使用搜索引擎查。有错误或建议 +微信：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