ES6 中被遗忘的孤岛

在经历长时间的研究讨论后，ES6的标准终于出台了。就像奥运一样，那是一个让全世界码农都为之兴奋的时刻。

写这篇文章是为了解决在新团队中发现的问题：部分 Team Coder 对 ES6 的认知并不像我之前的预期，以至于一边宣称自己拥护 ES6，一边的在代码上却仍然墨守成规。

     所以就想把自己感觉常用、好用的 ES6 整理出来和大家一起分享。

• Array

Array.from

Array.from 用来将 ArrayLike 的对象转换为 Array，结合它的第二个参数后这个函数的功能就变得非常灵活了。

let spans = document.querySelectorAll( '.mynode' );
let newArr = Array.from( spans, s => s.textContent );

上面的代码可以优雅的获取页面 DIV 中的内容，可以结合自己的业务场景实现无穷的变化，例如获取报表的指定内容然后进行特殊运算等。

Array.find

如果数组的 value 是一些复杂的对象，那么尽量用 Array.find 来进行搜索吧。

let arr = [{key : "a"}, {key : "b"}, {key : "c"}];
arr.find( obj => obj.key == "b" );

上面代码快速的的找到了 arr[1]  并且返回，类似的还有 Array.findIndex，只不过它返回的是数组的索引

Array.includes

如果只是希望通过引用搜索数组是否包含有 value，用 Array.includes 代替 Array.indexOf 吧，除了语法更自然外还解决了 value 中包含 NAN 的问题。

[1, 2, 3].includes( 2 );     // true
[1, NaN, 3].includes( NaN ); // true

ps：如果发现不能编译，请升级到最新版的 Babel，因为它是ES7

•  Function

...

用拓展运算符，可以简化对包含动态参数以及大量参数的函数调用。

let list = [12, 3, 4, 523, 23];
Math.max( ...list );

上述代码用来查找数组中的最大值，还有很多非常方便的应用，例如状态的保存和恢复：

/**
 * 退出前获取当前状态并保存
 */
function onExit( )
{
	return [
	["a1", "b1", "c1", "d1", "e1"],
	["a2", "b2", "c2", "d2", "e2"],
	["a3", "b3", "c3", "d3", "e3"],
}


/**
 * 登录的时候获取之前的状态并初始化
 */
function onLogin( cachedState )
{
	cachedState.forEach( (data) => logic(...data) );
}


/**
 * 具体逻辑
 */
function logic( a, b, c, d, e )
{
	cconsole.log(a, b, c, d, e);
}

默认值和解构的搭配

如果一个函数有复杂的参数结构，同时希望给他们设置各自的默认值，那试试下面的语法吧：

function load(url, { body = 'body', method = 'GET', headers = {} } = {}) 
{
  console.log( body, method, headers );
}

load( 'www.99u.com' ); // body = 'body', method = 'GET', headers = {}
load( 'www.99u.com', {method : 'POST'}); // body = 'body', method = 'POST', headers = {}

强制参数不允许为空

function missArg( )
{
 throw new Error('Missing argument');
}
function foo( arg = missArg() ) 
{
  return arg;
}

• Object

多返回值

合理使用变量名，简化多 返回值函数的写法

function getPoint() 
{
  let x = 1, y = 10;
  return { x, y };
}

浅拷贝

一句话：so easy！

let target = { a: 1 };
let source1 = { b: 2 };
let source2 = { c: 3 };
console.log( Object.assign(target, source1, source2) ); // { a : 1, b : 2, c : 3 }

还有一个应用场景是快速初始化对象属性

class Point 
{
  constructor(x, y) 
  {
    Object.assign(this, {x, y});// 等同于 this.x = x; this.y = y;
  }
}

• 其他

变量交换

let [var1, var2] = ["value1", "value2"];
[var1, var2] = [var2, var1];

在也不用通过临时变量实现变量交换了 ，n个变量也不是问题。

ps：别当心额外的性能消耗，对于 v8 这都不算是个事儿。

用( ` )替代( " )和( ‘ )

还在用隐晦的 （+）来拼接字符串吗？试试下面的语法：

let l = 0.1, t = 0.2;
$('.class').css( { left : `${l*2}em`, top : `${t-3}em`});

如上所见，符号（`）内用（${}） 包裹的部分可以是任意的 js 代码

参考

更多es6信息，可以移步到git：https://github.com/ruanyf/es6tutorial