15 个你应该知道的JavaScript 对象基础知识_js教程

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

15 个你应该知道的JavaScript 对象基础知识

创建对象的最简单方法是使用对象字面量。我们在花括号 {} 中定义了一组属性，用逗号分隔。下面是一个例子。

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

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

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

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

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

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]);

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

5. 对象继承自其他对象

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

game.__proto__ === Object.prototype;

即使我们没有定义这样的方法，游戏对象也有类似 toString 或 toLocaleString 的属性。它们继承自 Object.prototype 对象。

console.log(game.toString); console.log(game.toLocaleString);

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

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

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

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

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

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

const obj = {}; console.log(obj.toString); delete obj.toString console.log(obj.toString);

当我们更改 toString 属性时，会在当前对象中添加一个新属性，原型不会更改。此时，当前对象和原型都有一个同名的属性，使用当前对象中的那个。

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

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

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

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

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

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

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

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

属性的值可以是任何类型。属性可以存储对象。考虑下一个例子，其中 developer 是一个对象而不是一个字符串。

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());

当函数存储在对象上时，它可以用作方法。请注意，在方法中，我们可以使用 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}`;
  };

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

对象有两种属性，拥有的属性是在对象本身上定义的。例如 name 和 developer 是我们游戏对象的所有属性。继承的属性是来自原型的属性。例如，toString 是所有对象的继承属性。

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

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

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

console.log(Object.values(game));

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

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

Object.keys、Object.values 和 Object.entries 都返回一个数组。一旦我们有了它，我们就可以开始使用数组方法了。

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']);

15. 对象是哈希映射

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

O(1) 意味着无论地图上的数据量如何，访问密钥都需要恒定的时间。
O(n) 意味着它花费的时间与列表的大小成线性关系。列表越大，访问时间越大。

这就是为什么你可能会看到对象用作映射来搜索唯一键。

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

我们现在可以使用 gamesMap 地图在恒定时间 O(1) 内通过 id 获取游戏对象，而无需遍历列表。

总结

以上这些就是你需要了解的有关 JavaScript 对象的一些最重要的知识概念，希望这些内容对你有所帮助，如果你觉得有用的话，请不要忘记点赞我，关注我，并将它与你的开发者朋友一起来分享这篇文章，也许能够帮助到他。

最后，感谢你的阅读。

原文地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649132901&idx=1&sn=552a5e5ce1b1a5dae81f3c49057de910&chksm=be58a8c8892f21de74d90ec3fbb4921dfcdc49570b1275cfb7a2ffe63b50aea2a4ad49a23dca