es6特性介紹（中）

zengdongbao 發(fā)布于2019-08-21 18:31 / 3271人閱讀

摘要：聲明變量功能和類似，卻去掉了很多身上的壞毛病塊狀作用域如果在瀏覽器環(huán)境執(zhí)行的時(shí)候不會(huì)往全局變量上面綁定，防止全局變量的污染直接結(jié)果相同作用域中不允許重復(fù)聲明相同變量執(zhí)行結(jié)果拋出語(yǔ)法錯(cuò)誤經(jīng)典的例子輸出，一不小心就污染了全局環(huán)境使用，就不會(huì)有這

聲明變量 let

功能和var類似，卻去掉了很多var身上的壞毛病

塊狀作用域

{
    var a = "123";
}
{
    let b = "456"
}
// 如果在瀏覽器環(huán)境執(zhí)行的時(shí)候
console.log(a);// "123"
console.log(b);// b is not defined

不會(huì)往全局變量上面綁定，防止全局變量的污染

var a = "123";
let b = "456";
// 直接結(jié)果
console.log(window.a);// "123"
console.log(window.b);// undefined;

相同作用域中不允許重復(fù)聲明相同變量

let a = "123";
let a = "456";
// 執(zhí)行結(jié)果
console.log(a);// 拋出語(yǔ)法錯(cuò)誤:SyntaxError: Identifier "me" has already been declared

經(jīng)典的例子

for(var i=1;i<10;i++){
}
console.log(i); // 輸出10，一不小心就污染了全局環(huán)境
// 使用let，就不會(huì)有這個(gè)問題
for(let j=1;j<10;j++){
}
console.log(j); // 拋出引用異常：ReferenceError: j is not defined

聲明常量 const

在es6之前并沒有很好的辦法進(jìn)行常量的聲明，常量：這是一個(gè)只讀的變量，es6中給出了const這個(gè)特性，專門用來(lái)處理這類問題

    const a = "123";
    a = "456"; // 拋出異常 SyntaxError: "a" is read-only

需要注意下，常量的對(duì)象，其中的屬性是可以被改變的

    const obj = {
        name:"hello"
    }
    obj.name = "hello 2"; // 這個(gè)地方是合法的

for...of

這es6提供的一個(gè)新的迭代器，功能類似for...in,只是前者返回的是value，而后者返回的是腳標(biāo)

    let data = ["a","b","c"];
    for(let i in data){
        console.log(i);// 輸出 0，1，2
    }
    
    for(let j of data){
        console.log(j);// 輸出 a,b,c
    }

代理 Proxies

這是es6提供的一個(gè)強(qiáng)大的特性，可以通過非侵入的方式，修改對(duì)象的默認(rèn)行為

    var obj = {
        name:"dog"
    };
    var handler = {
        get:function(target,key){
            return target[key].replace("dog","cat");
        }
    };
    // 設(shè)置代理
    var proxy = new Proxy(obj,handler);
    console.log(proxy.name);

可以進(jìn)行代理的屬性還有很多：

var handler = {
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}