你可能已经听说过ECMAScript 6,JavaScript的下一个版本,它有一些非常棒的新功能。这些功能略微复杂,在简单的脚本和复杂的应用中都可以使用。在这篇文章中,我们将挑选一些ES6的功能进行讨论,你可以在日常JavaScript编码中使用它们。

需要注意的是,当前的各种浏览器对ES6的这些新功能的支持各不相同。

下面的很多代码样本下都带有“run this code”的链接,可以看到这些代码并直接使用它。

变量

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

通常1在使用的时候,例如,J 变量为在同一作用域内的另一迭代。但是对于 LET 变量,你可以放心的再一次声明 I 变量,因为他只能在自己限定的范围内定义和使用。

CONST

还有另外一种方式来声明块级作用域的变量: const ,使用const 变量赋值时,是一个只读引用。你必须直接声明一个变量。如果你改变变量,或者你没有立即赋值,就会报错:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

需要注意的是,你仍然可以更改对象属性或者数组成员:

const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool

箭头函数

箭头函数对于JS来说,是一个伟大的功能,它可以使代码更简短。我们在比较早的时候将箭头函数引入,这样就可以在后面使用它了。下面的代码片段展示了箭头函数,以及在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关键字,只有0个或多个参数、“=>”和函数表达式。

return是默认就有的。而且,没有参数或者多于一个参数时,你必须使用括号。

// No argumentsbooks.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一样丑陋的语句,不需要把函数绑定到正确的上下文中。下面是一个例子:

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,将一个类数组对象或可迭代对象转换成真实的数组。示例:

  • arguments中传入一个函数;
  • getElementsByTagName()返回节点列表;
  • 新的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, 7, 0]

MATH

Math对象中采用了一些新的方法。

  • sign把一个数字符号返回为1,-1或0。
  • trunc 返回参数的整数部分。
  • cbrt返回一个数的立方根。
Math.sign(5); // 1
Math.sign(-9); // -1 Math.trunc(5.9); // 5
Math.trunc(5.123); // 5 Math.cbrt(64); // 4

  

传播操作符

传播操作符(…)是一种在特定时间为扩展数组元素而采取的非常实用的句法,例如在处理函数调用中参数的时候。可能最能展示其实用性的方法就是举例。

首先,让我们来看看如何在另一组数组中拓展某一数组中的元素:

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});

  

此文摘抄于http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

ECMAScript 6(ES6)有什么新东西的更多相关文章

  1. ES6 有什么新东西

    ES6 有什么新东西? 你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本 ...

  2. ECMASCRIPT 6中字符串的新特性

    本文将覆盖在ECMAScript 6 (ES6)中,字符串的新特性. Unicode 码位(code point)转义 Unicode字符码位的长度是21位[2].而JavaScript的字符串,是1 ...

  3. [翻译] 预览 C# 10 的新东西

    原文: [Introducing C# 10] 作者: Ken Bonny ​ 本周早些时候(译注:原文发表于5月1日),我关注了 Mads Torgersen 在 DotNet SouthWest ...

  4. 什么新东西值得学「GitHub 热点速览 v.22.29」

    上周 18k+ 的项目 bun 这周又获得 7k+ star,是时候了解下它背后的编程语言 zig 了,它并不是一门新的语言,伴随着 bun 的风靡,zig 本周也上了 GitHub 热榜.同样,可以 ...

  5. [译] jQuery 3 有哪些新东西

    转自:https://github.com/cssmagic/blog/issues/59 jQuery 的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的.jQuery 提供了极为友好 ...

  6. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

  7. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  8. ECMAScript 5和ECMAScript6的新特性以及浏览器支持情况

    ECMAScript简介: 它是一种由Ecma国际(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范,javascript在它基础上经行了自己的封装.但通常来说,术语ECMAScript和java ...

  9. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

随机推荐

  1. 什么叫session和cookie-及其设置

    http的无状态? 保持状态, 是指当程序关闭后重启, 上一次操作的历史还能继续, 保持的. 如word中的 "选项"设置. 如windows系统的设置等等. http的设计目的, ...

  2. JavaScript常用技术总结!~~

    //如果当前窗口不是最外层窗口,把最外层窗口链接改成当前窗口 if (window != top) top.location.href = location.href; //value值移入消失 $( ...

  3. [Linux & SVN] SVN介绍及Linux下SVN命令收录

    1. SVN是什么? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移 ...

  4. 如何使用C自带的qsort快速排序

    / you can write to stdout for debugging purposes, e.g. // printf("this is a debug message\n&quo ...

  5. (转载)robots.txt写法大全和robots.txt语法的作用

    1如果允许所有搜索引擎访问网站的所有部分的话 我们可以建立一个空白的文本文档,命名为robots.txt放在网站的根目录下即可.robots.txt写法如下:User-agent: *Disallow ...

  6. wdcp安装memcached解决办法

    1.下载libevent-1.4.14b-stable.tar.gz和memcached-1.4.15.tar.gz这两个文件,上传到服务器,并给它一个可用的下载地址, 如http://地址/memc ...

  7. jQuery-H5-css3转盘抽奖-遁地龙卷风

    (-1)写在前面 这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...

  8. MineCraft note

    客户端:http://pan.baidu.com/s/1hqgS8sshttp://pan.baidu.com/s/1mgmkduC 材质包:R3D小地图MODCraftGuide mod 内置合成表 ...

  9. edghasdz

    匹配2016年10月8日19时51分50秒匹配 可以使用

  10. [正则表达式]PCRE反向分组引用

    在常见的文本匹配场景上,经常会需要用到一些像HTML这样的嵌套标签类型的文本匹配,经过多翻折腾,拼凑出了这样的一条语句 (<([\w]+)>((?1)|[\w\s])*</\2> ...