直接进入正题吧,只管关于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
变量的时刻,必须要初始化。
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.
Array
Array
着实用到它的处所太多了,所以我们有必要关于它新增加的要领都来过一遍。
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
有任何毛病,还请斧正~~