ES5/6新特性_es7和es6的区别[通俗易懂]

一、ES5：

1、数组尾逗号：

[,,,].length
[1, 2, 3,].length
//支持ES5的则length为3
//不支持ES5的length为4

{ 
   
	prop1: value1,
	prop2: value2,
}

2、严格模式：

启动严格模式：

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

范围：

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

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

严格模式下：

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

二、ES6：

1、模板字符串

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

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

2、块级作用域

let / const
特点： let/const没有声明提升，在变量定义前使用，会报错（暂存性死区）

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

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集合：

作用：主要用于存储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()

12、新增Set集合：

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

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

API：

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

13、Symbol符号

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

今天的文章ES5/6新特性_es7和es6的区别[通俗易懂]分享到此就结束了，感谢您的阅读。