es6主要特性小结

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

let:let实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块(花括号)内有效;与var的区别是,var用来做循环的计数变量,会泄露成全局变量,在外部调用的值是循环完成后的值。

const:声明变量,但声明的是常量,一旦声明,常量的值不能改变。

class:定义一个类,可定义构造方法在其中,构造方式this关键字指向实例。constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

extends:class之间可用extends关键字实现继承

super:指代父类的实例(即父类的this对象)。子类必须在constructor中调用·方法,否则新建实例就会报错,因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this

arrow function:箭头函数 (i)=> i+1;箭头函数体内的this对象指向定义时所在的对象(箭头函数内无自己的this,其this继承外面的作用域)

template string:用反引号( ` )来标识起始,用${}来引用变量,所有的空格和缩进都会被保留在输出之中

destructuring:从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

// 解构
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, 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:变量未赋值时给该变量一个默认值

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

rest:过滤变量

function animals(once, ...types){
  console.log(types)
}
animals('cat', 'dog', 'fish')   //[ "dog", "fish"]

import export:es6的模块化机制, import用于导入模块,可以选择性导入模块中的一部戏属性/方法,也可给导入的模块重命名;export用于导出模块,也多次导出,任何数据类型都可导出(变量、函数、类等..)。

基本使用

//index.js
import animal from './content'
console.log(animal) // A cat

//content.js
export default 'A cat'

多次导出,导入模块时使用 as 重命名 typeanimalType

//content.js
export default 'A cat'
export function say(){
  return 'Hello!'
}
export const type = 'dog';

//index.js
import animal, { say, type as animalType } from './content'
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)
//The dog says Hello to A cat