title: es6 新特性
preview: imgs/preview/es6_1.jpg
preview_text: es6 新特性 主要包含“类、模块化、箭头函数、函数参数默认值、模板字符串、解构赋值、延展操作符、对象属性简写、Promise、let与const”
tags:
- javascript
1. 类（class）
这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承...ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
class Animal {
constructor(name, color) { // 构造函数
this.name = name;
this.color = color;
}
toString() { // toString方法
console.log(`name: ${this.name}, color: ${this.color}`);
}
getName() { // 取值
return this.name;
}
setName(value) { // 存值
this.name = value;
}
getColor() { // 取值
return this.color;
}
setColor(value) { // 存值
this.color = value;
}
}
let animal = new Animal("cat", "white");
animal.toString(); // name: cat, color: white
console.log(animal.hasOwnProperty('name')) // true
console.log(animal.hasOwnProperty('toString')) // false
console.log(animal.__proto__.hasOwnProperty('toString')) // true
2. super 和 extends
使用新的super和extends关键字扩展类
class Cat extends Animal {
constructor(action = "catch thing",name, color) {
super("cat", "black"); // super用作函数, 必须在this使用前调用
this.action = action; // Cat 类本身属性
}
toString() {
super.toString();// super用作对象
}
getAction() {
return this.action;
}
setAction(value) {
this.action = value;
}
}
let cat = new Cat("eat fish");
cat.toString(); // name: cat, color: white
console.log(cat instanceOf Cat) // true
console.log(cat instanceOf Animal) // true
使用ES5编写同样功能的类
function Animal(name, color) {
this.name = name || "cat";
this.color = color || "orange";
}
Animal.prototype.toString = function() {
console.log(`name: ${this.name}, color: ${this.color}`);
}
function Cat (action, name, color) {
Animal.call(this, name, color);
this.action = action || "catch thing";
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.toString = function() {
Tree.prototype.toString.call(this);
}
Cat.prototype.setAction = function(value) {
this.action = value;
}
3. 模块化（Module）
es5不支持原生的模块化，在es6模块作为重要的组成部分被添加进来。模块的共能主要由export和import组成。每一个模块都有自己的单独的作用域，模块之间的调用是通过export来规定模块对外暴露的接口，通过import来引用其他模块提供的接口。同时模块还创造了命名空间，防止函数的命名冲突。
导出（export）
ES6允许在一个模块中使用export来导出多个变量和函数。
导出变量
export let varible = "test variable exprot";
export default varible;
let name = "cat";
let color = "yellow";
export {name, color}
导出常量
export const NUMBER_LENGTH = 20
导出函数
export function myModuleFn(somParams) {
return somParams
}
导入（import）
定义好模块的输出，就可以在另一个模块通过import导入
import varible from "test.js"
import {myModuleFn} from "myModuleFn";
import {name, color} from "./path/to/test.js";
4. 箭头函数（Arrow Function）
=>不只是function的简写，它还带来了其他好处。箭头函数与包围它的代码共享同一个this，能够帮你解决this的指向问题。有经验的javaScript开发者都熟悉var self = this或var that = this这种引用外围的this的模式。但=>就不需要这种模式了。
不论是箭头函数还是bind，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做别的一些事（如卸载监听器），那么你必须保存这个引用。
箭头函数与普通函数的区别
- 箭头函数是匿名函数，不能作为构造函数，不能使用new
- 箭头函数不绑定arguments，取而代之用rest参数...解决
- 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
- 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
- 箭头函数没有原型属性
- 箭头函数不能当做Generator函数,不能使用yield关键字
- 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
普通函数的this指向调用它的那个对象
5. 模板字符串
ES6支持模板字符串，使得字符串的拼接更加简洁、直观。
- 不使用模板字符串
var name = 'your name is ' + first + ' ' + last;
- 使用模板字符串
var name = `your name is ${first} ${last}`;
在ES6中通过${}就可以完成字符串拼接，只需要将变量放在大括号中。
7. 解构赋值
解构赋值语法是Javascript的一种表达式，可以方便的从数组或对象中快速提取值赋给定义的变量。
获取数组的值
从数据中获取值并赋值到的变量中，变量的顺序与数组中对象顺序对应
var foo = [{"a": "one"}, "two", "three", "four"];
var [one, two, three] = foo;
console.log(one, two, three)
// 如果你要忽略某些值， 你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first, last)
var [a, b] = [1, 2]
console.log(a, b)
如果没有从数组中获取到值，可以为变量设置一个默认值。
var a ,b;
[a= 3, b=7]=[1]
获取对象的值
const student = {
name: "Nyan",
age: 27,
city: "ShenZhen"
}
const {name, age, city} = student;
console.log(name, age, city)
8. 延展操作符（Spread operator）
延展操作符...可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造对象时，将对象表达式按key-value方式展开。
语法
- 函数调用
myFunction(...iterableObj)
- 数组构造或字符串
[...iterableObj, '4', ...'hello', 6]
- 构造对象时，进行克隆或属性拷贝（ES2018）新增特性：
let objClone = {...obj};
应用场景
- 在函数调用时使用延展操作符
function (x, y, z) {
return x + y + z;
}
const numbers= [1, 2, 3];
console.log(sum.apply(null, numbers))
console.log(sum(...numbers))
- 构造数组
没有延展操作符的时候，只能通过使用push, splice, concat等方法，来将已有的数组元素变成新数组的一部分。有了延展操作符，构造数组更加简单，优雅。
const students = ["Jack", "Tom"];
const persons = ["Jony", ...students, "Kin", "Anny"]
console.log(persons)
和参数列表的展开类似，...在构造数组时，可以任意位置多次使用。
- 数组拷贝
var arr = [1, 2, 4];
var arr2 = [...arr]
arr2.push(5)
console.log(arr2)
展开语法，与object.assign()行为一致，执行的是都是浅拷贝（只遍历一层）
- 连接多个数组
var arr3 = [...arr1, ...arr3]
// 等同与
var arr4 = arr1.concat(arr2)
在ES2018中延展操作符增加了对对象的支持
var obj1 = {foo: "baz", x: 12};
var obj2 = {foo: "bar", y: 34};
var cloneObj = {...obj1};
var mergeObj = {...obj, ...obj2};
console.log(obj1, obj2)
- 在React中使用
通常我们在封装一个组件时，会对外公开一些props用于实现功能。大部分情况下在外部使用都应显示传递的props.但是当传递大量的props时，会非常繁琐，这时我们可以使用...延展操作符，用于取出参数对象的所有可遍历属性，来进行传递 - 一般情况下，我们这样传递
<CustomComponent name="Nyan" age={27} />
- 使用...，等同于上面的写法
const params = {
name: "name",
age: 27
}
<CustomComponent {...params} />
- 配合解构赋值避免传入一些不需要的参数
const params = {
name: "name",
age: 27,
type: "type Name"
}
var {type, ...other} = params;
<CustomComponent {...other} />
9. 对象属性的简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名
- 不使用es6
const name= "name", age = 27
const student = {name: name,age: age, getName: function(){}}
对象必须包含属性和值，显得非常冗余
- 使用Es6
const name= "name", age = 27
const student = {name,age, function getName(){}}
10. Promise
Promise是异步编程的一种解决方案，比传统的解决方案callback更加优雅。它最早由社区提出与实现，ES6将其写进了语言标准，统一了写法，原生提供了Promise对象。
- 不使用ES6
setTimeout(function(){
console.log("promise test")
setTimeout(function(){
console.log("promise test 1")
}, 1000)
}, 1000)
- 使用ES6
var waitSecond = new Promise(function(resolve, reject){
setTimeout(resolve, 1000)
});
waitSeccond
.then(function(){
console.log("promise test")
return waitSecond
}).then(function(){
console.log("promise test 1")
})