ES6 有什么新东西
ES6 有什么新东西?
你可能已经听说过 ECMAScript 6 (简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很多很棒的新特性。这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用。在本文中,我们将讨论一些精心挑选的 ES6 特性,这些特性可以用于你日常的 Javascript 编码中。
请注意,当前浏览器已经全面展开对这些 ES6 新特性的支持,尽管目前的支持程度还有所差异。如果你需要支持一些缺少很多 ES6 特性的旧版浏览器,我将介绍一些当前可以帮助你开始使用 ES6 的解决方案。
文中大多数代码示例都带有“运行代码”链接,你可以查看代码并运行它。
变量
LET
你习惯于用 var 声明变量。现在你也可以用 let 了。两者微妙的差别在于作用域。var 声明的变量作用域为包围它的函数,而 let 声明的变量作用域仅在它所在的块中。
if(true) {
let x = 1;
}
console.log(x); // undefined
这样使得代码更加干净,减少滞留的变量。看看以下经典的数组遍历:
for(let i = 0, l = list.length; i < l; i++) {
// do something with list[i]
}
console.log(i); // undefined
举个例子,通常情况下,我们在同一作用域里使用变量 j 来完成另一个遍历。但是,现在有了 let,可以安全地再一次声明 i 变量。因为它只在被声明的块中有效。
CONST
还有另一个用于声明块作用域变量的方法。使用 const,你可以声明一个值的只读引用。必须直接给一个变量赋值。如果尝试修改变量或者没有立即给变量赋值,都将报错:
const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error
注意,对象的属性或数组成员还是可以改变的。
const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool
箭头函数
箭头函数为 Javascript 语言增色不少。它使得代码更简洁。我们早早地在本文中介绍箭头函数,这样就可以在后面的示例中加以利用了。以下代码片段是箭头函数和我们熟悉的 ES5 版本的写法:
let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];
let titles = books.map( item => item.title );
// ES5 equivalent:
var titles = books.map(function(item) {
return item.title;
});
如果我们观察箭头函数的语法,会发现其中并没有出现 function 关键词。只保留零或多个参数,“胖箭头”(=>)和函数表达式。return 声明被隐式加入。
带有零或多个参数时,必须使用括号:
// No arguments
books.map( () => 1 ); // [1, 1]
// Multiple arguments
[1,2].map( (n, index) => n * index ); // [0, 2]
如果需要写更多的逻辑或更多的空格,可以把函数表达式放在({...})块中。
let result = [1, 2, 3, 4, 5].map( n => {
n = n % 3;
return n;
});
箭头函数不单只是为了输入更少的字符,它们的表现也和一般函数不同。它继承了当前上下文的 this 和 arguments。这就意味着,你可以避免写 var that = this 这样丑陋的代码,也不需要把函数绑定到正确的上下文了。举例如下(注意对比 this.title 和 ES5 版本的 that.title 的不同):
let book = {
title: 'X',
sellers: ['A', 'B'],
printSellers() {
this.sellers.forEach(seller =>console.log(seller + ' sells ' + this.title));
}
}
// ES5 equivalent:
var book = {
title: 'X',
sellers: ['A', 'B'],
printSellers: function() {
var that = this;
this.sellers.forEach(function(seller) {
console.log(seller + ' sells ' + that.title)
})
}
}
字符串
方法
几个方便的方法被添加到 String 的原型中。其中大多数用于简化需要用 indexOf() 方法来解决的问题的复杂度,并达到同样的效果:
'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true
很简单但是很有效。添加了另外一个方便的用于创建重复字符串的方法:
'my '.repeat(3); // 'my my my '
模板字符串
模板字符串提供一个简洁的方式来实现字符串插值。你可能已经对这种语法很熟悉了;它基于美元符号和花括号 ${..}。模板字符串置于引号之中。以下是快速示例:
let name = 'John',
apples = 5,
pears = 7,
bananas = function() { return 3; }
console.log(`This is ${name}.`);
console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);
// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');
以上形式对比 ES5 仅仅是便于字符串拼接。事实上,模板字符串还可以用于多行字符串。记住空格也是字符串的一部分。
let x = `1...
2...
3 lines long!`; // Yay
// ES5 equivalents:
var x = "1...n" +
"2...n" +
"3 lines long!";
var x = "1...n2...n3 lines long!";
数组
Array 对象增加了一些新的静态方法,Array 原型上也增加了一些新方法。
首先, Array.from 从类数组和可遍历对象中创建 Array 的实例。类数组对象示例包括:
函数中的 arguments;
由 document.getElementByTagName() 返回的 nodeList;
新增加的 Map 和 Set 数据结构。
let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);
items.forEach(function(element) {
console.log(element.nodeType)
});
// A workaround often used in ES5:
let items = Array.prototype.slice.call(itemElements);
在上面的例子中,可以看到 items 数组拥有 forEach 方法,该方法是 itemElements 集合所不具备的。
Array.from 的一个有趣的特性是它的第二个可选参数mapFunction 。该参数允许你通过一次单独调用创建一个新的映射数组。
let navElements = document.querySelectorAll('nav li');
let navTitles = Array.from(navElements, el => el.textContent);
然后,我们可以使用 Array.of 方法,该方法的表现很像 Array 构造函数。它适合只传递一个参数的情况。因此 Array.of 是 new Array() 的更优选择。然而,更多的情况下,你会想使用数组字面量。
let x = new Array(3); // [undefined, undefined, undefined]
let y = Array.of(8); // [8]
let z = [1, 2, 3]; // Array literal
最后但同样重要的,有几个方法被添加到 Array 的原型上。我想 find 方法将会很受 Javascript 开发者欢迎。
find 返回回调返回 true 的第一个元素。
findIndex 返回回调函数返回 true的第一个元素的下标。
fill 用所给参数“覆盖”数组的元素。
[5, 1, 10, 8].find(n => n === 10) // 10
[5, 1, 10, 8].findIndex(n => n === 10) // 2
[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 0, 0]
Math
Math 对象新增了几个方法。
Math.sign 返回数字的符号,结果为 1、-1 或 0。
Math.trunc 返回无小数位的数字。
Math.cbrt 返回数字的立方根。
Math.sign(5); // 1
Math.sign(-9); // -1
Math.trunc(5.9); // 5
Math.trunc(5.123); // 5
Math.cbrt(64); // 4
如果你想学习更多 ES6 中的 number 和 math 新特性, Dr. Axel Rauschmayer将为你解答。
扩展操作符
扩展操作符(...)这个语法用于特定地方扩展元素非常方便,例如函数调用中的参数。让你了解它们用途的最好方法就是举例子了。
首先,我们看看如何在一个另数组中扩展一个数组的元素。
let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]
// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...
扩展语法在传参数调用函数时也非常有用:
let values = [1, 2, 4];
doSomething(...values);
function doSomething(x, y, z) {
// x = 1, y = 2, z = 4
}
// ES5 equivalent:
doSomething.apply(null, values);
正如你所看到的,该语法让我们免去通常使用 fn.apply() 的麻烦。它非常灵活,因为扩展操作符可以用在参数列表中的任意位置。这意味着以下调用方式会产生一样的结果:
let values = [2, 4];
doSomething(1, ...values);
我们已经把扩展操作符应用在数组和参数中。事实上,它可以用在所有的可遍历对象中,例如一个 NodeList:
let form = document.querySelector('#my-form'),
inputs = form.querySelectorAll('input'),
selects = form.querySelectorAll('select');
let allTheThings = [form, ...inputs, ...selects];
现在, allTheThings 是一个包含 <form> 节点、 <input> 子节点和 <select> 子节点的二维数组。
解构
解构提供了一个方便地从对象或数组中提取数据的方法。对于初学者,请看以下数组示例:
let [x, y] = [1, 2]; // x = 1, y = 2
// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];
使用这个语法,可以一次性给多个变量赋值。一个很好的附加用处是可以很简单地交换变量值:
let x = 1,
y = 2;
[x, y] = [y, x]; // x = 2, y = 1
解构也可以用于对象。注意对象中必须存在对应的键:
let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2
你也可以使用该机制来修改变量名:
let obj = {x: 1, y: 2};
let {x: a, y: b} = obj; // a = 1, b = 2
另一个有趣的模式是模拟多个返回值:
function doSomething() {
return [1, 2]
}
let [x, y] = doSomething(); // x = 1, y = 2
解构可以用来为参数对象赋默认值。通过对象字面量,可以模拟命名参数:
function doSomething({y = 1, z = 0}) {
console.log(y, z);
}
doSomething({y: 2});
参数
默认值
在 ES6 中,可以定义函数的参数默认值。语法如下:
function doSomething(x, y = 2) {
return x * y;
}
doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15
看起来很简洁,对吧? 我肯定你之前在 ES5 中曾经需要给某些参数赋默认值:
function doSomething(x, y) {
y = y === undefined ? 2 : y;
return x * y;
}
传递 undefined 或不传参数时都会触发参数使用默认值。
REST参数
我们已经学习了省略号操作符。剩余参数和它很类似。它同样是使用 ... 语法,允许你把末尾的参数保存在数组中:
function doSomething(x, ...remaining) {
return x * remaining.length;
}
doSomething(5, 0, 0, 0); // 15
模块
模块当然是一个受欢迎的 Javascript 语言新功能。我想仅仅是这个主要特性就值得我们投入到 ES6 中来。
当前任何重要的 Javascript 项目都使用某种模块系统 —— 可能是“展示模块模式”或其他 AMD 或 CommonJS 扩展形式的东西。然而,浏览器并没有任何模块系统特性。为了实现 AMD 或 CommonJS,你通常需要一个构建步骤或加载器。解决这个问题的工具包括 RequireJS、Browserify 和 WebPack。
ES6 规范包含模块化的新语法和加载器。如果你未来想使用模块,应该使用这个语法。现代构建工具支持这种形式(可能通过插件),所以你可以放心使用。(不用担心 —— 我们将在后面的“转译”章节中讨论)
在 ES6 的模块语法中。模块设计围绕 export 和 import 关键词。现在让我们看一个包含两个模块的例子:
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import { sum, pi } from "lib/math";
console.log('2π = ' + sum(pi, pi));
正如你所见,可以存在多个 export 声明。每一个都要明确地指明输出值的类型(本例中的 function 和 var)。
本例中的 import 声明使用一种语法(类似解构)来明确定义被导入的内容。可以使用 * 通配符,结合 as 关键词给模块提供一个本地名称,把模块当成一个整体导入。
// app.js
import * as math from "lib/math";
console.log('2π = ' + math.sum(math.pi, math.pi));
模块系统有一个 default 输出。它可以是一个函数。只需要提供一个本地名称就可以导入这个默认值(即无解构):
// lib/my-fn.js
export default function() {
console.log('echo echo');
}
// app.js
import doSomething from 'lib/my-fn';
doSomething();
请注意 import 声明是同步的,但是模块代码需在所有依赖加载完后才会运行。
类
类是 ES6 中备受热议的一个特性。一部分人认为它不符合 Javascript 的原型特性,另一部分人认为类可以降低从其他语言转过来的入门门槛,并帮助人们构建大规模应用。不管怎样,它是 ES6 的一部分。这里我们快速介绍一下。
类的创建围绕 class 和 constructor 关键词。以下是个简短的示例:
class Vehicle {
constructor(name) {
this.name = name;
this.kind = 'vehicle';
}
getName() {
return this.name;
}
}
// Create an instance
let myVehicle = new Vehicle('rocky');
注意类的定义不是一般的对象,因此,类的成员间没有逗号。
创造一个类的对象时,需要使用 new 关键词。继承一个基类时,使用 extends:
class Car extends Vehicle {
constructor(name) {
super(name);
this.kind = 'car'
}
}
let myCar = new Car('bumpy');
myCar.getName(); // 'bumpy'
myCar instanceof Car; // true
myCar instanceof Vehicle; //true
从衍生类中,你可以使用从任何构造函数或方法中使用 super 来获取它的基类:
使用 super() 调用父类构造函数。
调用其它成员,举个例子,使用 super.getName() 。
还有更多关于类的内容。如果你想深入了解,我推荐 Dr.Axel Rauschmayer 的 《Classes in ECAMScript 6》
记号
记号是一个新的原生数据类型,像 Number 和 String 一样。你可以使用记号为对象属性创建唯一标识或创建唯一的常量。
const MY_CONSTANT = Symbol();
let obj = {};
obj[MY_CONSTANT] = 1;
注意通过记号产生的键值对不能通过 Object.getOwnPropertyNames() 获得,在 for...in 遍历、 Object.keys() 、JSON.stringify() 中均不可见。这是与基于字符串的键相反的。你可以通过 Object.getOwnPropertySymbols() 获取一个对象的记号数组。
记号与 const 配合很合适,因为它们都有不可改变的特性。
const CHINESE = Symbol();
const ENGLISH = Symbol();
const SPANISH = Symbol();
switch(language) {
case CHINESE:
//
break;
case ENGLISH:
//
break;
case SPANISH:
//
break;
default:
//
break;
}
你可以为 symbol 添加描述。虽然不可以通过描述获取 symbol,但是可用于代码调试。
const CONST_1 = Symbol('my symbol');
const CONST_2 = Symbol('my symbol');
typeof CONST_1 === 'symbol'; // true
CONST_1 === CONST_2; // false
想学习更多关于 symbols 的内容吗?Mozilla 开发者网络有一个关于该新的 symbol primitive 的文章。
转译
我们现在可以用 ES6 来写代码了。正如介绍中提到的,浏览器对 ES6 特性的支持尚不广泛,且各浏览器也各不相同。很有可能你写的的代码在用户的浏览器中不能完全解析。这就是我们为什么需要把代码转换成能在当前的任何浏览器中良好运行的旧版本 Javascript(ES5) 。这种转换通常称为“转译”。我们必须在应用中这么做,直到所有我们想兼容的浏览器都能运行 ES6 为止。
入门
转译代码并不难。你可以通过命令行直接转译代码,也可以把它作为 Grunt 或 Gulp 之类的任务管理器的插件包含进来。有很多转译解决方案,包括 Babel,Traceur 和 TypeScript。例如, 通过 Babel(之前的 “6to5”) 开始使用 ES6 的多种方式 。大多数 ES6 特性供你自由使用。
既然你对 ES6 充满热情和期待,为什么不开始使用它呢。根据你想使用的特性和需要兼容的浏览器或环境(比如 Node.js),你可能需要在工作流中引入转译器。如果你确定要使用它们,文件监听器和浏览器动态刷新器可以使你的编码体验更加流畅。
如果你是从零开始,你可能只想通过命令行转译代码(可以从 Babel CLI documentation 查看示例)。如果你已经使用任务运行器,如 Grunt 或 Gulp,你可以添加类似 gulp-babel 或 Webpack babel-loader 的插件。对于 Grunt,可使用 grunt-babel 和很多其他 ES6 相关 的插件。Browserify 的用户可能会想看看 babelify 。
大多数特性可以被转换成兼容 ES5 的代码且开销很小。其他的特性则需要额外处理(可由转译器提供),可能有性能损失。如果想把玩一下 ES6 并查看转译后的代码的样子,可以使用各种交互环境(也就是 REPL):
Traceur:网站 REPL
Babel: 网站 REPL
TypeScript:网站 REPL
ScratchJS(Chrome 扩展)
注意 TypeScript 不完全是一个转译器。它是一个类型化的 Javascript 超集,编译成 Javascript 代码。在其它特性中,它支持很多 ES6 特性,很像其他编译器。
所以,我究竟可以用什么?
总的来说,部分 ES6 特性几乎是可以“免费”使用的,比如模块,箭头函数,剩余参数和类。这些特性只需很小的开销就可以被转译成 ES5 。Array、String 和 Math 对象和原型的附加方法(如 Array.from() 和 "it".startsWith("you"))需要所谓的“polyfills”。Polyfills 是浏览器未原生支持的功能的临时补充。你可以先加载 profill,然后你的代码就可以在浏览器中运行,仿佛浏览器有这个功能一样。Babel 和 Traceur 都提供这种 polyfills。
可在Kangax 的 ES6 兼容性表格 中查看转译器和浏览器支持的 ES6 特性的完整概述。在写本文时,最新的浏览器已经支持 55% 到 70% 以上 ES6 特性了,看到这个真是鼓舞人心啊。Microsoft Edge、Google Chrome 和 Mozilla 的 Firefox 已经在这方面相互竞争了,这对 web 技术总体来说是非常好的。
就个人而言,可以轻松地使用模块、箭头函数和剩余参数之类的 ES6 新特性对于我的代码是一个极大的提高,是生产力的解放。既然我已经习惯了写 ES6 代码并转译成 ES5,随着时间的推移,更多的 ES6 的好处将会自然显现。
接下来呢?
一旦你安装了转译器,你可能新从 let 和箭头函数之类的“小”特性开始使用。记住原本就是用 ES5 写的代码将不会被转译器转译。当你使用 ES6 来提高你的代码,并且喜欢它时,你可以逐渐往你的代码中添加更多的 ES6 特性。或者把部分代码转换成新模块或类语法。我保证这样会很爽!
ES6 的内容比本文中所涉及的多得多。未涉及的特性包括 Map、Set、标签模板字符串、生成器、Proxy 和 Promise。让我知道你是否希望下篇文章涉及这些特性。不管怎样,我很高兴推荐 Axel Rauschmayer 博士写的覆盖所有 ES6 特性的《Exploring ES6》供深入研究。
结语
当浏览器不断添加新特性时, 通过使用转译器,你的所有代码被有效地“锁定”到 ES5 。所以,就算浏览器完全支持了某一个 ES6 特性,兼容 ES5 的版本将被使用,可能会性能更差 。你可以指望在某个点(在当时你需要兼容的浏览器和环境)上所有的 ES6 特性最终被支持。到那时,我们需要管理它们,选择性地防止 ES6 特性转译成 ES5,以减少性能开销。考虑这个因素,判断当前是否是开始使用(部分)ES6 的时候。部分公司认为是这样。
ps:转自前端大全!
ES6 有什么新东西的更多相关文章
- ECMAScript 6(ES6)有什么新东西
你可能已经听说过ECMAScript 6,JavaScript的下一个版本,它有一些非常棒的新功能.这些功能略微复杂,在简单的脚本和复杂的应用中都可以使用.在这篇文章中,我们将挑选一些ES6的功能进行 ...
- [翻译] 预览 C# 10 的新东西
原文: [Introducing C# 10] 作者: Ken Bonny 本周早些时候(译注:原文发表于5月1日),我关注了 Mads Torgersen 在 DotNet SouthWest ...
- 什么新东西值得学「GitHub 热点速览 v.22.29」
上周 18k+ 的项目 bun 这周又获得 7k+ star,是时候了解下它背后的编程语言 zig 了,它并不是一门新的语言,伴随着 bun 的风靡,zig 本周也上了 GitHub 热榜.同样,可以 ...
- 2.ES6引进的新特性——类Class
为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...
- [译] jQuery 3 有哪些新东西
转自:https://github.com/cssmagic/blog/issues/59 jQuery 的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的.jQuery 提供了极为友好 ...
- es6学习笔记--新数据结构Set,Map以及WeakSet,WeakMap
在javascript中,存储数据的方式大部分就是以数组或者对象形式存储的,es6出现了4种新集合Set,Map,WeakSet,WeakMap来存储数据,简化了编程. 集合--Set 类似于数组,但 ...
- [extjs5学习笔记]第三十七节 Extjs6预览版都有神马新东西
本文在微信公众号文章地址:微信公众号文章地址 本文地址:http://blog.csdn.net/sushengmiyan/article/details/45190485 [TOC] 在Ext JS ...
- 【翻译】Ext JS 6有什么新东西?
工具包ToolKits 发布 包的命名 Fashion 图表 ItemEdit插件 网格 电子表格 可操作模式Actionable Mode和可访问性 LazyItems插件 屏幕阅读器支持可访问性 ...
- 关于ES6的一些新特性的学习
一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...
随机推荐
- scrollview嵌套listview 滑动事件冲突的解决方法
listView.setOnTouchListener(new View.OnTouchListener() { @Override ...
- 各浏览器抗uaf机制
今年中旬,微软针对旗下ie浏览器中大量出现的uaf漏洞,对ie浏览器的安全机制进行了一个大幅度的升级,其中主要体现为隔离堆及延迟释放两个机制,顿时又将uaf漏洞的利用向上提升了一个大坎, 但是类似的对 ...
- 一个java覆盖的例子
// 覆盖class P{}class Q extends P{} class a{ static void m1(float x){ //静态方法不能被覆盖 System.out.println(& ...
- Spring常用工具类
Spring框架下自带了丰富的工具类,在我们开发时可以简化很多工作: 1.Resource访问文件资源: 具体有: ResourceUtils.getFile(url); FileSystemReso ...
- Swift3.0语言教程获取字符
Swift3.0语言教程获取字符 Swift3.0语言教程获取字符,在字符串中获取某一下标位置(下标索引)处的字符是很常见的功能,在NSString中使用character(at:)方法实现,其语法形 ...
- 快学Java NIO 续篇
可以先看Java NIO的整体介绍,这篇接着说以下内容,<快学Java NIO>续篇 FileChannel SocketChannel ServerSocketChannel Java ...
- Git常用命令举例
clone一个git project到本地 git clone https://github.com/huahuiyang/network-certification.git 到这个目录下,可以发现有 ...
- [转]crontab命令指南
原文链接:http://www.cnblogs.com/peida/archive/2013/01/08/2850483.html 前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划 ...
- CDOJ 1431 不是图论 Label:Tarjan || Kosarajn
Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Description 给出一个nn个点, ...
- java画图程序_图片用字母画出来
最近在研究怎样将图片用字母在文本编辑工具中“画”出来. 你看了这个可能还不知道我想说什么? 我想直接上图,大家一定就知道了 第一张:小猫 原图:http://www.cnblogs.com/hongt ...