JavaScript解构赋值完全手册

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》

??

目录

? 前言

第一节:解构赋值的基本用法

第二节:对象解构赋值

?第三节:数组解构赋值

第四节:参数中的解构赋值

4.1 对象解构:

4.2 数组解构:

第五节:嵌套解构赋值

5.1 对象嵌套解构:

5.2?数组嵌套解构:

?

第六节:解构赋值的应用

第七节:从函数返回多个值

第八节:定义函数参数

第九节:处理JSON数据

第十节:遍历Map和Set

第十一节:参数默认值

? 结语? ?

---

?

? 前言

????????ES6中新增的解构赋值(Destructuring Assignment)是一种便捷获取属性和赋值的特性。它可以让我们以更直观的方式处理对象和数组,极大地提高了开发效率。本文将全面介绍解构赋值的用法及运用技巧,让你在JavaScript编码中如虎添翼。

通过本文,你将学到:

• 解构赋值的基本语法和规则
• 如何快速从对象和数组中取值
• 在函数参数中使用解构赋值的好处
• 灵活运用默认值和嵌套解构
• 解构赋值提高代码可读性的实际例子

让我们开始学习这一极大提高了JavaScript开发效率的语法糖吧!

?

第一节:解构赋值的基本用法

解构赋值可以让我们使用变量快速获取对象或数组的属性/元素。

对象解构:

let person = {
  name: 'Jack',
  age: 20
};

let { name, age } = person;
// name = 'Jack', age = 20

数组解构:

let arr = [1, 2];
let [a, b] = arr; 
// a = 1, b = 2

解构赋值遵循匹配的模式,可以忽略不需要的部分。

第二节:对象解构赋值

对象解构可以指定需要的属性:

let person = {
  name: 'Jack',
  age: 20,
  gender: 'male' 
};

let { name, age } = person;
//只取name和age属性

可以赋值给新变量名:

let { name: fullName, age: personAge } = person; 
// fullName = 'Jack'
// personAge = 20

?可以设置默认值:

let { name='Tom', age} = person;
// name = 'Jack', age = 20

?第三节:数组解构赋值

数组解构遵循位置匹配:

let arr = [1, 2, 3];
let [a, ,b] = arr;
// a=1, b=3

剩余元素可以用...rest语法收集:

let [a, ...rest] = [1, 2, 3]; 
// a = 1, rest = [2, 3]

?同样可以设置默认值:

let [a=10, b] = [undefined, 2];
// a = 10, b = 2

第四节:参数中的解构赋值

解构赋值可以用于函数的参数,方便访问对象属性或数组元素。

4.1 对象解构:

?

function print({ name, age }) {
  console.log(name, age);
}

let person = { 
  name: 'Jack',
  age: 20
};

print(person); 
// 'Jack' 20

4.2 数组解构:

function sum([a, b]) {
  return a + b;
}

sum([10, 20]); // 30

这使函数语义更加清晰,一目了然。

第五节:嵌套解构赋值

解构赋值可以递归嵌套使用。

5.1 对象嵌套解构:

let person = {
  name: 'Jack',
  age: 20,
  address: {
    city: 'New York',
    state: 'NY'
  }
};

let { name, address: { city } } = person;
// name = 'Jack', city = 'New York'

5.2?数组嵌套解构:

let arr = [1, 2, [3, 4]];
let [a, , [b]] = arr;
// a = 1, b = 3

?

嵌套解构可以访问多层对象属性。

第六节:解构赋值的应用

解构赋值在实际开发中有很多运用场景,可以使我们的代码更简洁高效。

• 交换变量的值

  [a, b] = [b, a];

• 从函数返回多个值
• 函数参数的定义
  • 提取JSON数据
  • 遍历Map和Set等

第七节:从函数返回多个值

解构赋值可以让我们从函数方便地返回多个值:

function getPerson() {
  return {
    name: 'Jack',
    age: 20
  }; 
}

let { name, age } = getPerson();

不需要再定义复杂的对象。

第八节:定义函数参数

解构可以方便地定义函数参数:

function print({ name, age}) {
  // ...
}

print({ 
  name: 'Jack',
  age: 20
})

?避免再函数体内部重复获取name和age。

第九节:处理JSON数据

解构赋值可以快速提取JSON对象的数据:

let json = {
  code: 200,
  data: {
    name: 'Jack',
    age: 20
  }
}

let { code, data: { name } } = json;
// code = 200, name = 'Jack'

第十节:遍历Map和Set

解构可以遍历Map和Set:

let map = new Map([['a', 1], ['b', 2]]);

for (let [key, value] of map) {
  // ...
}

????????解构赋值在实际项目中应用广泛,能大幅提高开发效率。需要多加练习,以巩固掌握。

以上介绍了解构赋值的主要用法,如还有疑问,欢迎提出讨论!

第十一节:参数默认值

在解构赋值时可以为参数设置默认值:

function print({name, age=20}) {
  // ...
}

print({name: 'Jack'}); // age=20

这可以使参数可选,增加了函数的灵活性。

第十二节:注意事项

• 对象需要声明的变量名与属性同名
• 数组需要对应位置
• 嵌套解构可以多层提取
• 不完全解构也可以只取需要的部分

需要注意匹配的模式,才能正确获取值。

第十三节:浏览器兼容性

解构赋值是ES6引入的特性,老版本浏览器可能还不支持。

可以通过编译器转换为ES5代码,或使用polyfill提高兼容性。

现代浏览器基本都已支持解构赋值,但还是需要考虑低版本浏览器。

? 结语? ?

解构赋值提高了访问对象和数组值的便捷性,使代码更加简洁。

需要理解其匹配模式,运用自如才能发挥最大效用。

解构赋值已经成为JavaScript不可或缺的重要特性,值得我们深入学习运用。

以上内容概括了解构赋值的全方位知识,如还有任何问题,欢迎在评论讨论!

? ??

?