ES6
1 变量 / 赋值
1.1 变量:
- var 可以重复定义,没有块级作用域,不能限制修改
- let 不可重复定义,变量,块级作用域
- const 不可重复定义,常量,块级作用域
1.2 解构赋值:
- 左右两边必须一样,右边的语法需要合法
- 声明和赋值同步完成
2 函数
2.1 箭头函数:
function (参数,参数) {
函数体
}
(参数,参数)=> {
函数体
}
- 如果有且仅有一个参数,()可以省
- 如果函数体只有一句话,而且是return,{}可以省
*改变 this 指向
2.2 默认参数
(a=xx, b=xx, c=xx) 等价于 a = a || xx, b = b || xx, c = c || xx
2.3 参数展开(剩余参数、数组展开)
-
“三个点”的第1个用途:接收剩余参数
function show(a, b, …名字)
剩余参数必须在参数列表的最后 -
“三个点”的第2个用途:展开一个数组
3 数组/json
3.1 数组的方法——5种
map 映射:一个对一个
reduce 汇总:一堆->一个
filter 过滤:
forEach 遍历:将伪数组转化为数组,使其可以用数组的方法
Array.from([array-like])=>[x,x,x]
3.2 json——2变化
- 简写:名字和值一样的,可以省
- function可以不写
4 字符串
4.1 字符串模板:
反引号。植入变量、任意折行
4.2 startsWith
4.3 endsWith
5 面向对象
5.1 ES5创建对象
function Person(name, age){
this.name=name;
this.age=age;
}//属性
Person.prototype.showName=function (){
alert('我叫'+this.name);
};//方法
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};
5.2 ES6创建对象
// ES6 写法
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
5.3 ES5继承
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做:'+this.job);
};
5.4 ES6继承
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
}
showJob(){
alert('我是做:'+this.job);
}
}
class/constructor
extends/super
普通函数:根据调用我的人 this老变
箭头函数:根据所在的环境 this恒定
bind——给函数定死一个this
6 异步操作
6.1 历史解决版本
- callback回调地狱
- Promise:Promise对象
- Generator
- async / await——终极解决方案
6.2 async / await
样例代码
async function test() {
const v1 = await Promise1();
const v2 = await Promise2();
}
test();
await后面跟 Promise(Generator、async)、原始类型的值
6.3 async / await执行顺序
很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码,实际上await是一个让出线程的标志。await后面的函数会先执行一遍,然后就会跳出整个async函数来执行后面js栈的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await后面表达式的返回值,如果返回值为非promise则继续执行async函数后面的代码,否则将返回的promise放入Promise队列(Promise的Job Queue)
// 数字序号即输出顺序
function testSometing() {
console.log("2");
return "4";
}
async function testAsync() {
console.log("5");
return Promise.resolve("7");
}
async function test() {
console.log("1");
const v1 = await testSometing(); //关键点1
console.log(v1);
const v2 = await testAsync();
console.log(v2);
console.log("8");
}
test();
var promise = new Promise((resolve) => { console.log("3");
resolve("6"); }); //关键点2
promise.then((val) => console.log(val));
6.4 async / await错误处理
await 遇到报错,后面的代码不会执行
// 未进行错误处理
let last;
async function throwError() {
await Promise.reject('error');
last = await '没有执行';
}
throwError().then(success => console.log('成功', last))
.catch(error => console.log('失败',last))
// 失败 undefined
let last;
async function throwError() {
try{
await Promise.reject('error');
}catch(error){
console.log('has Error stop');
}
last = await '继续执行了';
}
throwError().then(success => console.log('成功', last))
.catch(error => console.log('失败',last))
// 成功 undefined
7 模块化 ES6
打包、编译
ES6 -> ES5编译 babel
打包 browserify
ajax/jsonp
websocket