es6新特性
常用es6新特性列举
- Default Parameters（默认参数） in ES6
- Template Literals （模板文本）in ES6
- Multi-line Strings （多行字符串）in ES6
- Destructuring Assignment （解构赋值）in ES6
- Enhanced Object Literals （增强的对象文本）in ES6
- Arrow Functions （箭头函数）in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
- Classes（类） in ES6
1.默认参数
var link = function(height = 50, color = 'red', url = 'http://azat.co') { ... }
// 参数预格式化
2.模板对象，以及多行字符串（“）
var name = 'Your name is ${first} ${last}.';
var url = 'http://loalhost:3000/api/messages/${id}';
// 自动换行
let str = `You have the ${right} to be you.n
You can only be you when you do your best.`;
3.解构赋值
let {name,age} = {name:'帅哥',age: 18,height: 180} //对象
let [a,b,c] = [a:'1',b:'2',c:'3',d:'4'] || {a:'1',b:'2',c:'3',d:'4',length:4} || ...{a:'1',b:'2',c:'3',d:'4'} //数组类数组取值
4.增强的对象字面量
Object.create({serviceBase: 'asdad'}) // 类似于深拷贝，改变内存区块
Object.keys({name: 'asdad'}) // 返回key值数组
5.箭头函数
const sayname = (name) => console.log(name) // 同一行不需要{},return,
箭头函数的this指的是定义区间的的this
上边的案例this指的是sayname
6.promise
let fetch = (name) => {
return new Promise((resolve, reject) => {
if (name == '美女') {
resolve(name)
} else {
reject({error: 'name不是美女，我拒绝'})
}
})
}
// tips async 和 await 只能配合promise使用
7.块作用域和构造let和const
//这里顺带讲一下，声明提前，暂时性假死
// var 声明变量最大的一个特点是存在变量提升。原因就是es5声明提前，javascript默认是按顺序先将声明排在js解析的最上边，一次压入执行栈执行内存的分配，执行完之后马上弹出执行下一个栈，当直接执行console.log(a)的时候，js会自动通过LHS(赋值查找)||RHS（源查找），去查询这个a的值，当在作用域内没有找到a的值，会自动向父级查找，查找不到就默认是window的键a的值为赋值，所以打印出来的a是undefined
console.log(a); // undefined
var a = 1;
console.log(a); // 1
// 暂时性假死是因为let造成的，let是块级作用域，他不会向父级查找
/**
* 这上面都属于变量 a 的暂时性死区
* console.log(a) // => Reference Error
*/
let a = 1;
console.log(a); // => 1
即声明 a 之前，不能够访问 a，而直接报错。
而暂时性死区的出现又引出另外一个问题，即 typeof 不再安全。你可以参考这篇文章http://es-discourse.com/t/why-typeof-is-no-longer-safe/15
不好意思跑题了
8.Classes （类）
// 创建初始 类
class baseModel {
constructor(options, data) {// class constructor， 注意我们对options 和data使用了默认参数值。
this.name = 'Base';
this.url = 'http://azat.co/api';
this.data = data;
this.options = options;
}
getName() { // class method
console.log(`Class name: ${this.name}`);
}
getUrl() { // class method
console.log(`Url: ${this.url}`);
}
}
// 扩展class 子类
class childclass extends baseModel {
constructor(opts, data) {
super({private: true}// 设置私有值, [1，2] || {0：1,1:2} // 设置私有data)
this.url = opts.url
}
getaccountsData() {
return this.data;
}
}
let test = new childclass('任意参数')
test.getName() // base
test.getaccountsData() // [1，2] || {0：1,1:2}
//子类必须在constructor方法中调用super方法，否则新建实例时会报错。
//这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。
//如果不调用super方法，子类就得不到this对象。
9.Modules （模块导入、导出）
// 导出
export var port = 3000;
export function getAccounts(url) { ...}
import {port, getAccounts} from 'module';
console.log(port); // 300
