JS前端技術(shù)類文章
前沿
裝飾器
裝飾器是一種函數(shù)，寫成@ + 函數(shù)名。它可以放在類和類方法的定義前面。
裝飾器的行為
@decorator
class?A?{}
//?等同于
class?A?{}
A?=?decorator(A)?||?A;
裝飾器函數(shù)的第一個(gè)參數(shù)，就是所要裝飾的目標(biāo)類。
注意，裝飾器對(duì)類的行為的改變，是代碼編譯時(shí)發(fā)生的，而不是在運(yùn)行時(shí)。這意味著，裝飾器能在編譯階段運(yùn)行代碼。也就是說(shuō)，裝飾器本質(zhì)就是編譯時(shí)執(zhí)行的函數(shù)。
添加實(shí)例屬性
function?testable(target)?{
??target.prototype.isTestable?=?true;
}
@testable
class?MyTestableClass?{}
let?obj?=?new?MyTestableClass();
obj.isTestable?//?true
Object.assign()
Object.assign()?方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
const?target?=?{?a:?1,?b:?2?};
const?source?=?{?b:?4,?c:?5?};
const?returnedTarget?=?Object.assign(target,?source);
console.log(target);
//?expected?output:?Object?{?a:?1,?b:?4,?c:?5?}
console.log(returnedTarget);
//?expected?output:?Object?{?a:?1,?b:?4,?c:?5?}
Object.assign(target,?...sources)
如果目標(biāo)對(duì)象中的屬性具有相同的鍵，則屬性將被源對(duì)象中的屬性覆蓋。后面的源對(duì)象的屬性將類似地覆蓋前面的源對(duì)象的屬性。
[復(fù)制一個(gè)對(duì)象]
const?obj?=?{?a:?1?};
const?copy?=?Object.assign({},?obj);
console.log(copy);?//?{?a:?1?}
[深拷貝問(wèn)題]
針對(duì)深拷貝，需要使用其他辦法，因?yàn)?Object.assign()拷貝的是（可枚舉）屬性值。
const?log?=?console.log;
function?test()?{
??'use?strict';
??let?obj1?=?{?a:?0?,?b:?{?c:?0}};
??let?obj2?=?Object.assign({},?obj1);
??log(JSON.stringify(obj2));
??//?{?a:?0,?b:?{?c:?0}}
??obj1.a?=?1;
??log(JSON.stringify(obj1));
??//?{?a:?1,?b:?{?c:?0}}
??log(JSON.stringify(obj2));
??//?{?a:?0,?b:?{?c:?0}}
??obj2.a?=?2;
??log(JSON.stringify(obj1));
??//?{?a:?1,?b:?{?c:?0}}
??log(JSON.stringify(obj2));
??//?{?a:?2,?b:?{?c:?0}}
??obj2.b.c?=?3;
??log(JSON.stringify(obj1));
??//?{?a:?1,?b:?{?c:?3}}
??log(JSON.stringify(obj2));
??//?{?a:?2,?b:?{?c:?3}}
??//?Deep?Clone
??obj1?=?{?a:?0?,?b:?{?c:?0}};
??let?obj3?=?JSON.parse(JSON.stringify(obj1));
??obj1.a?=?4;
??obj1.b.c?=?4;
??log(JSON.stringify(obj3));
??//?{?a:?0,?b:?{?c:?0}}
}
test();
[合并對(duì)象]
const?o1?=?{?a:?1?};
const?o2?=?{?b:?2?};
const?o3?=?{?c:?3?};
const?obj?=?Object.assign(o1,?o2,?o3);
console.log(obj);?//?{?a:?1,?b:?2,?c:?3?}
console.log(o1);??//?{ a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。
[合并具有相同屬性的對(duì)象]
const?o1?=?{?a:?1,?b:?1,?c:?1?};
const?o2?=?{?b:?2,?c:?2?};
const?o3?=?{?c:?3?};
const?obj?=?Object.assign({},?o1,?o2,?o3);
console.log(obj);?//?{?a:?1,?b:?2,?c:?3?}
[拷貝 symbol 類型的屬性]
const?o1?=?{?a:?1?};
const?o2?=?{?[Symbol('foo')]:?2?};
const?obj?=?Object.assign({},?o1,?o2);
console.log(obj);?//?{?a?:?1,?[Symbol("foo")]:?2?}?(cf.?bug?1207182?on?Firefox)
Object.getOwnPropertySymbols(obj);?//?[Symbol(foo)]
[繼承屬性和不可枚舉屬性是不能拷貝的]
[原始類型會(huì)被包裝為對(duì)象]
const?v1?=?"abc";
const?v2?=?true;
const?v3?=?10;
const?v4?=?Symbol("foo")
const?obj?=?Object.assign({},?v1,?null,?v2,?undefined,?v3,?v4);
//?原始類型會(huì)被包裝，null 和 undefined 會(huì)被忽略。
//?注意，只有字符串的包裝對(duì)象才可能有自身可枚舉屬性。
console.log(obj);?//?{?"0":?"a",?"1":?"b",?"2":?"c"?}
數(shù)組的處理
Object.assign可以用來(lái)處理數(shù)組，但是會(huì)把數(shù)組視為對(duì)象。
Object.assign([1,?2,?3],?[4,?5])
//?[4,?5,?3]
Object.assign只能進(jìn)行值的復(fù)制，如果要復(fù)制的值是一個(gè)取值函數(shù)，那么將求值后再?gòu)?fù)制。
const?source?=?{
??get?foo()?{?return?1?}
};
const?target?=?{};
Object.assign(target,?source)
//?{?foo:?1?}
為對(duì)象添加屬性
class?Point?{
??constructor(x,?y)?{
????Object.assign(this,?{x,?y});
??}
}
通過(guò)Object.assign方法，將x屬性和y屬性添加到Point類的對(duì)象實(shí)例。
克隆對(duì)象
function?clone(origin)?{
??return?Object.assign({},?origin);
}
將原始對(duì)象拷貝到一個(gè)空對(duì)象，就得到了原始對(duì)象的克隆。
合并多個(gè)對(duì)象
將多個(gè)對(duì)象合并到某個(gè)對(duì)象。
const?merge?=?(target,?...sources)?=>?Object.assign(target,?...sources);
如果希望合并后返回一個(gè)新對(duì)象，可以改寫上面函數(shù)，對(duì)一個(gè)空對(duì)象合并。
const?merge?=?(...sources)?=>?Object.assign({},?...sources);
Object.create()
Object.create() 方法創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的__proto__。
Object.freeze()
Object.freeze() ?方法可以凍結(jié)一個(gè)對(duì)象。一個(gè)被凍結(jié)的對(duì)象再也不能被修改；凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。freeze()?返回和傳入的參數(shù)相同的對(duì)象。
Object.keys()
Object.keys()?方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。
//?simple?array
var?arr?=?['a',?'b',?'c'];
console.log(Object.keys(arr));?//?console:?['0',?'1',?'2']
//?array?like?object
var?obj?=?{?0:?'a',?1:?'b',?2:?'c'?};
console.log(Object.keys(obj));?//?console:?['0',?'1',?'2']
//?array?like?object?with?random?key?ordering
var?anObj?=?{?100:?'a',?2:?'b',?7:?'c'?};
console.log(Object.keys(anObj));?//?console:?['2',?'7',?'100']
//?getFoo?is?a?property?which?isn't?enumerable
var?myObj?=?Object.create({},?{
??getFoo:?{
????value:?function?()?{?return?this.foo;?}
??}
});
myObj.foo?=?1;
console.log(Object.keys(myObj));?//?console:?['foo']
方法的裝飾
裝飾器不僅可以裝飾類，還可以裝飾類的屬性。
function?readonly(target,?name,?descriptor){
??//?descriptor對(duì)象原來(lái)的值如下
??//?{
??//???value:?specifiedFunction,
??//???enumerable:?false,
??//???configurable:?true,
??//???writable:?true
??//?};
??descriptor.writable?=?false;
??return?descriptor;
}
readonly(Person.prototype,?'name',?descriptor);
//?類似于
Object.defineProperty(Person.prototype,?'name',?descriptor);
修改屬性描述對(duì)象的enumerable屬性，使得該屬性不可遍歷。
裝飾器有注釋的作用。
組件寫法：
@Component({
??tag:?'my-component',
??styleUrl:?'my-component.scss'
})
export?class?MyComponent?{
??@Prop()?first:?string;
??@Prop()?last:?string;
??@State()?isVisible:?boolean?=?true;
??render()?{
????return?(
??????Hello,?my?name?is?{this.first}?{this.last}
????);
??}
}
class?Example?{
????@dec(1)
????@dec(2)
????method(){}
}
外層裝飾器@dec(1)先進(jìn)入，但是內(nèi)層裝飾器@dec(2)先執(zhí)行。
裝飾器只能用于類和類的方法，不能用于函數(shù)，因?yàn)榇嬖诤瘮?shù)提升。
UEditor 是由百度「FEX前端研發(fā)團(tuán)隊(duì)」開發(fā)的所見即所得富文本web編輯器
"en-US">
????"UTF-8">
????ueditor?demo
????
????
????
????
????
????
????
????