ES6/ES2015学习笔记(常用特性)

ECMAScript6简称ES6是在2015年发布的,又称ES2015

Babel是一个ES6转换器,可以将ES6代码转换为ES5代码并在现有环境中执行。

最常用的ES6特性包括let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

let const

用于声明变量,类似于var

ES5中只有函数作用域和全局作用域,没有块级作用域,块内同名变量会覆盖外层变量。let声明的两个用处:

  • 具有块级作用域,不会改变块外同名的变量值
  • 防止循环技术的变量泄露为全局变量带来意向不到的结果

下面的例子,第一个把块内var改为let,第二个把i声明改用let,即可得到期望结果

var name = 'zach'

while (true) {
    var name = 'obama' 
    console.log(name)  //obama
    break
}

console.log(name)  //obama
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

const用来声明常量,值不可改变

class extends super

引入class概念,对象原型写法更清晰
class通过extends可以继承
super代表父类的实例,子类必须在constructor中调用super方法,子类没有this对象,需要继承父类的this对象。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

arrow function

两点好处,一简单方便,二对象中使用this更放心

  • 简单方便
function(x, y) { 
    x++;
    y--;
    return x + y;
}//ES5
(x, y) => {x++; y--; return x+y}//ES6
  • this问题
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

以上会报错,因为setTimeout中的this是全局对象。解决方法把setTimeout替换成下面的

setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)

箭头函数没有自己的this,它的this是继承外面的。

template string

ES5中,组织html内容时,需要用到很多的+连接文本和变量,ES6中使用可以直接使用模板特性来写,用${}`来引用变量。

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

destructuring

中文名解构,按照一定的模式从数组和对象中提取值,对变量进行赋值

  • 赋值
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}  //相当于let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}
  • 取值
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

default rest

ES6在function中可以直接给函数赋默认值

function animal(type = 'cat'){
    console.log(type)
}
animal()

rest参数和一个变量名搭配使用,生成一个数组,用于获取函数多余的参数

function input(...params){  
    console.log(params)  
}  
  
input(1,2,3,4)  //[1,2,3,4]  
  
function input2(a,b,...params){  
    console.log(params)  
}  
  
input2(1,2,3,4)  //[3,4] 

import export

ES6中第一次加入了模块功能,取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

export

一个模块是一个独立的文件,如果希望外部能读取文件内的某个变量,必须使用export将变量输出,输出有两种方式:

  • 在变量声明时输出
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
  • 在文件末尾同统一输出(推荐)
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

export除了输出变量,还可以输出函数和类

输出时可以通过as给输出量设置输出名

export输出的接口与内部动态绑定,即外部获取到的是内部的实时值

import

import只能引入文件中export过的变量、函数或对象,可以通过as来重命名
import {var1, var2 as newname} from './example.js'

import会执行所加载的模块,import 'a_module',但多次import只会执行一次。

参考资料

https://segmentfault.com/a/1190000004365693
http://es6.ruanyifeng.com/#docs/module

你可能感兴趣的:(ES6/ES2015学习笔记(常用特性))