ES6常用功能/新特性

模块化

两个关键字：export、import

javascript 复制代码

// util.js
export function getData (str) {
 // do something
}
// index.js
import {.getData } from './util';

getData(args) // do something

es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。

class

以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁

javascript 复制代码

// class.js
// class 方式
export class Animals {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(`${this.name} is eating`);
    }
}

export class Dog extends Animals {
    constructor(name) {
        super(name);
        this.name = name;
    }
    bark() {
        console.log(`${this.name} is barking`);
    }
}

// 使用function方式
export function Animal(name) {
    this.name = name;
    this.eat = function() {
        console.log(`function: ${this.name} is eating`);
    }
}
export function Dog2(name) {
    // Animal.call(this, name);
    this.bark = function() {
        console.log(`function: ${this.name} is barking`);
    }
}
Dog2.prototype = new Animal('dog2');

javascript 复制代码

// index.js
import { Dog, Dog2 } from './class.js'

const dog = new Dog('旺财')
dog.bark()
dog.eat()

const dog2 = new Dog2('小强')
dog2.bark()
dog2.eat()

promise

promise用来解决js中的callback hell。它有3种状态：pending、fullfilled、rejected

javascript 复制代码

const getData = new Promise((resolve, reject) => {
	// do something success
	if(true) {
		resolve();
	} else {
		reject();
	}
})
// 使用
getData.then(res => {
	// 成功处理
}).catch(err => {
	// 失败处理
})

let/const

javascript 复制代码

let a = 10;
const b = 10;
a = 20; // 正确
b = 20; //报错

多行字符串/模板变量

javascript 复制代码

const name = 'zhangsan';
const age = 20;
const str = `
<div>
	<p>${name}</p>
	<p>${age}</p>
</div>
`

解构赋值

javascript 复制代码

const obj = {
	a: 'xxx',
	b: 'ccc'
}
const {.a: names } = obj;

块级作用域

javascript 复制代码

// JS
var obj = {.a: 100, b: 200 };
for(var item in obj) {
	console.log(item);
}
console.log(item);
// ES6
const obj = {.a: 100, b: 200 };
for(let item in obj) {
	console.log(item);
}
console.log(item);

函数默认参数

javascript 复制代码

function getData (a, b = 10) {
	console.log(a, b);
}

箭头函数

箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层

javascript 复制代码

function fn () {
	const arr = [1, 2, 3, 4, 5, 6];
	arr.map(function(item) {
		console.log('js:', this);
		return item + 1;
	});
	arr.map((item, index) => {
		console.log('es6:', this);
		return item + 1;
	})
}

fn.call({ a: 100 })
// 可以思考一下打印结果