JS前端技術(shù)類文章
前沿
裝飾器
裝飾器是一種函數(shù)，寫成@ + 函數(shù)名。它可以放在類和類方法的定義前面。
裝飾器的行為
@decorator
class?A?{}
//?等同于
class?A?{}
A?=?decorator(A)?||?A;
裝飾器函數(shù)的第一個參數(shù)，就是所要裝飾的目標類。
注意，裝飾器對類的行為的改變，是代碼編譯時發(fā)生的，而不是在運行時。這意味著，裝飾器能在編譯階段運行代碼。也就是說，裝飾器本質(zhì)就是編譯時執(zhí)行的函數(shù)。
添加實例屬性
function?testable(target)?{
??target.prototype.isTestable?=?true;
}
@testable
class?MyTestableClass?{}
let?obj?=?new?MyTestableClass();
obj.isTestable?//?true
Object.assign()
Object.assign()?方法用于將所有可枚舉屬性的值從一個或多個源對象分配到目標對象。它將返回目標對象。
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)
如果目標對象中的屬性具有相同的鍵，則屬性將被源對象中的屬性覆蓋。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性。
[復(fù)制一個對象]
const?obj?=?{?a:?1?};
const?copy?=?Object.assign({},?obj);
console.log(copy);?//?{?a:?1?}
[深拷貝問題]
針對深拷貝，需要使用其他辦法，因為?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();
[合并對象]
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 }, 注意目標對象自身也會改變。
[合并具有相同屬性的對象]
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)]
[繼承屬性和不可枚舉屬性是不能拷貝的]
[原始類型會被包裝為對象]
const?v1?=?"abc";
const?v2?=?true;
const?v3?=?10;
const?v4?=?Symbol("foo")
const?obj?=?Object.assign({},?v1,?null,?v2,?undefined,?v3,?v4);
//?原始類型會被包裝，null 和 undefined 會被忽略。
//?注意，只有字符串的包裝對象才可能有自身可枚舉屬性。
console.log(obj);?//?{?"0":?"a",?"1":?"b",?"2":?"c"?}
數(shù)組的處理
Object.assign可以用來處理數(shù)組，但是會把數(shù)組視為對象。
Object.assign([1,?2,?3],?[4,?5])
//?[4,?5,?3]
Object.assign只能進行值的復(fù)制，如果要復(fù)制的值是一個取值函數(shù)，那么將求值后再復(fù)制。
const?source?=?{
??get?foo()?{?return?1?}
};
const?target?=?{};
Object.assign(target,?source)
//?{?foo:?1?}
為對象添加屬性
class?Point?{
??constructor(x,?y)?{
????Object.assign(this,?{x,?y});
??}
}
通過Object.assign方法，將x屬性和y屬性添加到Point類的對象實例。
克隆對象
function?clone(origin)?{
??return?Object.assign({},?origin);
}
將原始對象拷貝到一個空對象，就得到了原始對象的克隆。
合并多個對象
將多個對象合并到某個對象。
const?merge?=?(target,?...sources)?=>?Object.assign(target,?...sources);
如果希望合并后返回一個新對象，可以改寫上面函數(shù)，對一個空對象合并。
const?merge?=?(...sources)?=>?Object.assign({},?...sources);
Object.create()
Object.create() 方法創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__。
Object.freeze()
Object.freeze() ?方法可以凍結(jié)一個對象。一個被凍結(jié)的對象再也不能被修改；凍結(jié)了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個對象后該對象的原型也不能被修改。freeze()?返回和傳入的參數(shù)相同的對象。
Object.keys()
Object.keys()?方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對象時返回的順序一致 。
//?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對象原來的值如下
??//?{
??//???value:?specifiedFunction,
??//???enumerable:?false,
??//???configurable:?true,
??//???writable:?true
??//?};
??descriptor.writable?=?false;
??return?descriptor;
}
readonly(Person.prototype,?'name',?descriptor);
//?類似于
Object.defineProperty(Person.prototype,?'name',?descriptor);
修改屬性描述對象的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)先進入，但是內(nèi)層裝飾器@dec(2)先執(zhí)行。
裝飾器只能用于類和類的方法，不能用于函數(shù)，因為存在函數(shù)提升。
UEditor 是由百度「FEX前端研發(fā)團隊」開發(fā)的所見即所得富文本web編輯器
"en-US">
????"UTF-8">
????ueditor?demo
????
????
????
????
????
????
????
????