初探ES6(1)...

2016-06-26 10:20:00

直接进入正题吧，尽量关于ES6的知识点都能涉及到。

let const

let 和 const 用法与 var 类似，
都是变量的声明，但是let具有块级作用域。那是什么概念呢？看下面的例子。

for(var i = 0; ivar的时候，我们可以通过window来获取这个变量，但是let不可以，你可以将let变量看其处在一个无形的作用域内。我觉得在大部分时候都应该优先使用let,。关于const,顾名思义，不可改变，但这也要引用类型和基本类型。首先，当你声明一个const变量的时候，必须要初始化。

const x; //Uncaught SyntaxError: Missing initializer in const declaration

基本类型:

const x = 10;x = 20;//Uncaught TypeError: Identifier 'x' has already been declared

引用类型: 就有点特殊了，我们可以对它带有的属性进行，只要不改变它的指向。

const obj = {name: 'jack'};obj.name = 'berry';obj.id = 1;// OK
obj = {}; //Uncaught TypeError: Assignment to constant variable.

## ArrayArray实在用到它的地方太多了，所以我们有必要对于它新添加的方法都来过一遍。### Array.from将一个类数组对象和或可遍历对象转换成真正的数组, 不会改变原有对象，返回一个新的数组。类数组对象:有2种最常见的，我们都拿出来说下。

let x = document.querySelectorAll('*');
console.log(Array.isArray(x));// false
let y = Array.from(x);
console.log(Array.isArray(x));// false
console.log(Array.isArray(y));// true

function foo () {
console.log(Array.isArray(arguments));//false

let args = Array.from(arguments, x => x * x);console.log(Array.isArray(args));//trueconsole.log(args);//[1, 4, 9]

}
foo(1, 2, 3);

你可以看到我们在foo函数内对于arguments处理的时候 出现了 x => x*x,这也是ES6的新特性(箭头函数)这我们将在后面提到。这边我们可以发现Array.from不仅可以转换成数组，而且可以对其中的值进行操作，我们来看下它完整的函数定义。Array.from(arrayLike[, mapFn[, thisArg]]) 第一个是必需参数，即要转换的对象，第二个是可选参数，是一个函数，第三个也是可选参数，指定mapFn的this对象。所以啦，我们拆出来看成Array.from(arrayLike).map(mapFn, thisArg)### Array.prototype.fill

arr.fill(value[, start = 0[, end = this.length]])

使用 value 填充从 start至end的区间，并且会修改原数组对象，并且返回自身， 随便看个例子就好。

let arr = [1, 2, 3];console.log(arr.fill(10, 0, 2)); //[10, 10, 3]console.log(arr); //[10, 10, 3]

### Array.of

Array.of(element0[, element1[, ...[, elementN]]])

将所有传进来的参数都放进同一个数组，并且返回这个新的数组。

console.log(Array.of('ab', 1, null, undefined));//['ab', 1, null, undefined]

### Array.prototype.find

arr.find(callback[, thisArg])

callback中可以传递的参数和在ES5中引入的新方法,如map, filter一样，有三个参数，分别是:value,index,array,同时, thisArg可以指定函数中的this函数不会修改原数组，如果callback返回true,则退出，并返回当前value,如果遍历结束，返回false,则返回undefined，我们看下下面这个例子就清楚了。

let arr = [3, 5, 7, 8];let res1 = arr.find((value, index, arr) => value+index>=6);console.log(res1); //5let res2 = arr.find((value, index, arr) => value Array.prototype.findIndex

恩。。。看函数名字就知道了，上面我们刚提到的find()是找值，这个是找索引，如果找不到则返回-1，所以这边我们就提下有这个函数，具体就不展开了。

Array.prototype.keys

arr.keys()

返回一个数组索引的迭代器, 额！！这下又牵扯出新知识了，迭代器。
一步一步来，先继续这里的，可以将问题先留着，先看下它的用法。

    for (let i of [10, 20, 30].keys()) {        console.log(i);//0, 1, 2    }

上面，我们的例子会输出0, 1, 2,这很好理解，就如我们上面说的，返回当前数组的索引，细心的话可以发现，我们for的遍历采用了for ... of的方式，这也是ES6带给我们的全新的遍历方法，相比于for...in会在当前对象上所有属性去循环，而它则是直接在数据上进行循环,对于for...of我们也暂且先不展开，因为它的篇幅也实在可以扯出太多。

Array.prototype.values

arr.values()

和我们上面提到的方法对应，返回每个索引下对应的值，也是一个迭代器，我们可以用相同的for...of进行遍历

    for (let i of [10, 20, 30].values()) {        console.log(i);//10, 20, 30    }

Array.prototype.entries

arr.entries()

返回一个迭代器，包含每一个数组中的索引与其值，也可以称其为键值对

    for (let i of [10, 20, 30].entries()) {        console.log(i);//[0, 10], [1, 20], [2, 30]    }

Arrow functions

this

关于箭头函数其实我们在上面举例的时候，就已经提到了，可能你已经感受到了它带来的便捷，在箭头函数中的this指针继承于它所在的词法作用域。我们可以通过下面的例子来感受一下，这也是我们大力推行箭头函数的一个原因,可以让我们少考虑一点函数中的this指针带来的困扰。

let obj1 = {    arr: [1, 2, 3],    foo () {        setTimeout(function () {            console.log(this.arr);        }, 0);    }}obj1.foo();//undefinedlet obj2 = {    arr: [1, 2, 3],    foo () {        let _self = this;        setTimeout(function () {            console.log(_self.arr);        }, 0);    }}obj2.foo();//[1, 2, 3]let obj3 = {    arr: [1, 2, 3],    foo () {        setTimeout(() => {            console.log(this.arr);        }, 0);    }}obj3.foo();//[1, 2, 3]

我们往常处理this指针带来的问题可能会使用第二种方法或者bind()这边就不给出了，我们可以很清楚地对比得出，箭头函数给我们带来的好处。
对了，可能你发现了，在obj中，我对于foo属性的值是函数时候的写法，这也是一个能节省代码量的方法，使用起来相当方便。

参数和返回值

即便箭头函数不需要参数，我们也必须用()来表示，只有在只有一个参数的情况下，我们才可以省略(),对于箭头函数的返回值，有2种情况，当你没有使用{}将包裹，并且只有单行表达式时，则默认以其作为返回值，反之则应显示声明return,一个特殊情况是对于对象字面量作为返回值时，始终应当将其用()包裹，否则将以 undefind 处理

console.log(['a'].map( () => {} )); // undefinedconsole.log(['a'].map( () => ({}) )); // Objectconsole.log(['a'].map( () => {    return {};})) // Object

看上去似乎还是第三种更直观。。