直接进入正题吧,尽可能关于ES6的知识点都能涉及到。数组
let
const
let
和 const
用法与 var
相似,
都是变量的声明,可是let
具备块级做用域。那是什么概念呢?看下面的例子。函数
for(var i = 0; i<10; ++i) {} console.log(i); //10 for(let j = 0; j<10; ++j) {}; console.log(j); //undefined
上面的例子很明显的展现了let的块级做用域特性。
let不能够重复声明,会提示咱们:网站
let x = 10;let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared
当咱们在全局声明var
的时候,咱们能够经过window
来获取这个变量,可是let
不能够,
你能够将let
变量看其处在一个无形的做用域内。
我以为在大部分时候都应该优先使用let
,<不敢说任什么时候候,总怕来个例外..>。
关于const
,顾名思义,不可改变,但这也要引用类型和基本类型。
首先,当你声明一个const
变量的时候,必需要初始化。this
const x; //Uncaught SyntaxError: Missing initializer in const declaration
基本类型:prototype
`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.
Array
Array
实在用到它的地方太多了,因此咱们有必要对于它新添加的方法都来过一遍。code
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));//true console.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); //5 let res2 = arr.find((value, index, arr) => value < index); console.log(res2); //undefined
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();//undefined let 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( () => {} )); // undefined console.log(['a'].map( () => ({}) )); // Object console.log(['a'].map( () => { return {}; })) // Object
看上去 彷佛仍是 第三种更直观。。
一些注意点
它 没有 arguments
,也不能够对其进行new
操做,它没有自身的this
指针,同时它永远是匿名函数。
若是你们有兴趣关于这方面更多知识,能够自行去如下网站,同时也是我有关ES6的资料来源。
MDN
ES6 in depth
极客学院-深度解析ES6
有任何错误,还请指正~~