本文是一種抓袋,幫助您探索一些非常有用的方法,以幫助您在JavaScript中管理您的對象,我們將探索Object.keys,Object.prototype.hasOwnProperty和更新的Object.assign。
财产
hasOwnProperty 是对象实例中可用的方法,可以检查对象是否直接在其实例中具有属性。
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8console.log('clown' in myObj); // true
9console.log('valueOf' in myObj); // true
10
11console.log(myObj.hasOwnProperty('clown')); // true
12console.log(myObj.hasOwnProperty('valueOf')); // false
关键字: 钥匙
Object.keys 静态方法返回一个对象上的属性密钥的数组:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8console.log(Object.keys(myObj));
9
10// ["clown", "police", "santa", "farmer"]
Object.keys 可以非常有用,允许在对象上使用 for...of循环:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8for (let k of Object.keys(myObj)) {
9 console.log(`Hey ${ myObj[k] }!`);
10}
11
12// "Hey 🤡!"
13// "Hey 👮!"
14// "Hey 🎅!"
15// "Hey 👩🌾!"
<$>[警告] 请注意,从 Object.keys 返回的数组中,密钥不一定顺序。
主題:分配
ES2015(ES6)给我们带来了一个新的静态方法在构建 Object:Object.assign. 这个新方法允许您轻松地将值从一个对象复制到另一个对象。
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8const myObj2 = myObj;
9
10const myObj3 = Object.assign({}, myObj);
11
12console.log(Object.is(myObj, myObj2)); // true
13
14console.log(Object.is(myObj, myObj3)); // false
15
16console.log(myObj3);
17
18// Object {
19// clown: "🤡",
20// farmer: "👩🌾",
21// police: "👮",
22// santa: "🎅"
23// }
如果您想知道,Object.is 是检查两个对象是否相同的方法。
<$>[注] 请注意,只有一个对象的可编号的属性将被复制到 Object.assign。
第一个参数是源对象,后面的参数是源对象. 您可以输入多个源对象,最后输入的源中的重复属性将获胜:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8const myObj2 = Object.assign({}, myObj, {
9 santa: '🎄',
10 teacher: '👩🏫'
11});
12
13console.log(myObj2);
14
15// Object {
16// clown: "🤡",
17// farmer: "👩🌾",
18// police: "👮",
19// santa: "🎄",
20// teacher: "👩🏫"
21// }
今天,使用 Redux 来管理状态,Object.assign 变得非常有用,可以从现有对象中创建全新的对象,使您能够以不变的方式复制和扩展对象。
奖金: Object.freeze
使用 Object.freeze 轻松冻结一个对象,以防止其属性被更改. 请注意在下面的示例中,在对象上使用 Object.free 后,我们无法更改属性,添加新属性或删除属性:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8myObj.clown = 'scary';
9myObj.astronaut = '👨🚀';
10
11Object.freeze(myObj);
12
13myObj.clown = 'really scary';
14myObj.student = '👩🎓';
15delete myObj.santa;
16
17console.log(myObj);
18
19// Object {
20// clown: "scary",
21// farmer: "👩🌾",
22// police: "👮",
23// santa: "🎅",
24// astronaut: "👨🚀"
25// }
还有另一种有用的方法, Object.isFrozen,以了解一个对象是否已被冻结:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾'
6}
7
8console.log(Object.isFrozen(myObj)); // false
9
10Object.freeze(myObj);
11
12console.log(Object.isFrozen(myObj)); // true
请注意,嵌入式对象不会自动被 Object.freeze 冻结. 在下面的示例中,嵌入式动物对象即使在包含的对象被冻结后也仍然可以改变或删除其属性:
1const myObj = {
2 clown: '🤡',
3 police: '👮',
4 santa: '🎅',
5 farmer: '👩🌾',
6 animals: {
7 cow: '🐄',
8 rabbit: '🐇'
9 }
10}
11
12Object.freeze(myObj);
13
14delete myObj.animals.rabbit;
15myObj.animals.cow = 'moo!';
16
17console.log(myObj);
18
19// Object {
20// clown: "🤡",
21// farmer: "👩🌾",
22// police: "👮",
23// santa: "🎅",
24// animals: {
25// cow: 'moo!'
26// }
27// }
为了深度冻结一个对象,我们将不得不反复冻结任何偶然也成为对象的对象属性。
P.S.:您也可能对新的 Object.values & Object.entries方法感兴趣。