JavaScript

JavaScript中的Object方法

Posted by cl9000 on March 22, 2020

生活只有在平淡无味的人看来才是空虚而平淡无味的。 ——<尼古拉·加夫里诺维奇·车尔尼雪夫斯基>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/const-vs-object-freeze/

这篇文章描述了各种对象方法的用法，比如Object.create()， Object.assign()， Object.freeze()， Object.seal()以及JavaScript中许多可用的方法的示例。

Object.create()

Object.create()方法用于创建一个新对象，并将其原型设置为现有对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
var car = {
    color: "black",
    brand: "Toyota",
    drive: function(){
      console.log(`Driving a ${this.isTopModel ? 'top model' : ''} ${this.color} color ${this.brand} car`);
    }
}
var newCar = Object.create(car);
newCar.brand = "Honda";
newCar.isTopModel = true;

console.log(car.isPrototypeOf(newCar)); //true
newCar.drive();

Output
true
Driving a top model black color Honda car

这里，newCar创建了一个全新的对象，其原型设置为Car。我们设置了brand和isTopModel的值，而color的值将被继承。当我们调用drive()方法时，它在car上的原型链中找到drive()并执行。

Object.assign()

Object.assign()用于将一个对象的属性和函数复制到另一个对象中。

我们可以使用Object.assign()来合并两个对象，方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Initialize an object
const favorites = {
    color: 'Red',
    number: 5   
};

// Initialize another object
const somemore = {
    fruit: 'Mango',
    movies: ["Spider Man", "Conjuring"],   
};

// Merge the objects
console.log(Object.assign(favorites, somemore));

Output
{color: “Red”, number: 5, fruit: “Mango”, movies: [“Spider Man”, “Conjuring”]}

也可以在类构造函数中使用，将所有值赋给this，如下所示:

1
2
3
4
5
class Car {
    constructor(brand, color, price){
        Object.assign(this, {brand, color, price});
    }
}

Object.freeze()

Object.freeze()在调用此方法后冻结对象的状态。它将忽略是否修改了任何现有属性，以及是否添加了任何新属性。

1
2
3
4
5
6
7
8
9
10
11
12
// Initialize an object
const user = {
    username: 'admin',
    password: 'password@123'
};
// Freeze the object
Object.freeze(user);

user.password = '*******';
user.active = true;

console.log(user);

Output
{username: “admin”, password: “password@123”}

Object.seal()

Object.seal()在调用此方法后密封对象的状态。它允许修改现有的属性，但是如果添加了任何新属性，则会忽略。

1
2
3
4
5
6
7
8
9
10
11
12
// Initialize an object
const user = {
    name: 'admin',
    password: 'password@123'
};
// Seal the object
Object.seal(user);

user.password = '123456'
user.active = true;

console.log(user);

Output
{name: “admin”, password: “123456”}

Object.defineProperty()

Object.defineproperty()用于在现有对象中定义新的属性。

属性可以用以下选项定义:

  • value: 默认为undefined，如果没有提供属性的值
  • writable: 默认为false，如果为true则表示该属性的值可以更改
  • configurable: 默认为false，如果为true则表示可以删除属性
  • enumerable: 默认为false，如果为true则表示可以枚举属性，例如在for..in循环中
1
2
3
4
5
6
7
var user = {};

Object.defineProperty(user, "name", {
  value: "admin"
});

console.log(user);

相当于

1
2
3
4
5
6
7
8
9
10
var user = {};

Object.defineProperty(user, "name", {
  value: "admin",
  writable: false,
  configurable: false,
  enumerable: false
});

console.log(user);

Output
{name: “admin”}

Object.defineProperties()

Object.defineproperties()可用于在现有对象中定义多个属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var user = {};

Object.defineProperties(user, {
  name: {
    value: "admin",
    writable: true,
    enumerable: true
  },
  password: {
    value: 'password@123',
    writable: false,
    enumerable: false
  }      
});

console.log(user);

Output
{name: “admin”, password: “password@123”}

Object.keys(), Object.values() & Object.entries()

Object.keys(), Object.values() & Object.entries()可以使用对象的迭代器，如下所示:

1
2
3
4
5
6
7
8
9
10
let favorites = {
    color: 'Red',
    number: 5,
    vegan: true,
    movies: ["Spider Man", "Conjuring"]   
};

console.log("keys", Object.keys(favorites));
console.log("values", Object.values(favorites));
console.log("entries", Object.entries(favorites));

Output
keys [“color”, “number”, “vegan”, “movies”]
values [“Red”, 5, true, [“Spider Man”, “Conjuring”]]
entries [
[“color”, “Red”],
[“number”, 5],
[“vegan”, true],
[“movies”, [“Spider Man”, “Conjuring”]
]

Object.keys()和Object.entries()可用于迭代对象的键和值，如下所示:—

1
2
3
Object.keys(favorites).forEach(key => console.log(`${key}: ${favorites[key]}`));

Object.entries(favorites).forEach(entry => console.log(`${entry[0]}: ${entry[1]}`));

-Object.is()

ES6引入了一个新的方法Object.is()来比较两个值，它的工作原理非常类似于严格的比较操作符===，还避免了NaN比较和+0/-0比较的混淆。建议使用Object.is()进行值比较。

我们来看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
console.log(Object.is("cnc", "cnc"));     // true, same content and type
console.log(Object.is(12345, 12345));     // true, same content and type
console.log(Object.is(false, false));     // true, same content and type

console.log(Object.is(12345, "12345"));   // false, different type
console.log(Object.is(0, false));         // false, different type
console.log(Object.is("", false));        // false, different type
console.log(Object.is(null, undefined));  // false, different type

console.log(Object.is([], []));           // false, both refers to different object in memory
console.log(Object.is([1, 2], [1, 2]));   // false, both refers to different object in memory
console.log(Object.is({}, {}));           // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(Object.is(array1, array2));   // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(Object.is(obj1, obj2));       // true, both refers to same object

console.log(NaN === NaN);                 // false, confusing, content and type is same
console.log(Object.is(NaN, NaN));         // true, es6 is good, same content and type

console.log(+0 === -0);                   // true, confusing, content is different
console.log(Object.is(+0, -0));           // false, es6 is good, different content

总结 Summary

Javascript对象提供了非常有用的方法

  • 使用Object.create()创建一个新对象
  • 使用Object.assign()复制对象
  • 使用Object.freeze()和Object.seal()保护对象
  • 使用Object.defineproperty()和Object.defineproperties()定义对象属性
  • 使用Object.keys()、Object.values()和Object.entries()遍历Object
  • 使用Object.is()比较对象

参考

关注【公众号】，了解更多。
关注【公众号】，了解更多。
关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS