Understanding ECMAScript 6笔记（1）

1.var与let的区别（scope区别）

（1）块级别的声明

传统的var声明在代码函数块中，实质是全局的变量，而用ES6的let声明则是真正区域在块中

function getValue(condition) {
    if (condition) {
        var value = "blue";
        // other code
        return value;
    } else {
        // value exists here with a value of undefined
        return null;
    }
    // value exists here with a value of undefined
}

等价于

function getValue(condition) {
    var value;
    if (condition) {
        value = "blue";
        // other code
        return value;
    } else {
        return null;
    }
}
真正的块区域为
function getValue(condition) {
    if (condition) {
        let value = "blue";
        // other code
        return value;
    } else {
        return null;
    }
}

（2）const 变量，可赋值原始类型和引用类型，赋值原始类型不可再赋值，赋值引用类型，引用类型属性可修改。const和let类型在赋值之前不可以访问，否则会抛出referenceError

（3）var，let 在循环块中的绑定

var循环后仍然可以访问，而let是不可以的，var始终是一个，而let每次循环都有自己的一个copy，所以以前用var循环做不到的效果，现在用let可以解决了。比较下面的结果，看看其中的区别

var funcs = [];

for (var i = 0; i < 10; i++) {
    funcs.push(function() { console.log(i); });
}

funcs.forEach(function(func) {
    func();     // outputs the number "10" ten times
});


var funcs = [];

for (var i = 0; i < 10; i++) {
    funcs.push((function(value) {
        return function() {
            console.log(value);
        }
    }(i)));
}

funcs.forEach(function(func) {
    func();     // outputs 0, then 1, then 2, up to 9
});

var funcs = [];

for (let i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
    });
}

funcs.forEach(function(func) {
    func();     // outputs 0, then 1, then 2, up to 9
})

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };

for (let key in object) {
    funcs.push(function() {
        console.log(key);
    });
}

funcs.forEach(function(func) {
    func();     // outputs "a", then "b", then "c"
});

（3）在全局范围内，用var声明的变量，它是全局对象window的一个属性，如果window对象有相同的属性会被覆盖，而用let和const声明的变量，独立于window对象，单独存在。

// in a browser
var RegExp = "Hello!";
console.log(window.RegExp);     // "Hello!"

var ncz = "Hi!";
console.log(window.ncz);        // "Hi!"

// in a browser
let RegExp = "Hello!";
console.log(RegExp);                    // "Hello!"
console.log(window.RegExp === RegExp);  // false

const ncz = "Hi!";
console.log(ncz);                       // "Hi!"
console.log("ncz" in window);

2. String串和正则表达式表示的变化（增加了很多东东，更丰富了）

（1）更好地支持unicode，添加codePointAt(),正则表达式添加u标记。

（2）其他string变化，添加includes(),startsWith(), endsWith()，repeat（）等方法，同时，支持更丰富。

（3）正则表达式增加y标记，确定lastindex后面的匹配方式。

3. Functions 的变化

（1）ECMAScript6增加了default参数的支持,default value 赋值不在argument数组中。

//ECMAScript5
function makeRequest(url, timeout, callback) {
    timeout = (typeof timeout !== "undefined") ? timeout : 2000;
    callback = (typeof callback !== "undefined") ? callback : function() {};
    // the rest of the function
}

//ECMAScript6
function makeRequest(url, timeout = 2000, callback = function() {}) {
    // the rest of the function
}

（2）支持剩余参数(rest parameter)允许长度不确定的实参表示为一个数组。

function pick(object, ...keys) {
    let result = Object.create(null);
    for (let i = 0, len = keys.length; i < len; i++) {
        result[keys[i]] = object[keys[i]];
    }
    return result;
}

（3）增加了function的构造函数功能

var add = new Function("first", "second", "return first + second");

console.log(add(1, 1));     // 2

var pickFirst = new Function("...args", "return args[0]");

console.log(pickFirst(1, 2));   // 1

（4）Arrow function的引入（书写方式的变化）

var reflect = value => value;
// effectively equivalent to:
var reflect = function(value) {
    return value;
};


var sum = (num1, num2) => num1 + num2;
// effectively equivalent to:
var sum = function(num1, num2) {
    return num1 + num2;
};

var getName = () => "Nicholas";
// effectively equivalent to:
var getName = function() {
    return "Nicholas";
};

var sum = (num1, num2) => {
    return num1 + num2;
};
// effectively equivalent to:
var sum = function(num1, num2) {
    return num1 + num2;
};

var getTempItem = id => ({ id: id, name: "Temp" });
// effectively equivalent to:
var getTempItem = function(id) {
    return {
        id: id,
        name: "Temp"
    };
};

（5）arraw function 的其他技巧

var PageHandler = {
    id: "123456",
    init: function() {
        document.addEventListener("click", function(event) {
            this.doSomething(event.type);     // error
        }, false);
    },
    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

var PageHandler = {
    id: "123456",
    init: function() {
        document.addEventListener("click", (function(event) {
            this.doSomething(event.type);     // no error
        }).bind(this), false);
    },
    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};
var PageHandler = {
    id: "123456",
    init: function() {
        document.addEventListener("click",
                event => this.doSomething(event.type), false);
    },
    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

Understanding ECMAScript 6笔记（1）

猜你喜欢