es6新增属性学习

*本文只是自己学习es6的一些笔记，其中大多数并非自己的观点，引用很多大神所总结的东西，所以也并没有放在博客上面，如果看到了类似的文章，请不要吐槽啦
主要引用了一篇大神的博客以及MDN上的一些的东西

---

1.箭头操作符号

---

es6之前

function foo(args) {return result;
}

es6

foo = (args) => {reuslt}

参数只有一个时，可以省略，同样后面的大括号也可以省略

2.类的支持

类的支持主要是class以及constructor的引入,同时还支持继承机制

class Person{constructor(name,age) {this.name = name;this.age = age;}sayHello = () => console.log("hello, I am " + this.name);
}
class Student extend Person{constructor(name,age,code) {this.code = code;super(name,age);}doHomeWork = type => {console.log(this.name is + " doing " + type + " homework");}
}

3.增强的对象字面量

es6对象字面量支持定义原型、定义方法的时候可以省略function关键字、可直接调用父类的所有方法

var Person = {talk() {console.log("talking");}
}var worker = {prototype: Person,name: 'licheng',work() {console.log("working");}
}

4.字符串的操作升级,字符串模板的使用

使用 ` 符号定义字符串，${} 方式取值， `  对应的是‘~’的那个，不加shift键

var str = 12;
var str2 = "45";console.log(`this is a ${str} and length less ${str2}`);//输出 this is a 12 a length less 45

5.解构

字面意思，解析数组的或者对象的值
函数多返回值应用，数组不同类型间的赋值

var [x,y] = getVal(), [name,,age] = ['licheng','male','10'];
getVal = () => [1,2];console.log("x:" + x", y:" + y); // x:1, y:2
console.log(name + ", " + age); // licheng, 10

6.参数默认值，不定参数，拓展参数

6.1 默认参数

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

6.2不定参数

不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的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

7.let 与 const 关键字

与 var 不相同，let 定义的变量只能在特定范围使用

var v1 = 12
if(v1 == 12) {let v2 = 12}
console.log(v2);//抛错 v2 is not defined

const 是定义常量，不可变
let 很适合用在 for 循环中

for(let index = 10; index < 20; index++) {}
console.log(index); //抛错 Uncaught ReferenceError: index is not defined

8.for of 值遍历

for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值

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

9.iterator, generator

因为自己是java出身，对这份都是按照java中的迭代器来理解,下面是引用他人想法

a.iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value

b.iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator

c.generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法

d.generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的

e.yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行

function *fibonacci(){let [ current, next ] = [ 0, 1 ];for(;;){//无限循环[ current, next ]= [ next, current + next ];yield current;//本次调用函数结束之后不会继续运行，暂停，待下一次迭代调用的时候继续执行}
}

以上带*号的函数返回的是一个迭代器对象Generator(Generator.prototype.next()、Generator.prototype.return()、Generator.prototype.throw())，通过next获取一次迭代，返回的是一个对象，通过value获取真正的值

//这个例子来自MDN官网，看起来更直观
function* idMaker(){var index = 0;while(true)yield index++;
}var gen = idMaker(); // "Generator { }"console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

10.Module 模块

es6中原生支持了模块，像之前流行的一些第三方规范CommonJs 以及 AMD
原理是将不同功能的代码分别写在不同文件中，个模块之需要导出功能接口部分，然后通过导入的方式在其他地方使用

详情查看MDN中关于Module的东西
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

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

在point.js中创建一个point 模块之后将其Point暴露出来
myapp.js中通过

import defaultMember from “module-name”;

的形式来进行引用，感觉这个地方就像java 的包导入
MDN中模块的语法有以下几种形式

import defaultMember from “module-name”;
import * as name from “module-name”;
import { member } from “module-name”;
import { member as alias } from “module-name”;
import { member1 , member2 } from “module-name”;
import { member1 , member2 as alias2 , […] } from “module-name”;
import defaultMember, { member [ , […] ] } from “module-name”;
import defaultMember, * as name from “module-name”;
import “module-name”;

// --file.js--
function getJSON(url, callback) {let xhr = new XMLHttpRequest();xhr.onload = function () { callback(this.responseText) };xhr.open("GET", url, true);xhr.send();
}export function getUsefulContents(url, callback) {getJSON(url, data => callback(JSON.parse(data)));
}// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {doSomethingUseful(data);
});
Specifications

11.新增集合 Map, Set, WeakMap, WeakSet

11.1Set 集合对象的实例都是继承自Set.prototype

可进行添加、删除、检测、遍历(迭代)等操作

MDN 详情 Set

同时 undefined 和 NaN 可以被存储在Set集合中

var mySet = new Set();mySet.add(1);
mySet.add(5);
mySet.add("some text");mySet.has(1); // true
mySet.has(3); // false, 3还没有被添加到set中
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // truemySet.size; // 4mySet.delete(5); // 从set中移除5
mySet.has(5);    // false, 5已经被移除mySet.size; // 3, 我们刚刚移除了一个值for (let item of mySet) console.log(item);// 按顺序输出：1, "some text" 
for (let item of mySet.keys()) console.log(item);// 按顺序输出：1, "some text" 
for (let item of mySet.values()) console.log(item);// 按顺序输出：1, "some text" 
//(键与值相等)
for (let [key, value] of mySet.entries()) console.log(key);// 转换Set为Array (with Array comprehensions)
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 替代方案(with Array.from)
var myArr = Array.from(mySet); // [1, "some text"]// 如果在HTML文档中工作，也可以：
mySet.add(document.body);
mySet.has(document.querySelector("body")); // true// Set和Array互换
mySet2 = new Set([1,2,3,4]);
mySet2.size; // 4
[...mySet2]; // [1,2,3,4]// 截取  
var intersection = new Set([x for (x of set1) if (set2.has(x))]);// 用forEach迭代
mySet.forEach(function(value) {console.log(value);
});// 1
// 2
// 3
// 4

11.2 Map 集合对象的实例都是继承自 Map.prototype

主要用法有

/*使用映射对象*/
var myMap = new Map();var keyObj = {},keyFunc = function () {},keyString = "a string";// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");myMap.size; // 3// 读取值
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"myMap.get("a string");   // "和键'a string'关联的值"// 因为keyString === 'a string'
myMap.get({});           // undefined, 因为keyObj !== {}
myMap.get(function() {}) // undefined, 因为keyFunc !== function () {}//将NaN作为映射的键
var myMap = new Map();
myMap.set(NaN, "not a number");myMap.get(NaN); // "not a number"var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"//for..of方法迭代映射
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {console.log(key + " = " + value);
}
// 将会显示两个logs。一个是"0 = zero"另一个是"1 = one"for (var key of myMap.keys()) {console.log(key);
}
// 将会显示两个logs。 一个是 "0" 另一个是 "1"for (var value of myMap.values()) {console.log(value);
}
// 将会显示两个logs。 一个是 "zero" 另一个是 "one"for (var [key, value] of myMap.entries()) {console.log(key + " = " + value);
}
// 将会显示两个logs。 一个是 "0 = zero" 另一个是 "1 = one"

weakMap 以及weakSet 的设计主要解决有时GC无法回收没有被使用的变量或者引用对象的时候，两者相对较安全

12.Proxy 代理对象

建议直接看MDN官方API

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

13.Symbol

此处直接看知乎方方大神的文章，相当详细

「每日一题」JS 中的 Symbol 是什么？

14.Math，Number，String，Object 的新API

对Math,Number,String还有Object等添加了许多新的API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // falseMath.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2"abcde".contains("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) })

15.Promise

看一下两个地方的介绍

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

---

https://segmentfault.com/a/1190000006510526#articleHeader0

Reference

*http://www.cnblogs.com/Wayou/p/es6_new_features.html#home

---

*https://developer.mozilla.org/zh-CN/

---

*https://segmentfault.com/a/1190000006510526#articleHeader0

---

*http://www.cnblogs.com/yezhang/p/es6_yield.html