ES6特性

ECMAScript6也被称为ECMAScript 2015，它是对JavaScript语言的一次非常重大的升级，主要包括以下新的特性：

arrows 箭头

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

关于 ES6

什么是你最喜欢的 ES6 特性：

箭头函数的好处

make our code more concise 使我们的代码更加简练
simplify function scoping and the this keyword 简化函数作用域和 this 关键字

使用箭头函数，我们不用在打 function 和 return 关键字

Basic Syntax with Mutiple Parameters 多个参数

Basic Syntax with One Parameters 一个参数

No Parameters 没有参数

Object Literal Syntax 字面量对象语法

关于 this 指针

call()、apply()、bind()这几个函数在arrow functions中不会改变this的值，如果你想要改变，可以使用function expression. Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming. 在 arrow functions 之前，this指针在不同的调用情况下，有不同的值

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0;

  setInterval(function growUp() {
    // In non-strict mode, the growUp() function defines `this` 
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    // 在非严格模式下，growUp 函数定义 `this` 为全局对象
    this.age++;
  }, 1000);
}

var p = new Person();

你可以通过that来修复：

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}

在 arrow functions 中，It does not create its own this context, 它没有创建属于它自己的 this 上下文，所以 this 有它自己的 original meaning from the enclosing context.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

在严格模式下，this指针被忽略：

var f = () => { 'use strict'; return this; };
f() === window; // or the global object

通过 call 和 apply 来调用，this 依然被忽略：

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // This would log to 2
console.log(adder.addThruCall(1)); // This would log to 2 still

No binding of arguments 不会绑定 arguments

还是它最原始的 arguments ：

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = (i) => arguments[0] + i; // foo's implicit arguments binding
  return f(2);
}

foo(1); // 3

Classes 类

支持基于原型的继承、父类调用、实例、静态方法和构造器

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Enhanced Object Literals 增强的`Object`常量

设置原型
foo:foo赋值的快捷写法
定义方法
调用父类方法
动态计算属性名字

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Template Strings 模板字符串

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

Destructuring

模式匹配，支持数组和对象

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

Default + Rest + Spread

默认参数

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

let就是新的var
const是常量

function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

Iterators + For..Of

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

Generators

Unicode

// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
  console.log(c);
}

Modules 模块化

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Module Loaders 模块加载器

Map + Set + WeakMap + WeakSet

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

Proxies

interception 拦截
object virtualization 对象虚拟化
logging/profiling 日志/性能分析

// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';
// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';

Symbols 符号

Symbols是一个新的基础类型

Subclassable Built-ins 内置对象可继承

Array、Date、DOM Element 可以被继承

Math + Number + String + Array + 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].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["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) })

Binary and Octal Literals

Promises

Reflect API

Tail Calls

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)

参考

es6features

Arrow functions

ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript

ES6特性

ES6特性

arrows 箭头

关于 ES6

箭头函数的好处

Basic Syntax with Mutiple Parameters 多个参数

Basic Syntax with One Parameters 一个参数

No Parameters 没有参数

Object Literal Syntax 字面量对象语法

关于 this 指针

No binding of arguments 不会绑定 arguments

Classes 类

Enhanced Object Literals 增强的`Object`常量

Template Strings 模板字符串

Destructuring

Default + Rest + Spread

Let + Const

Iterators + For..Of

Generators

Unicode

Modules 模块化

Module Loaders 模块加载器

Map + Set + WeakMap + WeakSet

Proxies

Symbols 符号

Subclassable Built-ins 内置对象可继承

Math + Number + String + Array + Object APIs

Binary and Octal Literals

Promises

Reflect API

Tail Calls

参考

results matching ""

No results matching ""

ES6特性

arrows 箭头

关于 ES6

箭头函数的好处

Basic Syntax with Mutiple Parameters 多个参数

Basic Syntax with One Parameters 一个参数

No Parameters 没有参数

Object Literal Syntax 字面量对象语法

关于 this 指针

No binding of arguments 不会绑定 arguments

Classes 类

Enhanced Object Literals 增强的Object常量

Template Strings 模板字符串

Destructuring

Default + Rest + Spread

Let + Const

Iterators + For..Of

Generators

Unicode

Modules 模块化

Module Loaders 模块加载器

Map + Set + WeakMap + WeakSet

Proxies

Symbols 符号

Subclassable Built-ins 内置对象可继承

Math + Number + String + Array + Object APIs

Binary and Octal Literals

Promises

Reflect API

Tail Calls

参考

results matching ""

No results matching ""

Enhanced Object Literals 增强的`Object`常量