ES6新特性
列举:
- 类
- 模块化
- 箭头函数
- 模板字符串
- 延展操作符
- 对象属性简写
- Promise
- Let与Const
- Map和Set
1、类
//类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log('My name is '+this.name); } } //类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } } //测试我们的类 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘I'm coding...’
2、模块化
导出(export)
ES6允许在一个模块中使用export来导出多个变量或函数。
export var name = 'Rainbow'
上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
var name = 'Rainbow'; var age = '24'; export { name, age };
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import myModule from 'myModule'; import { name ,age } from 'test';
3、箭头函数
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
() => { alert() } setTimeout(() => { // to do }, 500)
4、模板字符串
ES6支持 模板字符串,使得字符串的拼接更加的简洁、直观。
平常:var str = ‘hello, '+ name + ', my name is ' + myName;
let str = `hello, ${name}, my name is ${myName}`;
在ES6中通过 ${}就可以完成字符串的拼接,只需要将变量放在大括号之中。
5、对象属性简写
- 不使用ES6
const name = 'Ming', age = '18', city = 'Shanghai'; const student = { name: name, age: age, city: city }; console.log(student);
对象中必须包含属性和值,显得非常冗余。
- 使用ES6
const name = 'Ming', age = '18', city = 'Shanghai'; const student = { name, age, city }; console.log(student);
6、Promise对象
Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
1、不使用ES6
嵌套两个setTimeout回调函数:
setTimeout(function() { console.log('Hello'); setTimeout(function() { console.log('Hi') }, 1000) }, 1000);
2、使用ES6
var waitSecond = new Promise(function(resolve, reject) { setTimeout(resolve, 1000) }); waitSecond.then(function() { console.log("Hello"); return waitSecond }).then(function() { console.log("Hi") });
7、支持let与const
const与let都是块级作用域
- 使用var定义的变量为函数级作用域:
{
var a = 10
}
console.log(a);
- 使用let与const定义的变量为块级作用域
{ let a = 10 } console.log(a); // 报错
具体区别:参考 https://www.cnblogs.com/yjf713/p/12974535.html
8、Map和SetMap解决的是Object的键值对中键只能是字符串的问题。
Map是Es6提供的新的数据结构,是键值对的集合。Map的“键”不限于字符串。各种类型的值(包括对象)都可以当做键。
Set
Set
函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化
Set
本身是一个构造函数,用来生成 Set 数据结构。
Set
函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化
weakSet
WeakSet 的成员只能是对象,而不能是其他类型的值。
WeakSet 是一个构造函数,可以使用new
命令,创建 WeakSet 数据结构。
weakMap
weakMap结构与Map
结构类似,也是用于生成键值对的集合。
weakMap
只接受对象作为键名(null
除外),不接受其他类型的值作为键名
可参考:https://es6.ruanyifeng.com/#docs/set-map