JS篇 ES6新特性

注意：

1. Node环境下，--harmony参数启用ES6新特性，这些新特性只有在strict mode下才生效，因此使用"use strict"或者--use_strict，否则harmony没有被启用；

2. Extended Mode: 当启用新特性的时候，context处于extended mode下；而且这些feature仅仅只在strict mode下有效；

 

1. let与const:

　　1. 块级作用域（Block scope）

　　2. let声明

　　3. const声明

// Block scope

function f1(){

    console.log("Outside.");

}

(function(){

    if(false){
　　　　 // f1定义在if {}之内

        function f1() {

            console.log("Inside.");

        }

    }

    f1();

}());

　　ES5中：

　　1. strict mode:　　　　 将会报错：In strict mode code, functions can only be declared at top level or immediately within another function.（函数只能声明在Glocal scope或者函数里的最外层）

　　2. non-strict mode: 　  输出："Inside"；

　　ES6中：

　　1. strict mode：　　　  输出："Outside"，（node环境下使用命令：node --harmony --use_strict 1_blockScope.js，使用node 1_blockScope.js --harmony命令，harmony没有起作用）

　　2. non-strict mode:　　输出："Inside"；（根据上面第一条：non-strict mode下不启用harmony）

　　因为ES6中，出现了块级作用域，导致上面的代码在ES6 context的strict mode中是有意义的；

 

　　let声明的变量，其作用域仅在块级作用域之内；

{

    let a = 1;

    var b = 2;

}

a

b

// ES6下：ReferenceError: a is not defined

// ES5下：SyntaxError: Illegal let declaration outside extended mode

　　因为let不会有变量提升，所以输出v1=5, i=10；个人感觉：之前共用函数作用域，现在增加了块级作用域不会增加内存占用吗？

function f1(){

    var list = [];

    for(var i=0; i<10; i++){

        let v1 = i;

        list.push(function(){

           console.log(v1, i);

        });

    }

    list[5]();　　// output: 5 10

}

f1();

　　IIFE的目的是说：定义的变量存在于函数作用域中，不在最外层Global，避免对Global的污染；基于这一目的，可以使用块级作用域来代替IIFE；

 

　　定义常量，node环境下，重新赋值报错：SyntaxError: Assignment to constant variable.

const PI = 3.14;

// SyntaxError: Assignment to constant variable.

//console.log(PI=3.13);

console.log(PI);

     

 

4. Destructing析构赋值

　　下面列出了析构的几个常用之处：1. 函数传参；2. 函数返回；3. 函数参数默认值；4. for..of遍历

// 1. Passing arguments

function f1({x, y}){

    console.log(arguments);

}

f1({x:"Hello", y:"Function"});





// 2. Accept function returns

var f1Ret = (function(){

    return {x: "hello", y:"function"};

})();

console.log(f1Ret);





// 3.Passing arguments with fixed arguments

function f1({x="hello", y="world"}){

    console.log(arguments);

}

f1({x:"Hi", y:"Function"});





// 4. for...of

var m1 = new Map();

m1.set("Hello", "World");

m1.set("Hi", "Map");



for(let [k, v] of m1){

    console.log(k, v);

}

5. Number扩展：

　　1. Number.isFinite()

　　2. Number.isNaN()

　　3. Number.isInteger()

"use strict";



/**

 * Number:

 * 1. Number.isFinite(), Number.isNaN()

 * 2. Number.isInteger

 *

 */



console.log("isFinite: ", Number.isFinite(Infinity), Number.isFinite(-Infinity), Number.isFinite(0));



console.log("isNaN: ", Number.isNaN(NaN));



//console.log("parseInt: ", Number.parseInt("13.00"));



console.log(Number.isInteger(3.01));

 

 

 

6. 数组扩展：

1. Array.from(...)   抽取Array-like对象或者Interable对象

2. Array.of(...)     将零散值转换为数组

3. array.fill()      填充

4. find(fn), findIndex(fn)

"use strict";



/**

 * Array:

 * 1. Array.from(...)   抽取Array-like对象或者Interable对象

 * 2. Array.of(...)     将零散值转换为数组

 * 3. array.fill()      填充

 * 4. find(fn), findIndex(fn)

 * 5. Array.observe()   监听

 */



var m1 = new Map();

m1.set("A").set("B");



var a1 = Array.from(m1);

console.log(a1);



console.log(Array.of(10, 20, 30));



console.log([null, null].fill(10));



var a2 = [10, 20];

console.log(a2.find(function (v, i) {

    return v == 10;

}), a2.findIndex(function (v, i) {

    return v == 10;

}));

 

7. 对象扩展:

　　1. Object.is

　　2. Object.assign

　　3. Object.getPrototype

　　4. Object.setPrototypeOf

/**

 * Object.is(o1, o2)    判断对象是否相等

 * Object.assign(target, src1, src2)

 * Object.getPrototype(obj)

 * Object.setPrototypeOf(o1, o2)

 * 将对象、方法直接写入对象

 */





console.log("Object.is(+0, -0): ", Object.is(+0, -0), +0 === -0);

console.log("Object.is(NaN, NaN): ", Object.is(NaN, NaN), NaN === NaN);



var o1 = { a1: "1st" };

var o2 = { a1: "2nd" };

var o3 = { a1: "3rd" };

console.log(Object.assign(o1, o2, o3));



console.log(Object.getPrototypeOf(o1) === Object.prototype);

//console.log(Object.setPrototypeOf({}, o1).a1);



var username = "diydyq";

var eat = new Function;

var o4 = {

    username,

    eat,

    o1,

    [username]: username 

};

// { username: 'diydyq', eat: [Function], o1: { a1: '3rd' } }

console.log(o4);

 

 

8. 函数扩展：

　　1. 参数默认值

　　2. Rest参数（将一系列实参映射到形参数组）

　　3. 扩展运算符（将数组实参映射到一系列逗号分隔的形参）

　　4. 箭头函数（this不可更改，arguments指向的不是自身的参数）

"use strict";

var l1 = [10, 20];



/**

 * 参数默认值

 */

var f1 = function (x="default argument") {

    console.log(x);

};

f1();

f1("specified argument");





/**

 * Rest参数：

 * 1. 将一系列实参转换为数组

 */

var f2 = function (name, ...left) {

    console.log(name, left, left instanceof Array);

};

f2("s1", "s2", "s3");



/**

 * 扩展运算符（spread）

 * 1. 将数组实参转换为一系列的形参

 */

var v3 = [10, 20, 30];

var f3 = function (v1) {

    console.log(v1, arguments);

};

f3(...v3);



Math.max.apply(null, v3);

Math.max(...v3);





/**

 * 箭头函数

 * 1. this 绑定了定义时的对象,call|apply却无法更改，为什么不应该呢？

 * 2. arguments变量可以使用，但不是该函数对应的参数,而是包含它的函数的参数

 */

var f1 = v => { console.log(v); };

l1.forEach(f1);



function f2Wrap(){

    var f2 = (v) => { console.log(this == global, arguments, v == arguments[0], v && Object.prototype.valueOf.call(v)); };

    f2();

    f2(l1);

    f2.call(l1, l1);

}



f2Wrap("Test");

 

9. Set与Map操作：

　　1. Set：不可重复的数组，可用于数组去重（属性：size；5个方法：set() get() has() delete() clear()）

　　2. Map: 存放的键名key不限于简单数据类型，支持对象作为键（属性：size；5个方法：set() get() has() delete() clear()，遍历：keys() values() entries()）

　　3. WeakMap: Traceur中暂不支持（TODO:待使用）；

"use strict";

var l1 = [10, 20, 30, 20];

var s1 = new Set(l1);



/**

 * Set对象：

 * 1. 1个属性： size

 * 2. 4个方法：add() delete() has() clear()

 */

console.log(s1, s1.size);

console.log(s1, s1.add(100).delete(10), s1.has(100), s1.size);

console.log(s1.map_);



console.log("-------------------------------------------------");



/**

 * Map对象：

 * 1. 1个属性：size

 * 2. 多个属性：set(), get(), has(), delete(), clear()

 * 3. m.set(k, v) 不同于 m[k] = v; 后者是给这个m对象赋值；

 */

var m1 = new Map();

var o1 = { attr1: "Test" };

var o2 = [10, 20];



m1[o1] = "Value for o1";

m1.set(o1, "Value for o1 new1");

m1.set(o2, "ValueFor o2");



console.log(m1, m1[o1], m1.get(o1), m1.has(o1), m1.delete({}));

console.log(m1);

m1.clear();



m1[0] = "Value for 0";

m1.set(0, "Value, for 0 new1");

console.log(m1[0], m1.get(0), m1, m1.size);





for(let k of m1.keys()){

    console.log(k);

}

for(let v of m1.values()){

    console.log(v);

}

for(let [k, v] of m1.entries()){

    console.log(k, v);

}



/**

 * WeakMap对象：

 * TODO：traceur中找不到

 *

 */

//var wm1 = new WeakMap();

//wm1.set(o1, "Value for o1");

//wm1.set(o2, "Value for o2");

//console.log(wm1.size);

 

11 Generator函数：

　　1. 每次yield或者return返回新的对象：{ value: ..., done: false|true }　　
　　2. return后再次调用next()返回空的value对象： { value: undefined, done: true }
　　3. next()传参：
　　　　1) 第一次next传递参数，会报错：ModuleEvaluationError: Sent value to newborn generator
　　　　2) 所以如果第一次需要传参，可以在生成generator时添加；
　　　　3) 后续的next参数，将作为yield表达式的返回值

"use strict";



/**

 * Generator:

 * 1. 每次yield或者return返回新的对象：{ value: ..., done: false|true }

 * 2. return后再次调用next()返回空的value对象： { value: undefined, done: true }

 * 3. next()传参：

 *    1) 第一次next传递参数，会报错：ModuleEvaluationError: Sent value to newborn generator

 *    2) 所以如果第一次需要传参，可以在生成generator时添加；

 *    3) 后续的next参数，将作为yield表达式的返回值

 */

function* generatorFrom1(arg1){

    console.log("Execute generator: ", arg1);

    var o1 = {};

    for(var i=0; i<2; i++){

        o1.idx = i;

        var yRet = yield o1;

        console.log("yield Return: ", yRet);

    }

    return o1;

}



var g1 = new generatorFrom1(), g2 = new generatorFrom1("First time execution.");

var r1, r2;



r1 = g1.next();

r2 = g1.next();

console.log(r1, r2, r1 == r2);

console.log(g1.next(), g1.next());



console.log("----------------------------------");

console.log("Execute 1: start");

r1 = g2.next();

console.log("Execute 1: end");



console.log("Execute 2: start");

r2 = g2.next("argument Test");

console.log("Execute 2: end");

console.log(r1, r2);

 

12 Promise:

　　1. Promise的构造函数必须为function，否则TypeError；

　　2. catch(fn)用于处理reject的信息；

　　3. 如果让下一个执行resolve，则return；否则拒绝的话，使用throw new Error()

　　4. Promise.all()参数是一个数组，不是零散的promise对象

"use strict";



/**

 * Promise:

 * 1. Promise的构造函数必须为function，否则TypeError；

 * 2. catch(fn)用于处理reject的信息；

 * 3. 如果让下一个执行resolve，则return；否则拒绝的话，使用throw new Error()

 * 4. Promise.all()参数是一个数组，不是零散的promise对象

 * 5. async功能未成功试用

 */



var fn1 = function(resolve, reject){

    setTimeout(function () {

        console.log("Execute promise function");

        resolve("Resoved Message");

        //reject("Rejected Message");

    }, 1000);

};



//var p1 = new Promise(fn1);

var p1 = new Promise(fn1);



p1.then(function (msg) {

    console.log("1st resolve: ", arguments);

}, function (msg) {

    console.log("1st reject: ", arguments);

    //return "1st pass to 2nd message";

    throw new Error(["1st pass rejected message"]);

}).then(function (msg) {

    console.log("2st resolve: ", arguments);

}, function (msg) {

    console.log("2st reject: ", arguments);

}).catch(function (msg) {

    console.warn("3rd reject: ", arguments);

});





var fn2 = function(resolve, reject){

    setTimeout(function () {

        console.log("Execute promise function");

        resolve("Resoved Message");

        //reject("Rejected Message");

    }, 500);

};

var p2 = new Promise(fn2);





var pAll1 = Promise.all([p1, p2]).then(function (msg) {

    console.log("1st resolve: ", arguments);

}, function (msg) {

    console.log("1st reject: ", arguments);

});



console.log("-----------------------------------");

//async function asyncFn1() {

//    console.log("Async before");

//    let ret1 = await (function () {

//        return new Promise(fn1);

//    })();

//    console.log("Async After");

//}

//asyncFn1();

 

 

 

 

参考：

1. ruanyifeng　　　　　  http://es6.ruanyifeng.com/#docs/let

2. Stackoverflow　　　　http://stackoverflow.com/questions/17253509/what-is-extended-mode