ES6 新特性

ES6

ES6的特性在chrome中默认是关闭的

Visit chrome://flags/#enable-javascript-harmony, enable this flag, restart Chrome

=> 箭头函数

var arr = [1, 2, 3];

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

// 使用箭头操作符
arr.forEach( v => console.log(v));

更多例子

// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

如果回调函数语句不止一行呢

// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});

// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});

for of

forEach有什么缺点呢

不能使用 break 语句来跳出循环，也不能使用 return 语句来从闭包函数中返回。总之 没有办法中止 forEach 循环 如果要中止，可使用 Array.every 或 Array.some

如果使用for in呢

for (var index in myArray) {
console.log(myArray[index]);
}

更不推荐 因为会遍历到其他属性上去

for of 它支持 break、continue 和 return 语句。

for (var value of myArray) {
console.log(value);
}

for-of 不仅仅是为数组设计，还可以用于类数组的对象，比如 DOM 对象的集合 NodeList

let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}

Class

// 类的定义
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\'am coding...');
}

// 静态方法
static LEVEL() {
console.log('LEVEL BAD!');
}
}

// 一些测试
var doggy=new Animal('doggy'),
larry=new Programmer('larry');
doggy.sayName(); // ‘My name is doggy’
larry.sayName(); // ‘My name is larry’
larry.program(); // ‘I'm coding...’
Programmer.LEVEL(); // ‘LEVEL BAD!’

解构赋值

function getVal() {
return [1, 2];
}

var [x, y] = getValue();
var [name, age] = ['larry', 26];
// 交换两个变量的值
var [a, b] = [1, 2];
[a, b] = [b, a];
console.log('a: ' + a + ', b: ' + b);

新增集合 Map, Set, WeakMap, WeakSet

Set是单纯的集合 很像数组

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

Map 很明显啦 key-value

var m = new Map();
m.set("hello", 42);
m.set(s, 34);  //这个s 是上面的set
m.get(s) == 34;

WeakSet

var ws = new WeakSet();
ws.add({ data: 42 });

WeakMap 简单的键/值映射.但键只能是对象值,不可以是原始值.

var wm1 = new WeakMap();
var o1 = {};
wm1.set(o1, 37);
wm1.get(o1); //37

Array.from

这里的links 是真的数组哟 具备 forEach() 函数

var links = Array.from(document.querySelectorAll("aside > a"));
for (var l of links) {
console.log(l.href);
}