分享ES6中比较常用又强大的新特性

前言

es6有很多新东西，但是感觉常用的并不是很多，这里学习记录了一些我自己认为非常常用又强大的新特性。

scoping

实用的块级作用域，let x ＝ xxx 可以声明一个块级作用域的局部变量，简单举个例子下面1号函数可以达到正常的效果，而二号则不能，因为变量i是全局的，以往我们可以通过自执行函数解决 不过现在吗就是用let了。

///1111
let callbacks = []
for (let i = 0; i <= 2; i++) {
callbacks[i] = function () { return i * 2 }
}

//2222
var callbacks = [];
for (var i = 0; i <= 2; i++) {
callbacks[i] = function() { return i * 2; }
}

除了块级变量还是有块级函数，放个代码。同理，不用再写iife函数去消除作用域问题了。

{
function foo () { return 1 }
foo() === 1
{
function foo () { return 2 }
foo() === 2
}
foo() === 1
}

//  only in ES5 with the help of block-scope emulating
//  function scopes and function expressions
(function () {
var foo = function () { return 1; }
foo() === 1;
(function () {
var foo = function () { return 2; }
foo() === 2;
})();
foo() === 1;
})();

Arrow Functions

箭头函数简单说就是切换闭包中的this指向，把this指向它的父级作用域，看代码。妈妈也不用担心我用that _this 来替换this指针了。

///采用箭头函数
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v)
})

////传统解决指针问题方法
//  variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});

//  variant 2
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}, this);

//  variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));

Extended Parameter Handling

函数 rest 操作符：

扩展参数操作，写在参数尾部，表示多余的参数，和新增的spread运算符一样都是三个点(...)，用法如下，后续介绍spread操作符。

///给参数设定默认参数
function f (x, y = 7, z = 42) {
return x + y + z
}
>>>  f(1) === 50

／／／ var a = Array.prototype.slice.call(arguments, 2);

function f (x, y, ...a) {
return (x + y) * a.length
}
>>>  f(1, 2, "hello", true, 7) === 9  (a = [ "hello", true, 7])

Template Literals

是不是看到那一堆的＋ ‘’ ＋‘’ 要吐了，es6拯救你～

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`

Modules

很常用的方法，react，vue等主流框架经常能看到，可以将js代码模块化，通过export 暴露给其他脚本使用该块代码。



以vue－router为例，通过接口暴露了一个router对象

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

//  someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

Classes

在传统变成语言中定义对象都是基于类，而js生成实例对象则不同。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}

///传统实例对象

var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
}

Promises

ajax神器 这里就不赘述了。大部分项目里基本都在用了。 解决回调地狱的解决方法。es7还有 async 和await 函数 ，需要转换支持。

function msgAfterTimeout (msg, who, timeout) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
})
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
console.log(`done after 300ms:${msg}`)
})

采用promise.all 处理多个异步函数回调

New Built-In Methods

es6也对原有的数据类型和原生方法进行了扩展，这里只记录关于数组的扩展，个人感觉比较常用，而且很有用。一些扩展方法可能并不怎么用得到，扩展类型symbol 我现在还想不到什么场景要用。。可能它并不是用来写逻辑的。。而是研究型类型。。。不废话了 开始正文。

spread / ...运算符

Array.of() //将一组值转为数组

Array.from() //用于将类数组（可遍历）对象转为数组

Array.copyWithin(target, start,end) //复制一段数据到某个target

Array.find(fn) // 遍历数组寻找条件成员

Array.findIndex(fn) //同上 返回成员位置

Array.fill(t,s,e) //填充数组

Array.includes() //检测数组是否包含某个值

/////实例
//数组去重
var arr = [1,2,3,4,1,2,3]
var res = Array.from(new Set(arr))
>>>>>  [1,2,3,4]
//查找条件成员

arr.find(function(it) {
return it > 3
})
>>>>  4

///spread用法
arr.push(...[1,2,3])

>>> [1,2,3,4,1,2,3,1,2,3]

总结

掌握一些最新的东西。可以让你事半功倍，知识的深度不容易挖掘但是知识的广度是非常重要的，以前数组去重，以前还能出面试题，现在估计人人都会了。多么的轻松。

如果觉得本文对你有所帮助，就star一下吧～大传送之术！ 我的博客Github