【Web全栈课程1】ES6特性介绍（上）

ES6特性介绍（上）

ECMAScript（简称ECMA、ES），ES6也被称为ECMAScript 2015
JavaScript是ECMAScript的一种，但是目前实现ECMAScript标准的仅JavaScript

ES6新的标准，新的语法特征：
1、变量/赋值
2、函数
3、数组/json
4、字符串
5、面向对象
6、Promise
7、generator
8、ES7:async/await

1、变量/赋值

【变量】

• var：可以重复定义、不能限制修改（问题越早发现代价越小，因此其实严谨的语法更利于开发大项目）、没有块级作用域（函数作用域）
• let： 不能重复定义、变量、块级作用域
• const： 不能重复定义、常量、块级作用域

示例1，如下代码得到弹出的值始终是3，大家可以想下原因。

window.onload=function(){
    let aBtn = document.getElementsByTagName("input");
    for (var i=0; i< aBtn.length; i++) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    }
}

原因：es5中，var定义的变量没有块级作用域，i在第一个function中循环后已经是3，里面的function执行的时候弹出的就是3。
此时解决方案有2种，都是通过改变变量i的作用域解决
1、闭包的方式封一下（原生js是函数级作用域，用函数包了后作用域不会到外面去）

for (var i=0; i< aBtn.length; i++) {
    (function(i) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    })(i);
}

2、ES6方式，let块级作用域

for (let i=0; i< aBtn.length; i++) {

【赋值】

解构赋值（借鉴于Python），只有符合以下要求，解构赋值可以灵活使用

1. 左右两边结构必须一样
2. 定义和赋值必须同步完成

示例：

let arr=[12,5,8];
// let [a,b,c]=arr; // a=12,b=5,c=8
let {a,b,c}={a:12,b:3,c:6};
let [m,n,k]=[12,{a: {n1:5,n2:8},b:12,c:8},55];
alert(`${a},${b},${c}`); // a=12,b=3,c=6
console(m,n,k); // m=12,n={a: {n1:5,n2:8},b:12,c:8},c=55

2、函数（类似Python）

【箭头函数】

1、如果有且仅有1个参数，()可以省略
2、如果函数体只有一句话，而且是return，{}也可以省
关于this，箭头函数会改变this（后面提及）

let show = function(a,b){return a+b;};
let show = ((a,b)=>a+b);
let show = (a=>a*3);

【默认参数】

传统函数实现默认参数：

function show(a,b,c) {
    b=b||5;
    c=c||12;
    alert(`${a},${b},${c}`);
}
show(13);//值是13,5,12
show(13,24,15);//值是13,24,15

ES6实现默认参数：

function show(a,b=5,c=12) {
    alert(`${a},${b},${c}`);//值是13,5,12
}

【...参数展开】

1、“...”作用1，接收剩余参数，参数展开必须在参数列表的最后

function show(a,b, ...args){
    console.log(a,b,args);
}
show(18,5,14,27,44,12);//函数中a=18,b=5,args=[14,27,44,12]

2、“...”作用2，展开一个数组

let arr=[5,14,27,44];
let arr1=[18,...arr,12];
alert(arr1);//显示18,5,14,27,44,12
//等价于...arr=>5,14,27,44

3、数组/json

【数组常用方法】

1）map，映射，通常用于对一个列表进行操作后返回新的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.map(item=>{
    return item>=60;
});
alert(arr2);//arr2=[false,true,false,false,true]

2）filter，列表过滤，过滤出返回值true的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.filter((item,index)=>{
    return item%2;
});
alert(arr2);//arr2=[59,27,97]

3）forEach 遍历数组

4）reduce 通常用于汇总，返回一个值（reduce有tmp参数）

let arr=[59,84,27,46,97];
//使用reduce计算总和
let sum=arr.reduce((tmp,item,index)=>{//reduce有tmp参数
    return tmp+item;
});

5）伪数组使用数组的方法（类数组直接使用数组方法会报错），使用Array.from()转换

Array.from(array-like).forEach(item=>{});

【json-可简写】

名字和值的变量名一样，可以省略值的变量名只写名字; function可以不写

let a=5;
let obj={a,b:7,
    // show: function(){alert(this.a+','+this.b)}//传统写法
    show(){alert(this.a+','+this.b);}//ES6
}
obj.show();//

4、字符串

模板字符串
1)字符串拼接，插入变量

let person={name:"李明",age:17};
alert("我叫"+person.name+"，我今年"+person.age+"岁");//传统方式
alert(`我叫${person.name}，我今年${person.age}岁`);//ES6模板字符串

2）模板字符串的内容书写时可以换行

新增常用方法：startsWith、endsWith

5、面向对象

1）es5实现一个对象
传统方式，function实现对象，使用prototype追加方法和继承
缺点：大项目中每个开发者的实现不一致，原生没有对象概念，有性能问题

//传统方式实现对象，通过函数表达函数，prototype添加方法
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function(){
    alert("我叫"+this.name);
}
Person.prototype.showAge=function(){
    alert("我"+this.age+"岁");
}
// 继承
function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;//非官方继承会改变constructor指向，需要手动修复
Worker.prototype.showJob=function(){
    alert("我的工作是："+this.job);
}
let w=new Worker("小叶子",18,"学生");// 调用
w.showName();
w.showAge();
w.showJob();

2）es6的class实现一个对象
ES6的类和其它面向对象的语言更为类似（大部分属性类似Python）

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        alert("我叫"+this.name);
    }
    showAge(){
        alert("我"+this.age+"岁");
    }
}
class Worker extends Person{
    constructor(name,age,job){
        super(name,age); //super-超类（父类）
        this.job=job;
    }
    showJob(){
        alert("我的工作是："+this.job);
    }
}
let w=new Worker("小叶子",18,"学生");
w.showName();
w.showAge();
w.showJob();

【函数this/bind】
1、函数this
箭头函数this：根据所在的环境确定this，this是所在环境的this，this恒定
普通函数this：根据调用我的人确定this，谁调用this是谁，this经常变化

2、bind是function中的方法，类似call和apply，为方法绑定this
call和apply直接调用方法，bind先绑定方法的this，不执行

let p=new Person("小叶子",18);
// document.onclick=p.showName;//点击的时候提示“我叫undefined”，this指向[object HTMLDocument]
document.onclick=p.showName.bind(p);//点击的时候提示“我叫小叶子”，this指向p对象

【Web全栈课程三】ES6特性介绍（下）》见：https://segmentfault.com/a/11...