公告 / Notice

  • 界面已全面升级(11/06)

    CSS & JS分别用SASS和Webpack编译,对资源进行了模块化处理;缓存规则使页面运行更快!

  • 移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

ES6新特性列举

看Babel官网,无意发现了ES6的新特性介绍。其中,大多数平时在项目中用过,这里,我想拿出几个不常用——至少是我没怎么用——的新特性(ES6出来这么多年了,感觉算是老特性了)来说说。

增强的对象字面量

ES5里,如果想给一个对象设置原型,可以用到__proto__属性。

ES6里,我们直接在字面量里声明:

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42
};

其中“Computed property name does not set prototype or trigger early error for ...”,我感觉有些不明确。

经过在Chrome Console运行测试,结果是后者覆盖前者,没报什么错误啊!

迭代器(Iterator)和ForOf

定义一个迭代器,可以有两种方法,其一是利用Symbol.iterator,基于对象字面量声明特殊方法(见下例);其二是结合生成器(Generator)。

先看第一个方法:

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

可以看到,我们在fibonacci对象上声明了一个方法,其键值为Symbol.iterator,方法返回一个持有next方法的对象,而next方法返回的是 { done: Boolean, value: Any } 这样的结构。

仅此而已!fibonacci就变成了一个Iterator。

而另一种方式:

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

这一次,Symbol.iterator映射的不是一个普通函数。带有*符号的函数被成为Generator函数。

对于Generator函数,其被执行后返回的是一个generator,它有三个方法:next、throw、return。你应该发现了,上面的那种定义方式其实就是在模仿生成器函数,具体做法就是构造相似的结构。

import

import在ES6中仅用于导入模块的命令吗?不是的!

它也是个函数,返回Promise,主要用于异步加载模块。

Binary and Octal Literals

数值的二进制表示和八进制字面量表示:

0b111110111 === 503 // true
0o767 === 503 // true

Math + Number + String + Object APIs

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll("*")) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })
发布于 2018年11月03日 22:58
阅读 12 可以 0