ES6简介:
ES6主要是为了ES5的先天不足。
ES6简明教程:
1.let 、const和block作用域:(ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。)
let允许创建块级作用域,ES6推荐在函数中使用let定义变量,而非var。
let声明的变量只在它所在的代码块有效。
let不允许在相同作用域内,重复声明同一个变量,因此,不能在函数内部重新声明参数。
let实际上为 JavaScript 新增了块级作用域。
let不会污染全局变量。
const也能在块级作用域有效进行变量声明,它可以声明一个常量。const常量的声明类似于指针。
const声明一个只读的常量。一旦声明,常量的值就不能改变。
在默认情况下使用const,当你知道要修改值时用let。
注意:let 关键词声明的变量不具备变量提升(hoisting)特性。
let 和 const 声明只在最靠近的一个块中(花括号内)有效。
当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING。
const 在声明时必须被赋值。
2.箭头函数(Arrow Functions):
ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体。
简洁函数体不需要return语句。
箭头函数不仅仅是让代码变得更简洁,函数中this总是绑定总是指向对象自身。
之前经常需要使用一个变量来保存this,然后在growUp函数中引用,使用箭头函数可以省去这个麻烦。
最外层不要使用箭头函数。箭头函数没有this指向。
注意:
使用箭头函数,函数内部没有arguments。
箭头函数不能使用new关键字来实例化对象。
3.函数参数默认值:
ES6中允许你对函数参数设置默认值。
4.Spread/Rest操作符:
Spread/Rest操作符指的是 ... ,具体是Spread还是Rest需要看上下文语境。
当被用于迭代器中时,它是一个Spread操作符。
当被用于函数传参时,是一个Rest操作符。
5.对象语法扩展:
ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作。
简写变量: make, // 等同于 make: make
属性可以使用表达式计算值:['make' + make]: true,
忽略`function`关键词简写对象函数:depreciate() { this.value = 2500;}
对象的方法:
is() 等价于 === (比较两个值是否严格相等)
assign() 对象的合并 object.assign(target,obj1,obj2...)
6.二进制和八进制字面量:
ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者0O 即可将其转换为八进制值。
二进制使用 `0b` 或者 `0B`。
7.对象和数组解构(解构赋值):
解构可以避免在对象赋值时产生中间变量。
解构赋值是对赋值运算符的一种扩展。
8.对象超类:
ES6允许在对象中使用super方法。
9.模板语法和分隔符(模板字符串):
ES6中有一种十分简洁的方法组装一堆字符串和变量。
${...}用来渲染一个变量,
`作为分隔符。
let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!
10.for...of VS for...in
for...of 用于遍历一个迭代器,如数组。for (let nickname of nicknames)
for...in 用来遍历对象中的属性。for (let nickname in nicknames)
11.Map和WeakMap:
Map类型是键值对的有序列表,键和值是任意类型。
ES6中两种新的数据结构集:Map和WeakMap。事实上每个对象都可以看作是一个Map。
一个对象由多个 key-val 对构成,在 Map 中,任何类型都可以作为对象的 key。
WeakMap:
WeakMap 就是一个 Map,只不过它的所有 key 都是弱引用,意思就是 WeakMap 中的东西
垃圾回收时不考虑,使用它不用担心内存泄漏问题。
另一个需要注意的点是,WeakMap 的所有 key 必须是对象。它只有四个方法
delete(key),has(key),get(key) 和set(key, val)。(删除、校验(返回布尔值)、获取、设置)
12.Set和WeakSet:
Set 对象是一组不重复的值,重复的值将被忽略,值类型可以是原始类型和引用类型。
可以通过 forEach 和 for...of 来遍历 Set 对象,Set同样有delete()和clear()方法。
WeakSet:
类似于 WeakMap,WeakSet 对象可以让你在一个集合中保存对象的弱引用,在 WeakSet 中
的对象只允许出现一次。
不能传入非对象类型的参数,不可迭代,没有size属性,没有foeach方法等。
13.类:
ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。
函数中使用 static 关键词定义构造函数的的方法和属性。
小技巧(通过Object.assign()方法一次性向类中添加多个方法)
类中的继承和超集:
class Porsche extends Car {
constructor()//实例化的时候会立即被调用 {
super();
console.log("Creating Porsche");
}
}
extends 允许一个子类继承父类,需要注意的是,子类的constructor 函数中需要执行 super() 函数。
当然,你也可以在子类方法中调用父类的方法,如super.parentMethodName()。
需要注意:
①类的声明不会提升(hoisting),如果你要使用某个 Class,那你必须在使用之前定义它,
否则会抛出一个 ReferenceError 的错误。
②在类中定义函数不需要使用 function 关键词。
14.Symbol:(原始数据类型,表示独一无二的值,意思就是内存地址不同)
最大的用途:用来定义对象的私有变量。
如果用Symbol定义的对象中的变量,取值时一定要用[变量名]。
Symbol 是一种新的数据类型,它的值是唯一的,不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符,
不过你访问不到这个标识符。
var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol
注意,这里 Symbol 前面不能使用 new 操作符。
如果它被用作一个对象的属性,那么这个属性会是不可枚举的,也就是不能进行遍历。
如果要获取对象 symbol 属性,需要使用Object.getOwnPropertySymbols(o)。
15.迭代器(Iterators):
是一种新的遍历机制。
迭代器允许每次访问数据集合的一个元素,当指针指向数据集合最后一个元素时,迭代器便会退出。
它提供了 next() 函数来遍历一个序列,这个方法返回一个包含 done 和 value 属性的对象。
done如果为false表示遍历未完成。
ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器,无论什么时候对象需要被遍历,
执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。
数组默认就是一个迭代器。
可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。
16.Generators:(生成器)
为了改变执行流提供了可能,同时为异步编程提供了可能。
Generator 函数是 ES6 的新特性,它允许一个函数返回的可遍历对象生成多个值。
在使用中你会看到 * 语法和一个新的关键词 yield。
每次执行yield时,返回的值变为迭代器的下一个值。
使用场景:为不具备Interator接口的对象提供了遍历操作。
与普通函数的区别:
function后面 函数名之前有个*
只能在函数内部使用yield表达式,让函数挂起
总结:generator函数是分段执行,yield语句是暂停执行,而next()恢复执行。
17.Promises:
相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结果。
特点:
1.对象的状态不受外界影响 处理异步操作的三个状态 Pending(进行)、Resolved(成功)、Reject(失败)。
2.一旦状态改变,就不会在变,任何时候都可以得到这个结果。
.then接收成功结果,.catch接收失败结果。
ES6 对 Promise 有了原生的支持,一个 Promise 是一个等待被异步执行的对象,当它执行完成后,
其状态会变成 resolved 或者rejected。
每一个 Promise 都有一个 .then 方法,这个方法接受两个参数,第一个是处理 resolved 状态的回调,
一个是处理 rejected 状态的回调。
p.then((val) => console.log("Promise Resolved", val),
(err) => console.log("Promise Rejected", err));
resolve()能将现有的任何对象转换成promise对象。
all()
race():某个异步请求设置超时时间,并且在超时后执行相应的操作。
18.剩余参数:
由三个点 ... 和一个紧跟着的具名参数指定 ...keys
...keys解决了argumentsde的问题,作为参数应该写在后面。
19.数组的扩展功能:
数组的方法:
from():将伪数组转换成真正的数组。还可以接受第二个参数,用来对每个元素进行处理。
of():将一组值,转换成数组
copywithin():数组内部将指定位置的元素复制到其他的位置
find():找出第一个符合条件的成员
findIndex():找出第一个符合条件的成员的索引
entries() keys() values():返回一个遍历器,可以使用for...of循环进行遍历
entries():对键值对遍历
keys():对键遍历
values():对值遍历
includes():返回一个布尔值,表示某个数组是否包含给定的值
20.async的用法:
Generator、Promise、async:解决回调地狱,使得异步操作更加方便。
作用:使得异步操作更加方便。
基本操作:async它会返回一个Promise对象 then catch
async是Generator的一个语法糖。
如果async函数中有多个await 那么then函数会等待所有的await指令运行完后执行。
21.module模块化的使用:
CommJs(主要用于服务器)AMD(主要用于浏览器)
es6模块功能主要有两个命令构成:export和import
一个模块就是独立的文件。