ES6新语法

1.变量/赋值

var： 可以重复定义，不能限制修改，没有块级作用域

var a = 1;
var a = 2;
if (3 < 5) {
	var a = 12;
}
console.log(a);

let：不能重复定义、变量
const：不能重复定义、常量
解构赋值：左右两边必须一样；右边必须是个合法对象；必须定义和赋值同步完成

2.函数

箭头函数：如果有且仅有一个参数，()可以省，如果函数体只有一句话，而且是return,{}可以省略。*this
默认参数：function show(a=2){}
参数展开：function show(a, …args){};

let arr = [1,2,3,4,5];
let arr2 = [2,3,4,5,6];
arr.push(...arr2);

3.数组/json

数组：5种，都不会改变原数组的值
map： 映射，一个对一个

let arr = [12,33,45,66];
let arr2 = arr.map(item => return item > 60);

reduce：汇总：一堆对一个

let sum = arr.reduce(tmp, item, index) => {
	return tmp+item;
}

filter：过滤

let arr2 = arr.filter(item => item % 2);

forEach：遍历
from：Array.form([array-like])=>[x,x,x]将类数组的东西转换成数组

<style>
div {
	width: 200px;
	height: 200px;
	background: #CCC;
	float: left;
	margin: 10px;
}
</style>
<script>
	let aDiv = document.getElementsByTagName('div');
	Array.from(aDiv).forEach(div => {
		div.style.background = 'yellow';
	})
</script>

json–变化
1.名字和值一样时，可以省略名字
2.function可以省略

    // 老语法, 打印obj，job: 'fe'
    const key = 'job'
    const obj = {
        key: key,
        work: function(){},
        // key: 'fe'
    }
    obj[key] = 'fe'
    console.log(obj)
    新语法
    const obj = {
        key,
        work(){},
        [key]: 'fe',
        [key + 'world']: 'fe'
    }

4.字符串

字符串模板/startsWith/endsWith

`我叫${json.name},我今年${json.age}岁`

5. 面向对象

传统方式

function Person(name, age) {
	this.name = name;
	this.age = age;
}
Person.prototype.showName = function() {
	alert(`我叫${this.name}`)
}

新方式

let p = new Person('blue', 18);
p.showName();

继承

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	showName() {
		alert(`我叫${this.name}`)
	}
}
class Worker extends Person {
	constructor(name, age, job) {
		super(name, age);
		this.job = job;
	}
	showJob() {
		alert(`我的工作是${this.job}`)
	}
}

this/bind
this: 普通函数：根据调用的人
箭头函数：根据所在的环境

document.onclick = p.showName.bind(p);

6.promise

回调地狱

$.ajax({
	url: './banner_data',
	success(banners) {
		$.ajax({
			url: '/news_data',
			success(news) {
			
			},
			error() {
				alert('数据获取失败');
			}
		})
	},
	error() {
		alert('数据获取失败');
	}
})

用同步的方式写异步

let p = new Promise((resolve, jeject) => {
	// resolve 成功；reject 失败
});
$.ajax({
	url: '1.txt',
	dataType: 'json',
	success(json) {
		resolve(json);
	},
	error(err) {
		reject(err);
	}
});
p.then(json => {
	alert('成功');
}, err => {
	alert('失败')
});

Promise.all([p, p2, p3]).then(arr => {
	let [j, j2, j2] = arr;
	alert('成功');
}, err => {
	alert('失败');
})

简写方式

$.ajax({
	url: '1.txt',
	dataType: 'json'
}).then(json => {
	alert('成功');
}, err => {
	alert('失败');
})

Promise.all([
	$.ajax({url: '1.txt', dataType: 'json'}),
	$.ajax({url: '2.txt', dataType: 'json'}),
	$.ajax({url: '3.txt', dataType: 'json'}),
]).then(arr = > {
	let [j, j1, j2] = arr;
}, err => {
	alert('失败');
})

promise有用–解除异步操作
promise有局限–带逻辑的异步操作麻烦
Promise.all(); 与：所有的都成功了
Promise.race(); 或：只要有一个完成

7.generator-生成器

// 普通函数
function show() {}
// 生成器函数, 可以暂停
function *show() {
	alert('aaa');
	yield;
	 let a = yield; // 传参
	yield 55; // 返回值
	alert('bbb', + a);
	return 89;
}
let gen = show();
let res1 = gen.next(); console.log(res1);  //{value: 55, done: false}
let res2 = gen.next(12); // {value: 86, done: true}

使用：

function *show() {
	let data1 = yield $.ajax({url: '1.txt', dataType: 'json'});
	if (data1.a + data1.b < 10) {
		let data2 = yield $.ajax({url: '2.txt', dataType: 'json'});
	} else {
		let data3 = yield $.ajas({url: '3.txt', dataType: 'json'});
	}
}
runner(show);

generator+promise配合：
外来的runner辅助执行–不统一，不标准，性能低
generator函数不能写成=>

8.async/await

function sleep(sec) {
	return new Promise((resolve, reject) => {
		setTimeout(function () {
			resolve();
		}, 5000);
	});
}
async function show() {
	alert('a');
	await sleep(1);
	alert('b');
	await sleep(2);
	alert('c');
}
show();

使用

async function show() {
	try {
		let data1 = await $.ajax({url: '1.txt', dataType: 'json'});
		let data2 = await $.ajax({url: '2.txt', dataType: 'json'});
		let data2 = await $.ajax({url: '3.txt', dataType: 'json'});
		console.log(data1, data2, data3);
	} catch (e) {
		alert('有问题');
	}
}
show();

9.ES6编译：ES6 -> ES5

babel：polyfill工具

1. npm install --save-dev babel-cli
2. package.json 配置script；src源文件目录，lib目标文件目录

"scripts": {
	"build": "babel src -d lib"
}

3. npm install babel-preset-env --save-dev
4. 新建.babelrc文件，写入内容

{
	"presets": ["env"]
}

5. npm run build

10.模块化

export const name = 'woniu'
export function sayHello() {
    console.log('hello world')
}
export default{}
export default function() {
    console.log{'lihai'}
}
 
import {name} from './module1'
console.log(name)
import sayHi from './module1' // 默认不需要大括号