ES6 的几个小技巧

前言

本文系翻译自 Check out these useful ECMAScript 2015 (ES6) tips and tricks

本文首发于我的博客：www.ferecord.com/check-out-t…。如若转载请附上原文地址，以便更新溯源。

EcmaScript 2015 (即 ES6) 已经发布两年多了，它的不少新功能均可以被技巧性的使用。这篇文章把一些小技巧列出来，但愿能对你有用。

1. 强制参数

ES6 提供了默认参数的概念，当函数的参数未传入或者传入值为 undefined 时，会应用参数的默认值。

默认值能够是个表达式，因此咱们能够将默认值设置为一个执行函数，若是该参数没有传值，就会执行咱们的默认函数：

const required = () => {throw new Error('Missing parameter')};

//The below function will throw an error if either "a" or "b" is missing.
const add = (a = required(), b = required()) => a + b;

add(1, 2) //3
add(1) // Error: Missing parameter.
复制代码

2. 强大的 reduce

reduce 是一个多才多艺的数组方法，请跟随我看一下。

2.1 使用 reduce 替代 map + filter

设想你有这么个需求：要把数组中的值进行计算后再滤掉一些值，而后输出新数组。很显然咱们通常使用 map 和 filter 方法组合来达到这个目的，但这也意味着你须要迭代这个数组两次。

来看看咱们如何使用 reduce 只迭代数组一次，来完成一样的结果。下面这个例子咱们须要把数组中的值乘 2 ，并返回大于 50 的值：

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
  
  num = num * 2; //double each number (i.e. map)
  
  //filter number > 50
  if (num > 50) {
    finalList.push(num);
  }
  return finalList;
}, []);

doubledOver50; // [60, 80]
复制代码

2.2 使用 reduce 检测括号是否对齐封闭

下面这个例子咱们用 reduce 来检测一段 string 中的括号是否先后对应封闭。

思路是定义一个名为 counter 的变量，它的初始值为 0 ，而后迭代字符串，迭代过程当中碰到(就加 1，碰到)就减 1，若是括号先后对应的话，最终couter的值会是 0。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
  return str.split('').reduce((counter, char) => {
    if(counter < 0) { //matched ")" before "("
      return counter;
    } else if(char === '(') {
      return ++counter;
    } else if(char === ')') {
      return --counter;
    }  else { //matched some other char
      return counter;
    }
    
  }, 0); //<-- starting value of the counter
}

isParensBalanced('(())') // 0 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced
复制代码

2.3 使用 reduce 计算数组中的重复项

若是你想计算数组中的每一个值有多少重复值，reducer 也能够快速帮到你。下面的例子咱们计算数组中每一个值的重复数量，并输出一个对象来展现：

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
   obj[name] = obj[name] ? ++obj[name] : 1;
  return obj;
}, {});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }
复制代码

reduce 的很是强大，建议各位 把 reduce 的介绍通读一遍：Reduce_MDN

3. 对象解构

3.1 移除对象的多余属性

有时你可能但愿移除一个对象中的某些属性，咱们通常会经过迭代这个对象（如 for..in 循环）来移除那些咱们不想要的属性。实际上咱们能够经过对象解构的方法将不想要的属性提取出来，并将想留下来的变量保存在*rest* 参数中。

在下面的这个例子中，咱们从对象中移除_internal和tooBig这两个属性：

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}
复制代码

3.2 嵌套对象解构

下面的示例中，engine属性是对象car内的嵌套对象。咱们能够经过对象解构快速的获取到engine中的属性，好比vin:

var car = {
  model: 'bmw 2018',
  engine: {
    v6: true,
    turbo: true,
    vin: 12345
  }
}

const modelAndVIN = ({model, engine: {vin}}) => {
  console.log(`model: ${model} vin: ${vin}`);
}

modelAndVIN(car); // => model: bmw 2018 vin: 12345
复制代码

3.3 合并对象

ES6 增长了展开运算符（也就是三个点），展开运算符经常用在处理数组解构上，在对象的解构上它也一样好用。

下面的示例中咱们合并两个对象，新对象中相同的属性会被放在后面的对象覆盖：

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {...object1, ...object2} //spread and re-add into merged

console.log(merged) // {a:1, b:30, c:40, d:50}
复制代码

4. 使用 Sets 数组去重

使用 Sets 能够快速给数组去重，由于 Sets 中的值不可重复。

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]
复制代码

5. 数组解构

5.1 交换变量的值

let param1 = 1;
let param2 = 2;

//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1
复制代码

5.2 从函数接受和分配多个值

不少时候你的函数都会将多个数据放在数组内，以返回一个单一值（例如 Promise 函数，它的决议值只能是个单一值），咱们可使用数组解构简便的从返回结果中获取这些值。

下面的这个例子中，咱们使用 fetch 发送了两个请求，并使用 Promise.all() 将两个结果保存在数组中，函数的执行结果是返回这个数组。

function getFullPost(){
  return Promise.all([
    fetch('/post'),
    fetch('/comments')
  ]);
}


// 在 async 函数中
const [post, comments] = await getFullPost();
复制代码

本文完。 have a nice day (￣▽￣)~*