ES5:

一:数组尾逗号:
[,,,].length
[1, 2, 3,].length
//支持ES5的则length为3
//不支持ES5的length为4

{
	prop1: value1,
	prop2: value2,
}
二:严格模式:

启动严格模式:

use strict;
//注意:必须作为其作用范围内的第一条语句

范围:

//为<script>开启严格模式
//作用范围是整个其所在的<script>元素

//为function开启严格模式
//作用范围是整个其所在的函数

严格模式下:

  1. 变量必须先声名后赋值
  2. 不允许直接使用以0开头的八进制表示,如果要表示八进制数字,以 0o 为前缀
  3. 如果直接使用函数名调用函数,则函数体中的this为undefined。
三:this以及更改this指向:

请看:this的指向

更改this指向的方法


ES6:

模板字符串

作用:拼接字符串与变量,可换行

let name = 'wuxiaodi';
let res = `
hello
${name}
!
`;
块级作用域

let / const
特点: let/const没有声明提升,在变量定义前使用,会报错(暂存性死区)

注意点:
1.const是定义常量的,let是定义变量的。
2.const定义常量必须初始值。
3.const定义的常量如果是object或者array类型还是可以继续使用它们的方法去改变内部,但不可以给这个常量本身重新赋值。

箭头函数

() => {}

  • 函数表达式的简写,不需要通过function关键字创建函数,并且还可以省略return关键字。
  • 箭头函数不会绑定自己的 this,箭头函数中的this会继承当前上下文的this关键字。
  • 箭头函数不能作为构造函数使用

比如:

[1, 2, 3].map(x => x + 1);	// [2, 3, 4]

等同于:

[1, 2, 3].map((function(x) {
	return x + 1;
}).bind(this));
解构赋值
// 对象
const user = { name: 'guanguan', age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`);  // guanguan : 2

// 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);  // 1

我们也可以析构传入的函数参数

const add = (state, { payload }) => {
	return state.concat(payload);
}

析构时还可以配 alias,让代码更具有语义。

const add = (state, { payload: todo }) => {
	return state.concat(todo);
};
对象字面量改进

这相当于解构赋值的反向操作,用于重新组织一个Object。

const name = 'wuxiaodi';
const age = 8;

const user = { name, age};

定义对象方法时,还可以省去function关键字

app.model({
	reducers: {
		add() {}	//等同于: add: function() {}
	},
	effects: {
		*addRemote() {} //等同于addRemote: function*(){}
	},
});
Spread Operator

Spread Operator 即 3 个点 …,有几种不同的使用方法。

可用于组装数组。

const todos = ['Learn dva'];
[...todos, 'Learn antd'];	// ['Learn dva', 'Learn antd']

也可用于获取数组的部分项。

const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest;	//['b', 'c']

// With ignore
const [first, , ...rest] = arr;
rest;  // ['c']

还可收集函数参数为数组。

function directions(first, ...rest) {
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

代替apply

function foo(x, y, z){}
const args = [1, 2, 3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

对于 Object 而言,用于组合成新的 Object 。(ES2017 stage-2 proposal)

const foo = {
  a: 1,
  b: 2,
};
const bar = {
  b: 3,
  c: 2,
};
const d = 4;
const ret = { ...foo, ...bar, d };  // { a:1, b:3, c:2, d:4 }   PS:如果有相同的key,后面的会覆盖前面的
Promises

Promise 用于更优雅地处理异步请求。比如发起异步请求:

fetch('/api/todos')
	.then(res => res.json())
	.then(data => ({ data }))
	.catch(err => {{ err }});

定义promise

const delay = (timeout) => {
	return new Promise(resolve => {
		setTimeout(resolve, timeout);
	});
};

delay(1000).then(_ => {
	console.log('executed');
});
函数默认参数
function logActivity(activity = 'skiing') {
	console.log(activity);
}
logActivity();	//skiing
模块的 Import 和 Export

import用于引入模块,export用于导出模块。

比如:

// 引入部分
import dva from 'dva';

// 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router';

// 引入全部并作为 github 对象
import * as github from './services/github';

// 导出默认
export default App
// 部分导出,需 import { App } from './file';引入
export class App extend Component {};
内置对象新增API:

Array:

  • Array.from()
    返回数组,该方法可以将类数组对象转换为数组结构
  • Array.prototype.fill()
    数组的填充方法
  • Array.prototype.includes()
    判断数组是否包含某值

String:

  • String.prototype.startsWith()
    判断字符串是否以括号里的内容开头的,返回值是boolean值
  • String.prototype.endsWith()
    判断字符串是否以括号里的内容结尾,返回值是boolean值
新增Map集合:

作用:主要用于存储key-value键值对
创建:

let map = new Map();

API:

属性:
Map.prototype.size

方法:

Map.prototype.clear()
Map.prototype.delete(key)
Map.prototype.entries()
Map.prototype.forEach()
Map.prototype.get(key)
Map.prototype.has(key)
Map.prototype.keys()
Map.prototype.set(key, value)
Map.prototype.values()
新增Set集合:

作用:存储任何类型的唯一值,即集合中所保存的元素是不重复的。
创建:

let set = new Set();
let set = new Set(arrayLike)

API:

add()
delete()
clear()
forEach()
...
Symbol符号

关于ES6新增的全部方法可看阮一峰大佬的ECMAScript 6 入门