ES5/6新特性

一、ES5：

1、数组尾逗号：

[,,,].length [1, 2, 3,].length //支持ES5的则length为3 //不支持ES5的length为4 { 
    prop1: value1, prop2: value2, } 

2、严格模式：

启动严格模式：

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

范围：

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

严格模式下：

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

二、ES6：

1、模板字符串

作用：拼接字符串与变量，可换行

let name = 'wuxiaodi'; let res = ` hello ${ 
      name} ! `; 

2、块级作用域

3、箭头函数

() => {}

• 函数表达式的简写，不需要通过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)); 

4、解构赋值

// 对象 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); }; 

5、对象字面量改进

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

const name = 'wuxiaodi'; const age = 8; const user = { 
     name, age}; 

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

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

6、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，后面的会覆盖前面的 

7、Promise

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'); }); 

8、函数默认参数

function logActivity(activity = 'skiing') { 
     console.log(activity); } logActivity(); //skiing 

9、模块的 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 { 
    }; 

10、内置对象新增API：

Array：

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

String：

• String.prototype.startsWith()
  判断字符串是否以括号里的内容开头的，返回值是boolean值
  
  
• String.prototype.endsWith()
  判断字符串是否以括号里的内容结尾，返回值是boolean值
  
  

11、新增Map集合：

let map = new Map(); 

API:

方法：

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() 

12、新增Set集合：

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

API：

add() delete() clear() forEach() ... 

13、Symbol符号

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