您的位置:首页 > 其它

ES6新特性【介绍比较常用的部分】

2016-09-07 14:57 369 查看
比较常用的新特性

箭头操作符 :⇒ 简化代码编写方式、方便写回调、this指针问题

类的支持:引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。

解构:自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。

var [x,y] = getVal(),// 函数返回值的解构
[name,,age] = ['wayou','male','secrect'];// 数组解构

function getVal() {
return [ 1, 2 ];
}

console.log('x:' + x + ', y:' + y); // 输出:x:1, y:2
console.log('name:' + name + ', age:' + age); // 输出: name:wayou, age:secrect


默认参数值:现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了

function sayHello2(name='dude'){
console.log(`Hello ${name}`);
}


不定参数:和java类似function add(…x)

let与const 关键字

for of 值遍历

模块:在ES6标准中,JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS和AMD模式。

module "point" {
export class Point {
constructor (x, y) {
public x = x;
public y = y;
}
}
}

// myapp.js
// 声明引用的模块
module point from "/point.js";
// 这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
import Point from "point";

var origin = new Point(0, 0);
console.log(origin);


Map,Set 和 WeakMap,WeakSet

Proxies:Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。

// 定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
// 定义处理程序
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
// 创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
// 做一些改动来触发代理
engineer.salary = 60;//控制台输出:salary is changed to 60


Promises:Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。

// 创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
if ( /*如果成功 */ ) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
// 绑定处理程序
promise.then(function(result) {
// promise成功的话会执行这里
console.log(result); // "Stuff worked!"
}, function(err) {
// promise失败会执行这里
console.log(err); // Error: "It broke"
});

// 后面如果你用到async和await来拉开回调嵌套问题。那么success和faild可以用try catch来解决。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ES6