仓库源文，站点原文

title: ECMAScript 6入门 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs
• ES6 date: 2014-05-02 09:42:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/05/02/ecmascript6-overview.html from: 博客园

> const PI = 3.14;> Object.getOwnPropertyDescriptor(window, PI)
Object {value: 3.1415, writable: false, enumerable: true, configurable: false}

num[1..3] = ["hello", "i'am", "Barret Lee"]

var [x, y, z] = ["hello", "i'am", "Barret Lee"];

var { foo, bar } = { foo: "Barret", bar: "Lee" };

var a1 = [1, 2, 3, 4];
var a2 = [i * 2 for (i of a1)];

a2 // [2, 4, 6, 8]

var a1 = [1, 2, 3, 4];
var a2 = a1.map(function (i) { return i * 2 });

alert("𠐀".length); //2

var s = "𠐀二";
s.codePointAt(0);

#\u{10000}

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

var x = 1;
var y = 2;
console.log(`${ x } + ${ y } = ${ x + y}`)
// "1 + 2 = 3"

<div id="test">
  <x-from>DOM文档</x-from>
  <x-name>test元素</x-name>
</div>

<template id="temp">
  我是来自 <strong><content select="x-from"></content></strong>
  中的 <strong><content select="x-name"></content></strong>
  的数据。
</template>

<script>
var root = test.webkitCreateShadowRoot();
root.appendChild(document.importNode(temp.content));
</script>

<h3>五、数值的扩展</h3>

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

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

obj.__proto__ = otherObj;

var isIE = "__proto__" in {} ? false : true;

var name = "my name";
var Me = {
    [name]: "Barret Lee",
    "name": "李靖"
};
Me[name]       // "Barret Lee"
Me["my name"]  // "Barret Lee"
Me["name"]     // "李靖"

var plain = {
    name : "Barret Lee"
};
var proxy = new Proxy(plain, {
    get: function(target, property) {
        return property in target ? target[property] : "我擦";
    }
});

proxy.name // "Barret Lee"
proxy.title // "我擦"

var f = (a, b) => {return a + b};

var items = new Set([1,2,3,4,5,5,5,5]);

for (i of s) {console.log(i)}
// 2 3 4 5

var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

<h4>2. Map</h4>

var m = new Map();

o = {p: "Hello World"};

m.set(o, "content")

console.log(m.get(o))
// "content"

function idMaker(){
    var index = 0;

    return {
       next: function(){
           return {value: index++, done: false};
       }
    }
}

var it = idMaker();

it.next().value // '0'
it.next().value // '1'
it.next().value // '2'

for (var n of it) {
  if (n > 5)
    break;
  console.log(n);
}

<h3>九、Generator 函数</h3>

function * foo( input ) {
    var res = yield input;
}

function * foo( input ) {
  var res = yield input;
}

var g = foo(10);
g.next(); // { value: 10, done: false }
g.next(); // { value: undefined, done: true }

function* G() {
    yield 'Barret';
    yield 'Lee';
}

var g = G();
g.next(); // "Barret"
g.next(); // "Lee"
g.next(); // undefined
g.next(); // Error: Generator has already finished

class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '('+this.x+', '+this.y+')';
  }

}

class ColorPoint extends Point {

  constructor(x, y, color) {
    super(x, y); // same as super.constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color+' '+super();
  }

}

<h4>2. Module</h4>

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// main.js

import { area, circumference } from 'circle';

console.log("圆面积：" + area(4));
console.log("圆周长：" + circumference(14));

// main.js

module circle from 'circle';

console.log("圆面积：" + circle.area(4));
console.log("圆周长：" + circle.circumference(14));

// other.js
export * from 'circle';

<p>这个东西，很好用，可惜了，纯洁的 JS，被糟蹋成啥样了=. =</p>

<h3>十二、感谢</h3>

<p>本文的书写逻辑参考阮一峰的<a href="http://es6.ruanyifeng.com/" target="_blank">总结</a>，并参入了一些个人主观色彩，感谢前人栽树！</p>

<h3>十三、参考资料</h3>