這篇可以幫助剛入門的小夥伴對es6有個簡單的理解。
// es5常量寫法
object.defineproperties(window,"pi2",)//需要用api去宣告常量。給物件定義乙個屬性,讓這個屬性變成唯讀,常量掛載在window下
//執行
console.log(window.pi2)
//es6常量寫法,不需要api宣告常量
//宣告乙個常量
const pt=3.14159//唯讀,不允許給其賦值
console.log(pi)
//es5的寫法
const callbacks=//宣告乙個陣列
for(var i=0;i<=2;i++)
}//所以執行callbacks[0]()的時候,i已經變成3了
//因為這個閉包的作用域i就是乙個全域性
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
]) //輸出的值都是6
//es6中的作用域
const callbacks2=
for(let j=0;j<=2;j++)
}console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2](),
])//輸出為0 2 4
//es5立即執行函式
(function()
console.log("foo()===1",foo()===1)
//為了分隔這個作用域就叫立即執行作用域
;((function()
console.log("foo()===2",foo()===2)
})())
})()//宣告了兩個函式,表示的是整兩個函式已經被兩個作用域給隔離開,在es5中保證一塊**要執行所在作用域的問題
//輸出的是foo()===1 true
// foo()===2 true
//es6就會很簡單直接用{}就能指定乙個跨作用域
console.log('foo()===1',foo()===1);
console.log('foo()===2',foo()===2);
}}//也就是說在es6中,乙個{}就把作用域進行了隔離,而在es5中必須使用立即執行函式(function(){})()才能對作用域進行隔離
function a()中的表示式直接作為返回值的話是可以省略{}的
}}//es5宣告乙個函式
) console.log(evens,odds);
}//輸出結果為 [1,2,3,4,5] [2,3,4,5,6]
//輸出結果為 [1,2,3,4,5] [2,3,4,5,6]
//箭頭函式跟普通函式的區別
//es3,es5
}//this的指向是該函式被呼叫的物件,也就是所函式被執行的時候,this指向的是哪個物件呼叫的function,也就是
//b()是c呼叫的,而c本身就是乙個物件,所以這個this指向的是c,c中的a也就是a+
} console.log(new factory().c.b())//輸出結果為 a+
};//es6寫法
//b在定義這個函式的時候this指向的是函式體中的this的
}}//箭頭函式中this的指向是定義式this的指向
console.log(new factory().c.b())//輸出結果為 a
// new factory().c.b()中c.b()例項就是 new factory(),而new factory()的例項也就是這個建構函式中的a
}//這就是es6中的箭頭函式
//預設引數
function a(x,y);
if(z===underfined)
return x+y+z
}console.log(f(1,3) )//輸出 46
}; console.log(f(1))//輸出50
console.log(f(1,3))//輸出46,預設引數起作用
}
)
return sum;
}//通過arguments來獲取函式當前的引數列表然後進行乙個迴圈乙個運算,這就是乙個可
//變引數的獲取然後的乙個求和
console.log(f(1,2,3));//輸出結果 6
console.log(f(1,2,3,6));//輸出結果 12})
return sum;
}//在es6中去獲取乙個可變的引數只需要...a,不需要偽陣列什麼的了
console.log(f(1,2,3));//輸出結果 6
console.log(f(1,2,3,6));//輸出結果 12
}
…a還可以有其他的用途,在es6中可用合併,如下所示:
//或想讓外部去操作這個資料,只能get新增乙個api
this.get=function(key)
//想賦值,這時候要檢查
this.set=function(key)}}
//宣告乙個例項
var person =new preson();
//讀取
console.table()
//修改
person.set('name','es3-cname');
console.table()//輸出的**中name已經被修改為es3-cname
person.set('***','c***');
console.table()//輸出的**中***沒有被修改,因為進行判斷了,***不允許修改};
object.defineproperties(person,'***',)//在es5中利用這個api達到乙個唯讀的效果,也就達到乙個保護的效果,唯讀不可寫
console.table()
person.name='es5=cname';
console.table()//輸出的**中name已經被修改為es5=cname
person.***='es5=***';
console.table()//報錯,不能給乙個唯讀的屬性賦值};
let person=new proxy(person,,
set(target,key,value)
}})//這個person是將來暴露給使用者操作的乙個物件,把最前面的person保護起來,以後操作的就是這個person,
//二這個person通過proxy()這個**掛上鉤,**的就是乙個原始資料,這裡面的target就是**的資料,key就是資料裡面的屬性
console.table()
//修改
trycatch(e)finally//報錯,不允許修改
}
ES6和ES5的區別
es6和es5的區別?1 定義變數 es5中用 var function es6中用 let const class import 沒有變數提公升 同乙個作用域中不可重複宣告 不會給window增加全域性屬性 會形成塊級作用域 const設定的變數值是不可修改的 理解為常量 暫時性死區 2 解構賦值...
es6和es5的區別
1 es6新增了let命令,用來宣告變數。它的用法類似於var,但是所宣告的變數,只在let命令所在的 塊內有效。a b let不像var存在變數提公升,即變數一定要宣告之後才能使用 2 塊級作用域 es5只有全域性作用域和函式作用域,沒有塊級作用域 3 變數的結構賦值 var a,b,c 1,2,...
es5和es6的區別
最近在看阮一峰的 ecmascript6入門 講真,這本書對初學者真的很有幫助,在這裡也推薦給大家。接下來,我要說的一些例子也大多 於這本書,如果對這本書感興趣的小夥伴,也可以戳這裡哦!1.新增let命令 在es6之前,我們宣告變數都是通過var,es6新增的let命令與var類似,與之不同是,le...