您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“ES6中JavaScript新特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
可以通过查看Juriy Zaytsev总结的ECMAScript
6兼容性表格,和Mozilla的ES6实现情况页面以及通过使用现代浏览器的最新版本(比如Chrome
Canary, Firefox
Aurora),来了解目前有哪些已经实现了的ES.next特性.
在Canary中,记得要进入chrome:flags打开'启用实验性JavaScript'选项以激活所有最新的的JavaScript特性.
另外,许多ES.next特性还可以通过使用Google的Traceur转换编译器(这里有一些单元测试的例子)来体验,以及一些shim项目比如ES6-Shim和Harmony
Collections,也实现了不少新特性.
在Node.js(V8)中使用--harmony命令行选项可以开启一些试验性质的ES.next特性,包括块级作用域,WeakMap等等.
我们已经习惯了将我们的代码分割成为更加便于管理的功能块.在ES.next中,一个模块(module)是就是一个module声明,以及包含在该声明中的一组代码.模块可以用内联方式(inline)声明,也可以引入一个外部的模块文件.一个名为Car的内联模块的写法大致如下:
module Car {
// 导入 …
// 导出 …
}
一个模块实例就是一个被求过值的模块,它已经被链接到了其他的模块身上或者已经有了词法上的封装数据.下面是一个模块实例的例子:
module myCar at "car.js";
module声明可以使用在如下上下文中:
module UniverseTest {};
module Universe { module MilkyWay {} };
module MilkyWay = 'Universe/MilkyWay';
module SolarSystem = Universe.MilkyWay.SolarSystem;
module MySystem = SolarSystem;
一个export声明声明了一个可以被其他模块看到的局部函数或变量.
module Car {
// 内部变量
var licensePlateNo = '556-343';
// 暴露到外部的变量和函数
export function drive(speed, direction) {
console.log('details:', speed, direction);
}
export module engine{
export function check() { }
}
export var miles = 5000;
export var color = 'silver';
};
一个模块可以使用import导入任何它所需要的其他模块.导入模块会读取被导入模块的所有可导出数据(比如上面的drive(), miles等),但不能修改它们.导出的变量或函数可以被重命名.
再次用到上面导出相关的例子,我们现在可以有选择性的导入一些模块中的功能.
比如我们可以导入drive():
import drive from Car;
还可以可以同时导入drive()和miles:
import {drive, miles} from Car;
下面,我们要讲一下模块加载器API的概念.模块加载器能够让我们动态的加载所需要的脚本.类似于import, 我们可以使用被导入模块中的所有用export声明过的东西.
// Signature: load(moduleURL, callback, errorCallback)
Loader.load('car.js', function(car) {
console.log(car.drive(500, 'north'));
}, function(err) {
console.log('Error:' + err);
});
load()接受三个参数:
moduleURL: 表示一个模块URL的字符串 (比如 "car.js")
callback: 一个回调函数,接受模块加载,编译,以及执行后的输出结果
errorCallback: 一个回调函数,在加载或编译期间发生错误时调用
我不打算在本文中过多的讲ES.next中的类,如果你想知道类和模块将会有什么联系,Alex
Russell曾经写过一个很好的例子来说明这件事.
JavaScript中有了类,并不意味着要把JavaScript变成Java.ES.next中的类只是我们已经熟悉的语义(比如函数,原型)的另外一种声明方式
下面是用来定义一个widget的ES.next代码:
module widgets {
// ...
class DropDownButton extends Widget {
constructor(attributes) {
super(attributes);
this.buildUI();
}
buildUI() {
this.domNode.onclick = function(){
// ...
};
}
}
}
下面是去糖(de-sugared)后的做法,也就是我们目前正在使用的方法:
var widgets = (function(global) {
// ...
function DropDownButton(attributes) {
Widget.call(this, attributes);
this.buildUI();
}
DropDownButton.prototype = Object.create(Widget.prototype, {
constructor: { value: DropDownButton },
buildUI: {
value: function(e) {
this.domNode.onclick = function(e) {
// ...
}
}
}
});
})(this);
ES.next的写法的确让代码变的更可读.这里的class也就相当于是function,至少是做了目前我们用function来做的一件事.如果你已经习惯并且也喜欢用JavaScript中的函数和原型,这种未来的语法糖也就不用在意了.
ES.next中的模块是朝着正确的方向走了一步吗?也许是吧.我自己的看法是:看相关的规范文档是一码事,实际上使用起来又是另一码事.在Harmonizr,Require
HM和Traceur中可以体验新的模块语法,你会非常容易的熟悉这些语法,该语法可能会觉得有点像Python的感觉(比如import语句).
我认为,如果一些功能有足够广泛的使用需求(比如模块),那么平台(也就是浏览器)就应该原生支持它们.而且,并不是只有我一个人这么觉得. James Burke,发明了AMD和RequireJS的人,也曾经说过:
我想,AMD和RequireJS应该被淘汰了.它们的确解决了一个实际存在的问题,但更理想的情况是,语言和运行环境应该内置类似的功能.模块的原生支持应该能够覆盖RequireJS 80%的使用需求,从这一点上说,我们不再需要使用任何用户态(userland)的模块加载库了,至少在浏览器中是这样.
不过James的质疑是ES.next的模块是否是一个足够好的解决方案,他曾在六月份谈到过自己关于ES.next中模块的一些想法 ES6
Modules: Suggestions for improvement以及再后来的一篇文章Why
not AMD?.
Isaac Schlueter前段时间也写过一些自己的想法,讲到了ES6的模块有哪些不足.尝试一下下面这些选项,看看你的想法如何.
Traceur
demo
Harmonizr
Require
HM
ES6
Module Loader
通过Object.observe,我们可以观察指定的对象,并且在该对象被修改时得到通知.这种修改操作包括属性的添加,更新,删除以及重新配置.
属性观察是我们经常会在MVC框架中看到的行为,它是数据绑定的一个重要组件,AngularJS和Ember.js都有自己的解决方案.
这是一个非常重要的新功能,它不仅比目前所有框架的同类实现性能要好,而且还能更容易的观察纯原生对象.
// 一个简单的对象可以作为一个模块来使用
var todoModel = {
label: 'Default',
completed: false
};
// 我们观察这个对象
Object.observe(todoModel, function(changes) {
changes.forEach(function(change, i) {
console.log(change);
/*
哪个属性被改变了? change.name
改变类型是什么? change.type
新的属性值是什么? change.object[change.name]
*/
});
});
// 使用时:
todoModel.label = 'Buy some more milk';
/*
label属性被改变了
改变类型是属性值更新
当前属性值为'Buy some more milk'
*/
todoModel.completeBy = '01/01/2013';
/*
completeBy属性被改变了
改变类型是属性被添加
当前属性值为'01/01/2013'
*/
delete todoModel.completed;
/*
completed属性被改变了
改变类型是属性被删除
当前属性值为undefined
*/
Object.observe马上将会在Chrome Canary中实现(需要开启"启用实验性JavaScript"选项).
Chromium特殊版本
Watch.JS 可以实现类似的功能,但它并不是实现Object.observe的polyfill或shim
Rick Waldron的这篇文章有关于Object.observe更详细的介绍.
译者注:Firefox很早就有了一个类似的东西:Object.prototype.watch.
默认参数值(Default
parameter values)的作用是:在一些形参没有被显式传值的情况下,使用默认的初始化值来进行初始化.这就意味着我们不再需要写类似options = options || {};这样的语句了.
该语法形式就是把一个初始值赋值给对应的形参名:
function addTodo(caption = 'Do something') {
console.log(caption);
}
addTodo(); // Do something
拥有默认参数值的形参只能放在形参列表的最右边:
function addTodo(caption, order = 4) {}
function addTodo(caption = 'Do something', order = 4) {}
function addTodo(caption, order = 10, other = this) {}
已经实现该特性的浏览器: Firefox 18+
译者注:Firefox 15就已经实现了默认参数值,作者所说的18只是说18支持,并不是说18是第一个支持的版本.包括本文下面将要提到的chrome 24+等等,都有这个问题.
块级作用域引入了两种新的声明形式,可以用它们定义一个只存在于某个语句块中的变量或常量.这两种新的声明关键字为:
let: 语法上非常类似于var, 但定义的变量只存在于当前的语句块中
const: 和let类似,但声明的是一个只读的常量
使用let代替var可以更容易的定义一个只在某个语句块中存在的局部变量,而不用担心它和函数体中其他部分的同名变量有冲突.在let语句内部用var声明的变量和在let语句外部用var声明的变量没什么差别,它们都拥有函数作用域,而不是块级作用域.
译者注:以防读者看不懂,我用一个例子解释一下上面的这句话,是这样的:
let(var1 = 1) { alert(var1); //弹出1,var1是个块级作用域变量var var2 = 2; } var var3 = 3; alert(var2); //弹出2,虽然var2是在let语句内部声明的,但它仍然是个函数作用域内的变量,因为使用的是var声明alert(var3); //弹出3alert(var1); //抛出异常
var x = 8;
var y = 0;
let (x = x+10, y = 12) {
console.log(x+y); // 30
}
console.log(x + y); // 8
实现let的浏览器: Firefox 18+, Chrome 24+
实现const的浏览器: Firefox 18+, Chrome 24+, Safari 6+, WebKit, Opera 12+
译者注:Firefox很久以前就支持了let和const,但这两个旧的实现都是依据了当年的ES4草案.和目前的ES6草案有些区别,比如ES4中用const声明的常量并没有块级作用域(和var一样,只是值不可变),let也有一些细微差别,就不说了.由于很少人使用旧版的Firefox(但我的主浏览器是FF3.6!),即使未来ES6和ES4中的一些东西有冲突,我们基本也可以忽略.
我想大部分读者已经熟悉了映射的概念,因为我们过去一直都是用纯对象来实现映射的.Map允许我们将一个值映射到一个唯一的键上,然后我们就可以通过这个键获取到对应的值,而不需要担心用普通对象实现映射时因原型继承而带来的问题.
使用set()方法,可以在map中添加一个新的键值对,使用get()方法,可以获取到所存储的值.Map对象还有其他三个方法:
has(key) : 一个布尔值,表明某个键是否存在于map中
delete(key) : 删除掉map中指定的键
size() : 返回map中键值对的个数
let m = new Map();
m.set('todo', 'todo'.length); // "todo" → 4
m.get('todo'); // 4
m.has('todo'); // true
m.delete('todo'); // true
m.has('todo'); // false
已经实现Map的浏览器: Firefox 18+
Nicholas Zakas的这篇文章有关于Map更详细的介绍.
ES6
Shim
Harmony
Collections
译者注:我翻译过尼古拉斯的这篇文章:[译]ECMAScript
6中的集合类型,第二部分:Map.作者可能不知道,10月份的ES6草案中,
Map.prototype.size和Set.prototype.size都从size()方法改成size访问器属性了.同时Map对象新添加的方法还有很多,clear()用来清空一个map,forEach()用来遍历一个map,还有items(),keys(),values()等.Set对象也类似,有不少作者没提到的方法,下面的Set小节我就不指出了.另外,在ES5中,在把对象当成映射来使用的时候,为了防止原型继承带来的问题(比如在twitter中,@__proto__能让浏览器卡死),可以用var hash = Object.create(null)代替var hash = {};
正如Nicholas Zakas在他的文章中所说,对于那些接触过Ruby和Python等其他语言的程序员来说,Set并不是什么新东西,但它的确是在JavaScript中一直都缺少的特性.
任何类型的数据都可以存储在一个set中,但每个值只能存储一次(不能重复).利用Set可以很方便的创建一个不包含任何重复值的有序列表.
add(value) – 向set中添加一个值.
delete(value) – 从set中删除value这个值.
has(value) – 返回一个布尔值,表明value这个值是否存在于这个set中.
let s = new Set([1, 2, 3]); // s有1, 2,
3三个元素.
s.has(-Infinity); // false
s.add(-Infinity); // s有1, 2, 3,
-Infinity四个元素.
s.has(-Infinity); // true
s.delete(-Infinity); // true
s.has(-Infinity); // false
Set对象的一个作用是用来降低过滤操作(filter方法)的复杂度.比如:
function unique(array) {
var seen = new Set;
return array.filter(function (item) {
if (!seen.has(item)) {
seen.add(item);
return true;
}
});
}
这个利用Set来进行数组去重的函数的复杂度为O(n).而其他现有数组去重方法的复杂度几乎都为O(n^2).
已经实现Set的浏览器: Firefox 18, Chrome 24+.
Nicholas Zakas的这篇文章有关于Set更详细的介绍.
ES6
Shim
Harmony
Collections
译者注:我翻译过尼古拉斯的这篇文章:[译]ECMAScript
6中的集合类型,第一部分:Set.如果让我来实现一个ES6下的数组去重函数的话,我会这么写:
function unique(array) { return [v for(v of Set(array))] }该函数使用到了ES6中的for-of遍历,以及数组推导式.不过效率比上面使用filter去重的方法稍微差点.Firefox最新版中已经可以执行这个函数.
另外,借助于下面将会提到的Array.from方法,还有更简单高效的写法:
>Array.from(new Set([ 1, 1, 2, 2, 3, 4 ])); [1,2,3,4]甚至,借助于ES6中的展开(spread)操作,还有可能这样实现:
>[ ... new Set([ 1, 1, 2, 2, 3, 4 ]) ]; [1,2,3,4]
WeakMap的键只能是个对象值,而且该键持有了所引用对象的弱引用,以防止内存泄漏的问题.这就意味着,如果一个对象除了WeakMap的键以外没有任何其他的引用存在的话,垃圾回收器就会销毁这个对象.
WeakMap的另外一个特点是我们不能遍历它的键,而Map可以.
let m = new WeakMap();
m.set('todo', 'todo'.length); //
异常,键必须是个对象值!
// TypeError: Invalid value used as weak map key
m.has('todo'); //
同样异常!
// TypeError: Invalid value used as weak map key
let wmk = {};
m.set(wmk, 'thinger'); // wmk → 'thinger'
m.get(wmk); // 'thinger'
m.has(wmk); // true
m.delete(wmk); // true
m.has(wmk); // false
已经实现WeakMap的浏览器: Firefox 18+, Chrome 24+.
Harmony
Collections
Nicholas Zakas的这篇文章有关于WeakMap更详细的介绍.
译者注:我翻译过尼古拉斯的这篇文章:[译]ECMAScript
6中的集合类型,第三部分:WeakMap
代理(Proxy)API允许你创建一个属性值在运行期间动态计算的对象.还可以利用代理API"钩入"其他的对象,实现例如打印记录和赋值审核的功能.
var obj = {foo: "bar"};
var proxyObj = Proxy.create({
get: function(obj, propertyName) {
return 'Hey, '+ propertyName;
}
});
console.log(proxyObj.Alex); // "Hey, Alex"
可以看看Nicholas Zakas的这篇文章和这个例子.
实现代理API的浏览器: Firefox 18+, Chrome 24+
译者注:作者不知道的是,一共有过两个代理API的提案,一个是旧的Catch-all
Proxies,一个是新的直接代理(Direct
Proxies).前者已被废弃.两者的区别在这里.V8(Chrome和Node.js)实现的是前者,Firefox18及之后版本实现的是后者(17及之前版本实现的是前者).尼古拉斯在2011年写的文章也应该是过时的.
Object.is是一个用来比较两个值是否相等的函数.该函数和===最主要的区别是在对待特殊值NaN与自身以及正零与负零之间的比较上.Object.is的判断结果是:NaN与另外一个NaN是相等的,以及+0和-0是不等的.
Object.is(0, -0); // false
Object.is(NaN, NaN); // true
0 === -0; // true
NaN === NaN; // false
实现了Object.is的浏览器: Chrome 24+
ES6
Shim
译者注:Object.is方法和严格相等===运算符的区别体现在ES标准内部就是SameValue算法和严格相等比较算法的区别.
译者注:如果我没有理解错这条BE的推特的话,Object.is要改名成为Object.sameValue了.
Array.from: 将参数中的类数组(array-like)对象(比如arguments, NodeList, DOMTokenList (classList属性就是这个类型), NamedNodeMap (attributes属性就是这个类型))转换成数组并返回,比如转换一个纯对象:
Array.from({
0: 'Buy some milk',
1: 'Go running',
2: 'Pick up birthday gifts',
length: 3
});
再比如转换一个DOM节点集合:
var divs = document.querySelectorAll('div');
Array.from(divs);
// [<div class="some classes" data-info="12"></div>, <div data-info="10"></div>]
Array.from(divs).forEach(function(node) {
console.log(node);
});
“ES6中JavaScript新特性有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。