-
es6 this定義時的this指向，解決es5 this不明確問題。 Es5誰調(diào)用this就指向的到誰。查看全部
-
安裝流程順序
查看全部 -
立即提升函數(shù)?
ES6-花括號實現(xiàn)的作用域隔離
查看全部 -
ES6進階知識
查看全部 -
es6合并數(shù)組
查看全部 -
可變參數(shù)獲取與運算
function(...a){
}
查看全部 -
拋出異常寫法
查看全部 -
es6參數(shù)默認(rèn)值
查看全部 -
es6進階指導(dǎo)
（1）解構(gòu)賦值
（2）模版字符串
（3）正則擴展
（4）數(shù)字?jǐn)U展
（5）Iterator
（6）Generator
（7）Set和Map
（8）函數(shù)拓展
（9）Class
（10）Module
（11）Symbol
（12）對象拓展
查看全部 -
對象代理
// 數(shù)據(jù)保護
// es3
{
?var Person = function(){
// 局部作用域
var data = {
name : 'es3',
sex : 'male',
age : 15
}
this.get = function (key){
return data[key];
}
this.set = function(key, value){
if(key != 'sex'){
data[key] = value;
}
}
?}
?
?var person = new Person();
?
?//讀取
?console.table({name : person.get('name'),sex : person.get('sex'),age : person.get('age')});
?
?// 修改
?person.set('name','es3-cname');
?console.table({name : person.get('name'),sex : person.get('sex'),age : person.get('age')});
?
?person.set('sex','female');
?console.table({name : person.get('name'),sex : person.get('sex'),age : person.get('age')});
}
// es5
{
var Person = {
name : 'es5',
age : 15
};
Object.defineProperty(Person,'sex',{
writable : false,
value : 'male'
});
//讀取
console.table({name : person.name,sex : person.sex,age : person.age});
person.name = 'es5-cname';
console.table({name : person.name,sex : person.sex,age : person.age});
// 報錯
person.sex = 'female';
console.table({name : person.name,sex : person.sex,age : person.age});
}
// es6
{
?let Person = {
? name : 'es6',
? sex : 'male',
? age : 18
?};
?
?let person = new Proxy(Person,{
get(target,key){
return target[key];
},
set(target,key,value){
if(key != 'sex')
target[key] = value;
}
?});
?
?// 讀取
?console.table({name : person.name,sex : person.sex,age : person.age});
?
?// 修改
?try{
person.sex = 'female';
?}catch(e){
console.log(e);
?}finally{
?}?
}
查看全部 -
默認(rèn)參數(shù)
(1)es3、es5
{
function f(x, y, z){
if(y === undefined){
y = 7;
}
if(z === undefined){
z = 42;
}
return x + y + z;
}
console.log(f(1));
console.log(f(1, 3));
}
(2)es6
{
function f(x, y = 7, z = 42){
? return x + y + z;
}
console.log(f(1));
}
// 可變參數(shù),求和例子
// es3、es5
{
?function f(){
? var a = Array.prototype.slice.call(arguments);
? var sum = 0;
? a.forEach(function (item){
? ?sum += item * 1;
? });
? return sum;
?}
?console.log(f(1,2,3));
}
// es6
{
?function f(...a){
var sum = 0;
a.forEach(item => {
sum += item * 1;
});
return sum;
?}
?console.log(f(1,2,3));
}
// 合并數(shù)組
// es5
{
?var params = ['hello', true, 7];
?var other = [1, 2].concat(params);
}
// es6
{
?var params = ['hello', true, 7];
?var other = [1, 2,...params];
?console.log(other);
}
查看全部 -
箭頭函數(shù)
(1)es3、es5
function a(){
}
(2)es6
() =>{
}
好處：
(1)減少書寫
(2)消除this指向不明確
例子
(1)es3、es5
{
?// es3、es5
?var evens = [1,2,3,4,5];
?var odds = evens.map(function(v){
return v + 1;
?});
?console.log(evens,odds);
}
(2)es6
{
?let evens = [1,2,3,4,5];
?let odds = evens.map(v => v + 1);
?console.log(evens,odds);
}
// 需要注意，在es6中
// ()是用來聲明參數(shù)的，如果參數(shù)只有一個的時候，
// 小括號可以省略;如果花括號中的表達式可以直接
// 作為返回時可以省略。
// 消除this指針問題
// es3、es5
{
?var factory = function(){
? this.a = 'a';
? this.b = 'b';
? this.c = {
a :'a+',
b: function(){
return this.a;
}
? }
?}
?
?console.log(new factory().c.b());
?// 輸出 a+
?// this指向是該函數(shù)的對象
}
// es6
{
?let factory = function(){
? this.a = 'a';
? this.b = 'b';
? this.c = {
a :'a+',
b: () =>{
return this.a;
}
? }
?}
?console.log(new factory().c.b());
?// 輸出a
}
查看全部 -
作用域
?（1）es5
var callbacks =[];
for(var i = 0; i <= 2; i++){
?callbacks[i] = function(){
? return i * 2;
?}
}
console.table({
?callbacks[0](),
?callbacks[1](),
?callbacks[2](),
});
// 輸出 6 6 6
// 其中callbacks[i] 中的i和循環(huán)中i是同一個i，
// 而return i * 2是另外一個，因為i沒定義，此時僅保存i * 2的表達式
// 當(dāng)使用callback時才執(zhí)行，此時i=3了，所以都是3 * 2= 6
（2）es6
const callback2=[]
for(let j = 0 ; j <= 2; j++){
? callbacks[j] = function(){
? return j * 2;
? }
}
console.table({
?callbacks2[0](),
?callbacks2[1](),
?callbacks2[2](),
});
形成塊的方法：
（1）es5
// 立即執(zhí)行函數(shù)內(nèi)形成一個塊，形成塊
(function(){
})
(function(){
? ?var foo = function(){
? ?return 1;??
? }
? console.log('foo() === 1',foo() === 1);
? ?(function(){
? ? ? var foo = function(){
? ? ? return 2;??
? ? ? }
? ? console.log('foo() === 2',foo() === 1);
? })
})
// 都是返回 true
（2）es6
// 使用{}可以形成域
{?
? foo = function(){
? ?return 1;??
? }
? console.log('foo() === 1',foo() === 1);
? {
? ? ? ?foo = function(){
? ? ? ? ?return 2;??
? ? ? ?}
? ? ?console.log('foo() === 2',foo() === 2);
? }
}
查看全部 -
常量
?es5和es6的寫法
（1）es5
// writable:false表示不能寫
Object.defineProperty(window,"PI2",{
? ?value:3.1415926,
? ?writable:false,
});
console.log(window.PI2);
// 可以重新賦值，但是無效
（2）es6
const PI = 3.1415926
console.log(PI);
// 不能重新賦值，會報錯
查看全部 -
jquery是es3
angular 、vue、react是es6
整個課程的學(xué)習(xí)方式：對比學(xué)習(xí)
es6的學(xué)習(xí)內(nèi)容：
常量、作用域、箭頭函數(shù)、默認(rèn)函數(shù)、對象代理查看全部
舉報