ES6之解构赋值的深入理解
程序员文章站
2024-03-01 18:37:04
...
ES6中的解构赋值的深入理解
引言
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 —摘自MDN
1-解构赋值及语法糖的引入：
虽然我们写是这么写，但是最终我们浏览器还是会以上面那样解析，
像这种简化语法的写法，就叫做语法糖。
2- 变量的解构赋值小结：
- 理解:
从对象或数组中提取数据, 并赋值给变量(多个) - 对象的解构赋值
let {n, a} = {n:'tom', a:12} - 数组的解构赋值
let [a,b] = [1, 'atguigu']; - 用途
给多个形参赋值
2.1-对象的解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的解构赋值</title>
</head>
<script type="text/javascript">
const person = {
// 假设这个对象里有很多很多的属性：
name: 'jack',
age: 18,
sex: '男'
};
// 我们往往要操作对象的时候，都会把这些属性从对象中给提取出来
const name = person.name;
const age = person.age;
const sex = person.sex;
const a = person.a; //读取对象中不存在的属性，值就是undefind
// 像上面这样一个一个的提取出来，要是有20个属性，就要写20条把属性给提取出来，
// 这样的代码太繁琐和太多了。
// 所以就出现了一个简写方式----叫做对象的结构赋值：
// 可以用一句话，就能做到上面的4条语句的代码：
// 1 - 对象的解构赋值: 可以提取对象的同名属性赋值，并且将值提取给对应同名变量
// { } 里面的name，age，sex，a是变量，他们的值等于person.name person.age person.sex person.a
const { name, age, sex, a } = person; //虽然我们写是这么写，但是最终我们还是会以上面那样解析
console.log(name, age, sex, a); //jack 18 男 undefined
// 这个就是语法，我们不需要去研究这些语法是怎么实现的，这样就没有意义了。
// 语法就是告诉我们这样用，就是这样用。不要给你一个for循环，你就去深究for循环是怎么具体的实现的。
</script>
</body>
</html>
2.2-数组的解构赋值
// 数组的解构赋值：按照位置提取数组的值
// 这种方法用的很少，一般我们都是通过遍历来取数组的值的
const arr = [3, 2, 4, 1];
const [a, b, c, d] = arr
console.log(a, b, c, d); //3 2 4 1
// 即使你只想要对应其中的两位：也必须按照位置来，你不想要的就空着，
const [a, , , b] = arr;
console.log(a, b); //3 1
2.3函数的解构赋值
// 函数的解构赋值：对函数的第一个参数进行解构赋值
// 这里还是先定义一个对象：
const person = {
name: 'jack',
age: 18,
sex: '男'
};
function fn(obj) { //在这里传入一个obj对象进去
console.log(obj); //所以这里就会打印出来person {name: "jack",age:18,sex:"男"}
}
fn(person); //在这里调用了一个fn函数，传入一个person对象
// 但是我们想要打印的是里面的name，age，sex
// 所以我们就这样写：
function fn(obj) {
const { name, age, sex } = obj; //将这个对象进行解构赋值
console.log(name, age, sex); //jack 18 男
}
// 我们还可以直接写成下面这样：更简洁些：
// 就达到了我们的最终目的---对函数的第一个参数进行解构赋值
// { name, age, sex } 仅仅是一个参数，用大括号包着。
function fn({ name, age, sex }) {
console.log(name, age, sex); //jack 18 男
}
fn(person);
3-ES6解构赋值的用途
- 交换变量的值
上面代码交换变量a和b的值，这样的写法不仅简洁，而且易读，语义非常清晰。let a = 1; let b = 2; [a, b] = [b, a]; -
输入模块的指定方法☞(这个是重点)
在加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
注意:const { SourceMapConsumer, SourceNode } = require("source-map");
☛在React和Vue项目中常用，一般用在调用接口文件，解构其内部方法在组件中使用。 - 从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example(); - 函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1}); - 提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。
上面代码可以快速提取 JSON 数据的值。let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] - 遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
如果只想获取键名，或者只想获取键值，可以写成下面这样。const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }
4-总结
ES6提供的这个赋值的语法其实就是像上面说的是一种语法糖，吃起来很甜，用起来很爽，像这样子的语法糖ES6-10中还有很多，尤其是到了后面框架中的使用，很爽，很有用。
愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖自己，坚持不懈。
人表达的永远不是他所说的内容，而是渴望被理解的心情。——苏更生
下一篇： ASP.NET加密口令的方法实例