V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
? Meteor
? JSLint - a JavaScript code quality tool
? jsFiddle
? D3.js
? WebStorm
推荐书目
? JavaScript 权威指南第 5 版
? Closure: The Definitive Guide
wilddog
V2EX  ?  JavaScript

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

  •  1
     
  •   wilddog · 2015-11-05 15:14:03 +08:00 · 2012 次点击
    这是一个创建于 3096 天前的主题,其中的信息可能已经有所发展或是发生改变。

    腾讯云最新优惠活动来了:云产品限时1折,云服务器低至88元/年 ,点击这里立即抢购:9i0i.cn/qcloud,更有2860元代金券免费领取,付款直接抵现金用,点击这里立即领取:9i0i.cn/qcloudquan

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

    QQ 截图 20151103202108.png

    作者: Lars Kappert
    原文: http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/
    译:王瑾南 陈万幸
    野狗官网: https://www.wilddog.com/
    野狗官博: https://blog.wilddog.com

    昨天因为标题问题被大家吐槽了,稍微修改一下。
    上一部分介绍了变量,这部分来介绍一下字符串和数组。

    字符串

    方法

    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]
      

    此文为译文,如有问题请加 QQ 群 105454604 联系群主

    1 条回复  ?  2015-11-06 10:12:02 +08:00
    hkongm
        1
    hkongm  
       2015-11-06 10:12:02 +08:00
    block
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2896 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 09:25 · PVG 17:25 · LAX 02:25 · JFK 05:25
    Developed with CodeLauncher
    ? Do have faith in what you're doing.


    http://www.vxiaotou.com