ECMAScript 6(ES6)有什么新东西(二)

QQ截图20151126180120

作者:Lars Kappert

原文:http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

译:王瑾南  陈万幸

上一部分介绍了变量,这部分来介绍一下字符串和数组。

 

字符串

方法

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.');

Run this code

上面的示例相比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!";

Run this code

 

数组

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

Run this code

在上面的例子中可以看到,items 数组有foreach方法,但是itemelements是没有的。

Array.from有一个有趣的特点:第二个参数是可选参数mapfunction。这样就可以在调用时创建一个映射数组:

let navElements = document.querySelectorAll('nav li');
let navTitles = Array.from(navElements, el => el.textContent);

Run this code

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]

 

此文为译文,如有问题请留言并留下您的联系方式

 

知识共享许可协议
本站内容采用知识共享署名 4.0 国际许可协议进行许可。

热门文章:

扒一扒HTTPS网站的内幕

凭什么苹果设计师年赚110万,给产品和设计的一堂课

创业公司可以从坚果手机中学到的5点经验

ECMAScript 6(ES6)有什么新东西(一)

One thought on “ECMAScript 6(ES6)有什么新东西(二)

  • 2016年10月23日 at 上午11:54
    Permalink

    实例代码的UI样式有待提高。阮一峰的JavaScript标准教程里那种带有高亮的、缩进规范的版式比较符合大多数开发者阅读代码的习惯。

    Reply

发表评论

电子邮件地址不会被公开。