ES6 相关

ES6 是什么

ES6 是新的 JavaScript 语法标准，于2015年6月发布，使用 babel 语法转换器可以支持低端的浏览器。流行的库基本都基于 ES6 构建，React 默认使用 ES6 新语法开发。

ES6语法概览

• 块级作用域、字符串、函数
• 对象扩展、解构
• 类、模块化等

作用域

ES6 之前只有全局作用域和函数作用域，ES6 增加了块级作用域。

//ES6之前
{
	var str="Hello";
}

console.log(str);  //Hello

// ES6
{
	let str="Hello";
}

console.log(str);  //ReferenceError: str is not defined

//const 定义常量，无法修改
const str = "Hello";
str = "world";

console.log(str);//TypeError: Assignment to constant variable.

字符串

• 使用反引号，直接写变量
• 多行字符串
• 告别 + 拼接字符串

let name = 'Beme',
    str = 'ES6';
console.log('Hello ' + name + ' ,this is ' +str );

console.log(`Hello ${name},this is ${str}`); //ES6

console.log(`

		多行字符串

	`);

函数扩展

• 箭头函数
• 参数默认值
• 展开运算符

//箭头函数
const fun2 = () => {
	console.log('ES6')
}
fun2();//ES6

//参数默认值
const fun = (name='World') =>{
	console.log(`Hello ${name}`);
};
fun();   //不传值，默认输出Hello World
fun('ES6'); //传值，输出 Hello ES6

//展开运算符
const fun = (name,sex) =>{
	console.log(name,sex)
};
let arr = ["Beme","man"];
fun.apply(null,arr);//Beme man
fun(...arr);//Beme man

对象扩展

• Object.keys、values、entries
• 对象方法简写，计算属性
• 展开运算符（不是ES6标准，但是Babel也支持

const obj = {name:"Beme",age:"22"}
console.log(Object.keys(obj));//[ 'name', 'age' ]
console.log(Object.values(obj));//[ 'Beme', '22' ]
console.log(Object.entries(obj));//[ [ 'name', 'Beme' ], [ 'age', '22' ] ]

//对象方法简写
const obj = {
	fun1:function(){},
	fun2(){}
};

//展开运算符
const obj1 = {a:"aa",b:"bb"}
const obj2 = {c:"cc",d:"dd"}
console.log({...obj1,...obj2,e:"ee"});
//{ a: 'aa', b: 'bb', c: 'cc', d: 'dd', e: 'ee' }

解构赋值

• 数组解构
• 对象解构

类

• prototype的语法糖
• Extends 继承
• Constructor 构造函数

class MyApp{
	constructor(){
		this.name = 'Beme'
	}
	sayHello(){
		console.log(`Hello ${this.name}`)
	}
}

const app = new MyApp();
app.sayHello();//Hello Beme

新的数据结构

• Set，元素不可重合
• Map
• Symbol

模块化

ES6 中自带了模块化机制，告别 seajs 和 requirejs

• import，import{}
• export，export default
• Node现在还不支持，需要用require来加载文件

通过export暴露的组件，引入时要加{}；
通过export default 暴露的组件，引入时不需要{}；

import * as mod from './'
* 表示以mod的名称全部引入

其他特性

• Promise
• 迭代器和生成器
• 代理Proxy

常用代码片段

数组

对象