ES6新特性-解构赋值

ES6新特性的学习

• 一.解构赋值的理解
• 二.数组的解构
• 三.对象的解构
• 四.字符串的解构赋值
• 五.解构赋值的主要用途
• • • （1）交换变量的值
    • （2）提取 JSON 数据
    • （3）从函数返回多个值

一.解构赋值的理解

解构赋值语法是一种 Javascript 表达式，它使得将值从数组，或属性从对象，提取到不同的变量中，成为可能。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

二.数组的解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;
           

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];
           

不仅方便而且简洁

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [a, [[b], c]] = [1, [[2], 3]];
           

var [x,y]=[1,2];

console.log(x);//2

var [x,y,m]=[3,4];

console.log(m);//undefind

var [x,y]=[80,90,100];//100获取不到
           

小技巧（不用临时变量也能交换变量）：

var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
           

三.对象的解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true
           

let { a, b } = { a: 'aa', b: 'bb' };
a // "aa"
b // "bb"
let { c } = { a: 'aa', b: 'bb' };
c // undefined
           

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

注意：如果解构失败，变量的值等于undefined。

四.字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e,f] = 'xiaohu';
a // "x"
b // "i"
c // "a"
d // "o"
e // "h"
f // "u"
           

五.解构赋值的主要用途

（1）交换变量的值

var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
           

面试题：

请用一句代码，实现两个数据值互换？答案也就是上方解构交换赋值的内容。

（2）提取 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]
           

（3）从函数返回多个值

// 返回一个数组

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

// 返回一个对象

function example() {
  return {
    a: 1,
    b: 2
  };
}
let { a, b } = example();
           

还有其他多种用途，博主目前遇到的只有以上类似的相关情况，有其他想法的也可以评论告诉一下我！！！