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

clipboard.png

原因: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...

阅读 881

一只萌萌的程序媛妹子,踏入前端领域不久,希望大家多指导,欢迎大家多多指出问题

69 声望
11 粉丝
0 条评论
你知道吗?

一只萌萌的程序媛妹子,踏入前端领域不久,希望大家多指导,欢迎大家多多指出问题

69 声望
11 粉丝
宣传栏