解构赋值

什么是解构赋值

按照一贯的套路，接下来的内容是解释：什么是解构赋值？

来看看官方的解释：

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

这句话也不难理解，但是前端君怎么会这么敷衍了事，随便贴一段官方的文字解释就算呢。

来，我们来上一段代码进一步解释一下什么叫解构赋值。

关于给变量赋值，传统的变量赋值是这样的：

    vararr=[1,2,3];//把数组的值分别赋给下面的变量；
    vara=arr[0];
    varb=arr[1];
    varc=arr[2];

    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

将数组的元素值1，2，3分别赋值给变量a，b，c，结果也是如我们所愿，赋值成功，这是一种传统的赋值方式。

我们今天要介绍解构赋值会是怎样的？一起往下看。

变量的解构赋值：

    var[a,b,c]=[1,2,3];//把数组的值分别赋给下面的变量；
    console.log(a);//a的值为1
    console.log(b);//b的值为2
    console.log(c);//c的值为3

注意到了吗？赋值的代码大大减少了，不需要分别把变量a，b，c分别声明定义和赋值，只需要将变量a，b，c作为一个数组的元素，然后将数组[1,2,3]赋值给数组[a,b,c]即可，变量a，b，c即可分别得到对应的值。

看吧，代码是不是简短了很多，可读性也很强，这种叫做数组的解构赋值。

数组的解构赋值

数组的解构赋值的用法有以下几情况要注意：

1、结构赋值可以嵌套的

    var[a,b,[c1,c2] ] =[1,2,[3.1,3.2] ];
    console.log(c1);//结果：c1的值为3.1
    console.log(c2);//结果：c2的值为3.2

如我们的预料，数组中即使再嵌套另一个数组，结构赋值也能为我们的变量准确的赋值，c1和c2的值分别为3.1 , 3.2，也就是赋值成功。

2、不完全解构

    var[a,b,c]=[1,2];
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2

当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值，例如：变量c没有在右边找到匹配的模式，所以无法进行赋值，但这并不影响变量a和变量b的赋值，因为它们在右边找到与之匹配的模式，这种叫做不完全解构。

3. 赋值不成功，变量的值为undefined

    var[a,b,c]=[1,2];
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为undefined

还是接着上面的不完全解构例子讲解，变量a和变量b为不完全解构，那么变量c解构不成功会怎么样呢？记住，解构不成功，变量的值就等于undefined。相当于只声明了变量c，但是没赋值。

4. 允许设定默认值

    var[a,b,c=3]=[1,2];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为3

例子中变量c已经指定默认值为3，即使右侧没有与之对应的值赋给它也没关系，它都可以成功赋值为3，如果你想覆盖默认值3，只需赋一个有效的值即可。如下：

    var[a,b,c=3]=[1,2,4];
    console.log(a);//结果:a的值为1
    console.log(b);//结果:b的值为2
    console.log(c);//结果:c的值为4

这个时候默认值3会被新的值4覆盖，c的值为4；注意：当新的值为undefined的时候，是不会覆盖默认值的。

以上是数组的解构赋值，除了利用数组可以解构赋值外，用JSON对象也可以。

对象的解构赋值

对象的解构赋值跟数组的解构赋值很类似，我们来看一段小代码：

    var{a,b,c}={"a":1,"b":2,"c":3};
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为3

这段例子的代码是不是跟数组的解构赋值很相似，只不过是数组换成了对象。但是两者有一个不同的地方，我们对上面的代码稍做修改：

    var{a,b,c} ={"a":1,"c":3,"b":2};
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为3

我把右侧的对象属性b和属性c的位置进行了调换，但这并不会影响赋值的结果，变量b和变量c的值不会改变，依然是b为2，c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

如果变量找不到与其名字相同的属性，就会赋值不成功，如下面的例子：

var{a } ={"b":2};
console.log(a);//结果：a的值为undefined

变量a在右侧找不到与之名字匹配的属性a，所以变量a赋值不成功，a的值为undefined。

但也不是完全没有办法补救的，如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：

var{ b:a,}={"b":2};
console.log(a);//结果：a的值为2

这样变量a同样可以赋值成功，a的值最终为2。

对象的解构赋值的用法与数组的解构赋值也很类似：

1、对象解构赋值也可以嵌套

var{a:{b}}={"a":{"b":1}};
console.log(b);//结果：b的值为1

2、可以指定默认值

var{a,b=2}={"a":1};
console.log(b);//结果：b的值为默认值2

字符串的解构赋值

除了对象和数组可以解构赋值外，字符串也可以这么玩，看看下面的例子：

    var[a,b,c,d,e,f]="我就是前端君";
    console.log(a);//我
    console.log(b);//就
    console.log(c);//是
    console.log(d);//前
    console.log(e);//端
    console.log(f);//君

这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c，d，e，f都分别赋上了对应的值。

用途

变量的解构赋值用途很多。

（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取 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 数据的值。

（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

（6）遍历 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) {
  // ...
}

（7）输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

posted @ 2021-04-26 19:49 浣熊sky 阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

浣熊sky

解构赋值

数组的解构赋值

对象的解构赋值

字符串的解构赋值

用途

公告