JS 几种常用的变量解构赋值方法

一、简介

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

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

let a = 1;
let b = 2;

现在，为变量赋值，可以这样。

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

二、几种常用的解构赋值

1. 交换变量的值

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

2. 从返回多个值的函数中解构

• 对象

const fn = () => {
  return {
    name: "张三",
    age: 20,
    habby: "游泳"
  }
}
const { name, age, habby } = fn();

• 数组

const fn = () => {
  return [1, 2, 3];
}
const [a, b, c] = fn();

3. 函数参数的定义

• 数组参数定义

const fn = ([a, b, c]) => {
 //...
}
fn([1, 2, 3]);

• 对象参数定义

const fn = ({a, b, c}) => {
  //...
}
fn({
  b: 2,
  a: 3,
  c: 1
});

4. 提取 JSON 数据

const list = {
  code: 1,
  data: {
    username: "张三"
  },
  status: 200
}
const { code, status, data } = list;

5. 函数参数的默认值
   指定参数的默认值，就避免了在函数体内部再写var result = option.result || "" 这样的语句

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

6. 遍历 Map 结构
   任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Set();
map.set("name", "张三");
map.set("habby", "篮球");
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}

7. 导入模块的指定方法

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