【Web全栈课程二】ES6特征引见（上）

2019年8月24日 170次阅读 来源: 小恭弘=叶 恭弘子

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);
        }
    }
}

《【Web全栈课程二】ES6特征引见（上）》

缘由：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…

    原文作者：小恭弘=叶 恭弘子
    原文地址: https://segmentfault.com/a/1190000013326492
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞