新特性

ES6 新特性一

ECMAScript6(也叫ECMAScript 2015)的let和const、类Class、箭头函数、解构赋值、字符串模板等新特性快速使用

2018-06-07侠课岛    初级拔高       

前端/前端必修/es6新特性体验 17     0     2465

let和const

这两个关键词是新出的用于声明变量,其中let等同于var,但是它只在块级作用域下有效,并且不会进行变量提升,也不能重复声明。const也一样。
但不同的是const定义的是一个常量,而且,const定义的时候必须赋值,如果使用类似const myconst;的生命语句,会报错。同时,const声明之后,在这个块级作用域内,它不能被重新赋值,不然同样也会报错。

//块级作用域展示
for(var i;i<5;i++){
    ...do something
}
console.log(i);  // 5   
for(let i;i<5;i++){
    ...do something
}
console.log(i);  //Uncaught ReferenceError: i is not defined

//变量提升展示
console.log(apple);   //"apple"
var apple = "apple";
console.log(apple);  //undefined
let apple = "apple";

类Class

ES6的类实际上就是ES5原型链的语法糖,跟ES5构造函数的思路是一致的,只是在写法上略有不同。新的class写法让对象原型更加清晰,更符合面向对象的编程思想。
在定义类的方法的时候,不需要function关键字,方法与方法之间也不需要用逗号隔开看起来十分的简洁清爽呢~此外,类的调用也不能变量提升,必须先引入或者先定义,才能被调用。
在ES6的类里面还可以定义父类与子类的继承,子类可以调用父类除了静态方法之外的所有方法。 下面是一些有关于类的关键字解析:

constructor

constructor是类的构造方法,通过new命令生成对象实例时,会自动调用该方法。

static

static关键字声明了类的静态方法,它不能被重写也不能被继承,也不能被类的实例调用,只能使用类名来调用。定义的时候语法为static+方法名。

this

在类中,关键字this指向的是类的实例,因此我们在类里面可以用this来调用类的其他方法。但是如果将这个方法单独提出来使用,因为找不到类的实例,方法会报错。

extends

表示继承,用于定义子类继承父类,基本的用法是class Son extends Father

super

super关键字是用在子类上面的,在子类的constructor里面,必须要先声明super()不然就会报错。然后就用可以用super关键字来调用父类上面的方法啦,不过父类的静态方法不能调用,因为它不会被子类继承。

new

关键字new表示创建一个新的类的实例,用法为let clnew = new Classname(),创建完实例之后,类的constructor方法会自动被调用,这之后你就可以用定义的变量名来调用类里面的方法,例如clnew.init()。

下面是完整的类的实例代码:

class Father{
       constructor(obj1,obj2){  //构造方法的参数在新建实例的时候传入
        this.obj1 = obj1;
        this.obj2 = obj2;
    }
    multiply(){
        return this.obj1 * this.obj2;
    }
}
class Son extends Father{
   constructor(obj1,obj2){ //构造方法的参数在新建实例的时候传入
        super(obj1,obj2);  //声明super 继承父类的this
        this.obj1 = obj1;
        this.obj2 = obj2;
    }
   add(){
        return this.obj1 + this.obj2;
    }
   minus(){
       return this.obj1 - this.obj2;
    }
   multiply(){
        return super.multiply();
    }
}
let count = new Son(3,5);
console.log(count.add());          //8
console.log(count.minus());      //-2
console.log(count.multiply());  //15

箭头函数

第一次看到箭头函数的写法的时候,我就完全被迷倒了,如此的简洁,如此的一目了然~再仔细一研究,不仅好看,而且简单好用~!在使用箭头函数的时候,我们不需要使用关键字function来定义方法,取而代之的是=>。甚至在只有一个参数的时候,连括号都可以省略。
除了写法上的不同,箭头函数与普通函数最大的不同就在于函数体内this的指向问题。在普通函数中,this指向的是调用它的上下文;而在箭头函数中,其实是没有this的,它默认指向的是定义时候的父级上下文,看到这里你肯定也明白了,箭头函数最方便的使用场景就是setTimeout ,setInterval这种定时器函数啦~此外在一些回调函数里面,使用箭头函数的语法也更简洁~

// 回调函数使用箭头函数 只有一个参数时,可以省略括号,如果没有参数或者多个参数,就必须要加上括号。
[1, 2, 3].map( x => {
  return x * x;
});

//箭头函数的函数体只有return语句时 return和花括号也可以省略 所以上面也可以写成 超级简洁啦
[1, 2, 3].map( x => x * x );

//在定时器函数中 箭头函数this的指向
function foo1(){
    setTimeout(function(){
       console.log(this.id);
    })
}

function foo2(){
    setTimeout(()=>{
        console.log(this.id)
    })
}

let obj1 = {id:1};
foo1.call(obj1);   //undefined 定时器匿名函数没有调用对象 所以this指向window
foo2.call(obj1);   //1 箭头函数定义时绑定了this在obj1上,所以返回1

解构赋值-数组解构/对象解构/字符串解构/函数参数解构

解构赋值属于模式匹配,把等号左边与右边结构相同的部分会被赋值给变量,在变量赋值中包括数组的结构赋值和对象的解构赋值,还有字符串的赋值。此外,解构赋值还有不完全解构的情况,当等号左右两边结构不完全相等的时候,会匹配相同的部分,不相同的部分就成为undefined。话不多说,看例子:

// 数组的解构赋值
let [ white, black, red ] = [ '#fff', '#000', '#f00' ];
console.log(white)  //#fff
console.log(black)  //#000
console.log(red)    //#f00

//数组的不完全解构赋值
let [ white, black, red ] = [ '#fff', '#000' ];
console.log(white)  //#fff
console.log(black)  //#000
console.log(red)    //undefined

//解构赋值的默认值
let [ white, black, red = '#f00' ] = [ '#fff', '#000' ];
console.log(white)  //#fff
console.log(black)  //#000
console.log(red)    //#f00

//对象的解构赋值 对象的解构可以不按照顺序,变量名必须和对象的属性名相同,同样也支持不完全解构
let { name, sex, age, hobby } = { name:'小明', sex:'male', age:17 };
console.log(name)      //'小明'
console.log(sex)      //'male'
console.log(age)     //17
console.log(hobby)  //undefined

上面是一些解构赋值的基本用法,关于更多解构赋值的规则,也可以查阅阮大大的书籍《ECMAScript 6 入门》
下面是一个函数参数的结构赋值应用,其中函数参数的默认值可以说是非常好用啦,再也不用再函数体用一行代码来判断啦~:

function person([name,age,sex='男']){
    return '此人叫' + name + ',今年' + age + ',性别' + sex;
}
person(['小明','28']);   //此人叫小明,今年28,性别male

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

17

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?