爱站程序员基地目录
- 概念
- 数组解构
- 声明分别赋值
- 解构默认值
- 交换变量值
- 解构函数返回的数组
- 忽略返回值（或跳过某一项）
- 赋值数组剩余值给一个变量
- 嵌套数组解构
- 字符串解构
- 基础对象解构
- 赋值给新变量名
- 解构默认值
- 赋值给新对象名的同时提供默认值
- 同时使用数组和对象解构
- 不完全解构
- 赋值剩余值给一个对象
- 嵌套对象解构（可忽略解构）
- 小心使用已声明变量进行解构
- 函数参数的解构赋值
- 交换变量的值
- 从函数返回多个值
- 提取JSON数据
概念
ES6提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构
示例：
[a, b] = [50, 100];console.log(a);// expected output: 50console.log(b);// expected output: 100[a, b, ...rest] = [10, 20, 30, 40, 50];console.log(rest);// expected output: [30, 40, 50]
数组解构
数组解构是非常简单简洁的，在赋值表达式的左侧使用数组字面量，数组字面量中的每个变量名称映射为解构数组的相同索引项
这是什么意思呢，就是如下面这个示例一样，左边数组中的项分别得到了右侧解构数组相应索引的值
let [a, b, c] = [1, 2, 3];// a = 1// b = 2// c = 3
声明分别赋值
你可以通过变量声明分别解构赋值
示例：声明变量，分别赋值
// 声明变量let a, b;// 然后分别赋值[a, b] = [1, 2];console.log(a); // 1console.log(b); // 2
解构默认值
如果解构取出的值是undefined，可以设置默认值：
let a, b;// 设置默认值[a = 5, b = 7] = [1];console.log(a); // 1console.log(b); // 7
在上面的例子中，我们给a和b均设置了默认值
这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）
交换变量值
以往我们进行两个变量的交换，都是使用
//交换abc = a;a = b;b = c;
或者异或的方法
然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值
let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1
解构函数返回的数组
我们可以直接解构一个返回值为数组的函数
function c() {return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20
在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构
忽略返回值（或跳过某一项）
你可以有选择性的跳过一些不想得到的返回值
function c() {return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3
赋值数组剩余值给一个变量
当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量
let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]
这样的话b也会变成一个数组了，数组中的项是剩余的所有项
注意：
这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错
let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma
嵌套数组解构
像对象一样，数组也可以进行嵌套解构
示例：
const color = [\'#FF00FF\', [255, 0, 255], \'rgb(255, 0, 255)\'];// Use nested destructuring to assign red, green and blue// 使用嵌套解构赋值 red, green, blueconst [hex, [red, green, blue]] = color;console.log(hex, red, green, blue); // #FF00FF 255 0 255
字符串解构
在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据
let [a, b, c, d, e] = \'hello\';/*a = \'h\'b = \'e\'c = \'l\'d = \'l\'e = \'o\'*/
对象解构
基础对象解构
let x = { y: 22, z: true };let { y, z } = x; // let {y:y,z:z} = x;的简写console.log(y); // 22console.log(z); // true
赋值给新变量名
当使用对象解构时可以改变变量的名称
let o = { p: 22, q: true };let { p: foo, q: bar } = o;console.log(foo); // 22console.log(bar); // true
如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量
解构默认值
如果解构取出的对象值是undefined，我们可以设置默认值
let { a = 10, b = 5 } = { a: 3 };console.log(a); // 3console.log(b); // 5
赋值给新对象名的同时提供默认值
前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值
let { a: aa = 10, b: bb = 5 } = { a: 3 };console.log(aa); // 3console.log(bb); // 5
同时使用数组和对象解构
在结构中数组和对象可以一起使用
const props = [{ id: 1, name: \'Fizz\' },{ id: 2, name: \'Buzz\' },{ id: 3, name: \'FizzBuzz\' },];const [, , { name }] = props;console.log(name); // \"FizzBuzz\"
不完全解构
let obj = {p: [{y: \'world\'}] };let {p: [{ y }, x ] } = obj;//不解构x// x = undefined// y = \'world\'
赋值剩余值给一个对象
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};// a = 10// b = 20// rest = {c: 30, d: 40}
嵌套对象解构（可忽略解构）
let obj = {p: [\'hello\', {y: \'world\'}] };let {p: [x, { y }] } = obj;// x = \'hello\'// y = \'world\'let obj = {p: [\'hello\', {y: \'world\'}] };let {p: [x, { }] } = obj;//忽略y// x = \'hello\'
注意事项
小心使用已声明变量进行解构
错误示范：
let x;{x} = {x: 1};
JavaScript引擎会将{x}理解为一个代码块，从而产生语法错误，我们要避免将大括号写在行首，避免JavaScript将其解释为代码块
正确写法：
let x;({x} = {x: 1});
正确写法将整个解构赋值语句放在一个圆括号里，就可以正确执行了
函数参数的解构赋值
函数的参数也可以使用解构赋值
function add([x, y]) {return x + y;}add([1, 2]);
上面代码中，函数add的参数表面上是一个数组，但在传参的时候，数组参数就被解构为变量x和y了，对于函数内部来说，就和直接传入x和y是一样的
解构的用途
解构赋值的用法很多
交换变量的值
let x = 1;let y = 2;[x, y] = [y, x];
上面的代码交换x和y的值，这样的写法不仅简洁而且易读，语义清晰
从函数返回多个值
函数只能返回一个值，如果要返回多个值，我们只能将这些值放置数组或对象里返回，当我们有了解构赋值后，从对象或数组里取出这些值犹如探囊取物
// 返回一个数组function example() {return [1, 2, 3];}let [a, b, c] = example();// 返回一个对象function example() {return {foo: 1,bar: 2};}let { foo, bar } = example();
提取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]
使用上面的代码，我们就可以快速取出JSON数据中的值
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
您可能感兴趣的文章:
- Javascript 解构赋值详情
- JavaScript解构赋值的5个常见场景与实例教程
- 详解JS ES6变量的解构赋值
- Javascript中的解构赋值语法详解
- JavaScript之解构赋值的理解
- 解析JavaScript的ES6版本中的解构赋值
