ECMAScriptES6初特色概览

箭头操作符

而您会C#要Java,你早晚懂得lambda表达式,ES6受新增的箭头操作符=>便产生异曲同工之帅。它简化了函数的题。操作符左边为输入的参数,而右手则是拓展的操作与返回的值Inputs=>outputs。
俺们知道当JS中回调是常常的从业,而貌似回调又盖匿名函数的样式出现,每次都需要写一个function,甚是累赘。当引入箭头操作符后得好地描写回调了。请圈下面的事例:

var array = [1,2,3];

// 传统写法
array.forEach(function(v) {
    console.log(v);
});

// ES6写法
array.forEach(v => console.log(v));

类似的支持

ES6遭上加了针对近似的支持,引入了class关
键字(其实class在JavaScript中一直是保留字,目的就是是考虑到或于其后的初本子中见面为此到,现在算派上用场了)。JS本身便是面向对象
的,ES6蒙提供的类实际上只有是JS原型模式之包裹。现在供原生的class支持后,对象的创造,继承更加直观了,并且父类方法的调用,实例化,静态方
法和构造函数等概念都愈形象化。

下面代码展示了看似以ES6遭到之运:

// 类的定义
class Animal {
    // ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    // 实例方法
    sayName() {
        console.log('My name is ' + this.name);
    }
}

// 类的继承
class Programmer extends Animal {
    constructor(name) {
        // 直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}

// 测试我们的类
var animal = new Animal('dummy'),
    wayou = new Programmer('wayou');
animal.sayName(); // 输出 'My name is dummy'
wayou.sayName(); // 输出 'My name is wayou'
wayou.program(); // 输出 'I'm coding...'

增强的对象字面量

靶字面量被提高了,写法更加简洁与活,同时于概念对象的时光会做的政工更多了。具体表现在:

  1. 好以目标字面量里面定义原型
  2. 定义方法可以免用function关键字
  3. 一直调用父类方法

这样一来,对象字面量与眼前提到的切近概念更加适合,在编辑面向对象的JavaScript时尤其自在方便了。

// 通过对象字面量创建对象
var human = { 
    breathe() {
        console.log('breathing...');
    }
};
var worker = { 
    __proto__: human, // 设置此对象的原型为human, 相当于继承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe(); // 输出 'breathing...'

// 调用继承来的breathe方法
worker.breathe(); // 输出 'breathing...'

字符串模板

字符串模板相对简便易行好亮些。ES6备受允许用反引号 `
来创建字符串,此种植艺术创建的字符串里面可以分包由美元符号加花括号包裹的变量
${vraible}。如果您以了像C#对等后端强类型语言的说话,对是意义应该不见面生。

// 产生一个随机数
var num = Math.random();

// 将这个数字输出到console 
console.log(`your num is ${num}`);

解构

机关分析数组或对象被的价。比如要一个函数要回到多只价,常规的做法是返一个目标,将每个值做呢这目标的特性返回。但当ES6遇,利用解构这等同特色,可以直接回一个频繁组,然后数组中之值会自动为解析及相应接收该值的变量中。

function getVal() {
    return[1,2];
}
var [x,y] = getVal(), // 函数返回值的解构
console.log('x:' + x + ', y:' + y); // 输出:x:1, y:2
[name,,age] = ['wayou','male','secrect']; // 数组解构
console.log('name:' + name + ', age:' + age); //输出:name:wayou, age:secrect

参数默认值,不定参数,拓展参数

默认参数值

兹可在概念函数的时节指定参数的默认值了,而无用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name) {
    // 传统的指定默认参数的方式
    var name = name || 'dude';
    console.log('Hello ' + name);
}  
sayHello(); // 输出:Hello dude
sayHello('Wayou'); // 输出:Hello Wayou

// 运用ES6的默认参数
function sayHello2(name = 'dude') {
    console.log(`Hello${name}`);
}
sayHello2(); // 输出:Hello dude
sayHello2('Wayou'); // 输出:Hello Wayou

兵荒马乱参数

兵荒马乱参数是以函数中以命名参数同时接收不定数量的不命名参数。这无非是同栽语法糖,在此前的JavaScript代码中我们得以经过arguments变量来齐这无异目的。不定参数的格式是三只句点后及代表有不定参数的变量名。

随下面是事例中,…x代表了有着传入add函数的参数。

// 将所有参数相加的函数
function add(...x) {
    return x.reduce((m,n) => m+n);
}

// 传递任意个数的参数
console.log(add(1,2,3)); // 输出:6
console.log(add(1,2,3,4,5)); // 输出:15

开展参数

拓展参数则是其他一样种植样式的语法糖,它同意传递数组或者类数组直接开吧函数的参数而未用经过apply。

var people = ['Wayou','John','Sherlock'];

// sayHello函数本来接收三个单独的参数人一,人二和人三
function sayHello(people1, people2, people3) {
    console.log(`Hello${people1}, ${people2}, ${people3}`);
}

// 但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people); // 输出:Hello Wayou,John,Sherlock

// 而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null, people); // 输出:Hello Wayou,John,Sherlock

let与const 关键字

可以管let看成var,只是其定义的变量被限于了一定范围外才能够运用,而距离这限制虽然不算。const则甚直观,用来定义常量,即无法给再度改值的变量。

for (let i=0; i<2; i++) {
    console.log(i); // 输出: 0,1
}
console.log(i); // 输出:undefined,严格模式下会报错

for of 值遍历

咱俩且懂得for in循环用于遍历数组,类数组或对象,ES6备受新引入的for
of循环功能相似,不同之是历次循环它提供的匪是序号而是值。

var someArray = ["a","b","c"];
for (v of someArray) {
    console.log(v); // 输出 a,b,c
}

iterator, generator

  1. iterator:
    它是如此一个目标,拥有一个next方法,这个方式返回一个靶{done,value},这个目标涵盖两单特性,一个布尔项目的done和含任意值的value

  2. iterable:
    这是这般一个对象,拥有一个obj[@@iterator]主意,这个法返回一个iterator

  3. generator:
    它是同种异常的iterator。反的next方法可收到一个参数并且返回值取决与她的构造函数(generator
    function)。generator又具有一个throw方法

  4. generator函数:
    即generator的构造函数。此函数内足以利用yield关键字。在yield出现的地方得由此generator的next或throw方法向外传递值。generator
    函数是通过function*来声称的

  5. yield关键字:它好暂停函数的施行,随后可重上上函数继续执行

模块

于ES6规范中,JavaScript原生支持module了。这种以JS代码分割成不同功能的粗片进行模块化的定义是当有的叔在正式被流行起来的,比如CommonJS和AMD模式。

用不同作用的代码分别写于不同文件中,各模块只需要导出公共接口部分,然后通过模块的导入的不二法门得以当其余地方以。

// point.js
module "point" {
    export class Point {
        constructor(x,y) {
            public x=x;
            public y=y;
        }
    }
}

// myapp.js
// 声明引用的模块 
module point from "/point.js";

// 这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
import Point from "point";
var origin = new Point(0,0);
console.log(origin);

Map,Set 和 WeakMap,WeakSet

这些是新加底成团类型,提供了一发惠及之获取属性值的主意,不用像以前一样用hasOwnProperty来检查有属性是属于原型链上的呢还是脚下目标的。同时,在展开属性值添加与博时有专门的get,set方法。

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

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

偶尔我们会管对象作为一个靶的键用来存放在属性值,普通集合类型比如简单对象见面阻止垃圾回收器对这些当属性键存在的靶子的回收,有导致内存泄漏的责任险。而WeakMap,WeakSet则进一步安全把,这些当属性键的目标要没有别的变量在援它,则会为回收释放掉,具体还看下的例子:

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

// Weak Sets
var ws = new WeakSet();
ws.add({data: 42}); // 因为添加到ws的这个临时对象没有其他变量引用它,所以ws不会保存它的值,也就是说这次添加其实没有意思

Proxies

Proxy可以监听目标身上发生了什么业务,并于这些事情时有发生后实施有对应的操作。一下子吃咱对一个目标来矣那个强的追踪能力,同时在数额绑定方面呢异常有因此处。

// 定义被侦听的目标对象
var engineer = {name: 'Joe Sixpack', salary: 50};

// 定义处理程序
var interceptor = {set: function(receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
    }
};

// 创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60; // 控制台输出:salary is changed to 60

面代码我一度加以了诠释,这里越解释。对于处理程序,是在叫侦听的靶子身上产生了相应事件后,处理程序里面的不二法门就会见受调用,上面例子中我们装了set的处理函数,表明,如果我们侦听的目标的性能让改动,也就算是让set了,那这个处理程序就见面吃调用,同时经过参数能够意识到是孰属性为转,更改为什么价。

Symbols

咱们解对象实际是键值对的会师,而键通常来说是字符串。而现行除了字符串外,我们尚足以据此symbol这种值来做为对象的键。Symbol是平等栽
基本类型,像数字,字符串还有布尔同一,它不是一个目标。Symbol
通过调用symbol函数产生,它接受一个可选的名字参数,该函数返回的symbol是绝无仅有的。之后就是好用此返回值做啊目标的键了。Symbol还可以为此来创造私有属性,外部无法直接看由symbol做为键的属于性值。

(function() {
    // 创建 symbol
    var key = Symbol("key");
    function MyClass(privateData) {
        this[key] = privateData;
    }
    MyClass.prototype = {
        doStuff: function() {
            ...this[key]...
        }
    };
})();
var c = new MyClass("hello");
c["key"] === undefined //无法访问该属性,因为是私有的

Math,Number,String,Object 的新API

对Math,Number,String还起Object等续加了不少初的API。

// Number
// 不同的两个Number之间的最小的差
Number.EPSILON

// 判断是否是整数
Number.isInteger(Infinity) // false

// 判断是否为非数字
Number.isNaN("NaN") // false

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

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

// Array
// 将一个类数组对象或可迭代对象转换成真实的数组
Array.from(document.querySelectorAll('*'))

// 将它的任意类型的多个参数放在一个数组里并返回
Array.of(1,2,3)

// 将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值
[0,0,0].fill(7,1) // [0,7,7]

// 用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1
[1,2,3].findIndex(x => x == 2) // 1

// 返回一个 Array Iterator 对象,该对象包含数组中每一个索引的键值对
["a","b","c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]

// 返回一个数组索引的迭代器
["a","b","c"].keys() // iterator 0, 1, 2

// 返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值
["a","b","c"].values() // iterator "a", "b", "c"

// Object
Object.assign(Point, {origin: new Point(0,0)})

Promises

Promises是拍卖异步操作的平种植模式,之前以诸多老三正库中出落实,比如jQuery的deferred
对象。当您发起一个异步请求,并绑定了.when(),
.done()等事件处理程序时,其实就是以利用promise模式。

// 创建 promise
var promise = new Promise(function(resolve,reject) {
    // 进行一些异步或耗时操作
    if(/*如果成功 */) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});

// 绑定处理程序
promise.then(function(result) {
    // promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
    // promise失败会执行这里
    console.log(err); // Error: "It broke"
});

资料

  1. 上面的ES6代码都得以于这边展开换:ES6转ES5
  2. 阮一峰先生的ECMAScript 6入门
  3. 更详细的牵线,到此处MDN