es6之解构赋值巧用

2019独角兽企业重金招聘Python工程师标准>>>

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

如何进行解构赋值我这里就不赘述，本篇文章主要是将解构赋值的巧妙使用之处。

1、交互变量的值

常用交互变量两个方法是引入第三个变量 和 异或（^）。

这里可以使用解构赋值的方式交换变量的值：

let a = 10;
let b = 29;

[a, b] = [b, a]

这样，最后结果是 a = 29, b = 10 。

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([a, b, c]){ 
  // ...
}
f([1, 2, 3]);

// 参数是一组无序的值，使用对象

function f({a, b, c}}{ 
  // ... 
}
f({c: 3, b: 2, x:1});

我觉得，第二种使用对象的方式在开发过程中使用意义非常。

4、函数参数的默认值

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

配合上一个内容，在定义函数时可以很容易的配置默认值并通过能够很容易地指定参数。

5、模块化开发中模块按需加载

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

 

如果大家还有更巧的用处，可以戳我哟

 

 

转载于:https://my.oschina.net/u/3563169/blog/1859008