首页 javascript 正文

我要投稿

javascript 获取对象属性-您应该了解的 15 个 JavaScript 对象基础知识

bendan520 javascript

2024-05-01 0 7,142 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

回复下方公众号【面试指南】即可获取为您整理的107页后端面试题。

在昨天的文章中，我们将了解 JavaScript 中有关对象的一些最重要的概念。

1. 对象字面量是创建对象最简单的方式

创建对象的最简单方法是使用对象字面量。我们在大括号 {} 内定义一组属性，并用冒号分隔。这是一个例子。

const game = {
  name: 'Fornite',
  developer: 'Epic Games'
};

前面的对象有两个属性。第一个属性具有键值和 Fornite 值。

2. 对象是属性的动态集合

事实上，对象是道具的动态集合。

创建对象后，我们可以添加、编辑或删除它的属性。下面是在前一个游戏对象中添加和删除年份属性的示例。

game.year = 2017;
delete game.year;

3. 可以使用点和括号表示法访问属性

当键是有效标识符时，可以使用点表示法访问属性。

console.log(game.name)

当键不是有效标识符时，我们需要使用括号表示法。

console.log(game["name"])

4. 将密钥转换为字符串

键只是字符串，当非字符串值用作键时，它们会转换为字符串。看看当我尝试使用另一个对象作为键时会发生什么。

const developerKey = {
  toString(){
    return 'developer'
  }
}
console.log(game[developerKey]);
//Epic Games

当developerKey用作键时，首先使用toString方法将其转换为字符串，然后使用生成的“developer”字符串键来检索值。前面的代码给出与 game['developer'] 相同的结果。

5. 对象继承自其他对象

在 JavaScript 中，对象继承自其他对象。对象有一个名为 proto 的隐藏属性，它指向它们的原型。所有对象都继承自全局Object.prototype。

game.__proto__ === Object.prototype;
//true

即使我们不这样定义，游戏对象也具有像 toString 或 toLocaleString 这样的属性。它们继承自 Object.prototype 对象。

console.log(game.toString);
//ƒ toString() { [native code] }
console.log(game.toLocaleString);
//ƒ toLocaleString() { [native code] }

Object.create() 接受一个原型对象并创建一个指向它的新对象。

const prototypeObj = {};
const obj = Object.create(prototypeObj);
console.log(obj.__proto__ === prototypeObj);
//true

6. 更改是在当前对象上完成的，而不是在其原型上完成的

请记住，更改是在当前对象上完成的，而不是在其原型上完成的。原型仅供阅读。

对当前对象执行添加、编辑或删除属性时。

例如，Object.prototype有一个toString属性，考虑从Object.prototype继承的空对象。以下示例中的删除运算符不执行任何操作；它不会从原型中删除 toString 属性。

const obj = {};
console.log(obj.toString);
//ƒ toString() { [native code] }
delete obj.toString
console.log(obj.toString);
//ƒ toString() { [native code] }

当我们修改toString属性时，会为当前对象添加一个新的属性javascript 获取对象属性，而原型不会被修改。此时，当前对象和原型都有一个同名的属性，就使用当前对象中的哪个。

const obj = {};
obj.toString = function(){};

7. 我们可以创建没有原型的对象

Object.create(null) 创建一个没有原型的对象。

const obj = Object.create(null);
console.log(obj.__proto__ === undefined);
//true

8. 类是原型系统之上的糖语法模式

class 关键字造成了一种基于类的语言的错觉，但事实并非如此。 JavaScript 中的类只是原型系统之上的糖语法。

class Game{
  constructor(name){
    this.name = name;
  }
}
const game = new Game('Fornite');
console.log(game.__proto__ === Game.prototype);

9. 对象可以存储其他对象

属性的值可以是任何类型。属性可以存储对象。考虑下一个情况，其中开发人员是一个对象而不是字符串。

const game = {
  name : 'Fornite',
  developer: {
    name: 'Epic Games',
    founder: 'Tim Sweeney'
  }
};

10. 对象可以存储函数

属性值可以是任何类型，包括函数。

以下对象具有存储函数的 toString 属性。

const game = {
  name : 'Fornite',
  toString: function(){
    return this.name;
  }
};
console.log(game.toString());
//Fornite

当函数存储在对象上时，它可以用作技巧。请注意，在方法中，我们可以使用this关键字来访问关联对象的属性。

11. 物体可以被冻结

默认情况下，对象是动态的，这意味着我们可以在创建后添加、编辑或删除它们的属性。

尽管如此，我们可以使用 Object.freeze() 实用程序在创建时冻结此类对象。之后，很难添加、编辑或删除属性。

查看下一个冻结的对象。

const game = Object.freeze({
 name: 'Fornite',
});
//game.developer = 'Epic Games';
//Cannot add property developer, object is not extensible
game.name = "Valorant";
//Cannot assign to read only property 'name' of object

12. 原型可以冻结

原型也可以被冻结。

当原型被冻结时，从其继承的对象不能具有同名的新属性。考虑以下冻结原型。

const prototype = Object.freeze({
  toString : function (){
    return this.name;
  }
});

因为原型被冻结并且有一个 toString 属性，所以我们不能在继承它的新对象上定义同名的属性。

const game = Object.create(prototype);
game.name = 'Fornite';
game.toString = function (){
   return `Game: ${this.name}`;
  };
//Cannot assign to read only property 'toString' of object

13.Object.keys、Object.values和Object.entries帮助检索拥有的键和值

对象有两个属性，它们所拥有的属性是在对象本身中定义的。例如，名称和开发者都是我们游戏对象的属性。继承的属性是来自原型的属性。例如，toString 是所有对象的继承属性。

我们可以使用 Object.keys() 实用程序获取对象的所有拥有的键。

const game = {
 name: 'Fornite',
 developer: 'Epi Games'
};
console.log(Object.keys(game));
//["name", "developer"]

类似地，我们可以使用Object.values()获取所有值。

console.log(Object.values(game));
//["Fornite", "Epi Games"]

Object.entries() 检索包含所有拥有的 [key, value] 对的字段。

console.log(Object.entries(game));
//[
//["name", "Fornite"],
//["developer", "Epi Games"]
//]

Object.keys、Object.values 和 Object.entries 都返回一个字段。一旦我们有了这个javascript 获取对象属性，我们就可以开始使用链表方法。

14.使用对象来模拟场

是的，数组是使用对象模拟的。考虑以下字段。

const games = [
  {name: 'Candy Crush', developer: 'King'},
  {name: 'Angry Birds', developer: ' Rovio Entertainment'}
];

它是使用类似于下面的对象进行模拟的。

{
 '0' : {name: "Candy Crush", developer: "King"},
 '1' : {name: "Angry Birds", developer: " Rovio Entertainment"}
}

这就是为什么我们可以使用数字索引和字符串来访问相同的元素。请记住，非字符串键将转换为字符串，因此数组索引将转换为字符串。

console.log(games[1] === games['1']);
//true

15. 对象是哈希图

JavaScript 中的对象类似于其他语言中的映射或哈希表，键的访问时间为 O(1)。

这就是为什么您可能会听到将对象用作地图来搜索唯一键的原因。

const gamesMap = {
  1 : {name: 'Fornite', developer: 'Epic Games'},
  2 : {name: 'Candy Crush', developer: 'King'},
  3 : {name: 'Angry Birds', developer: ' Rovio Entertainment'}
}