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