跳转到内容

JavaScript/对象

来自维基教科书,开放的书籍,开放的世界



在 JavaScript 中,一个对象属性的集合;属性是键值对。键是字符串或符号。值可以是任何数据类型 - 包括函数(在这种情况下,它们被称为方法)。

对象看起来像关联数组,以哈希表的形式实现。但在实践中,JavaScript 引擎可能以其他方式实现它们以实现最佳性能。

请注意,JavaScript 对象与 JSON 不完全相同。JSON 是一种用于对象文本表示(“序列化”/“反序列化”)的格式,也可以在其他语言或纯文本编辑器中完成。

创建对象

[编辑 | 编辑源代码]

JavaScript 语法支持不同的方法来创建对象。

'字面量表示法' 使用大括号 { }

"use strict";

// an empty object (no properties)
const obj_0 = {};
alert(JSON.stringify(obj_0));

// 'obj_1' contains a set of 3 properties. The value of key 'c' is
//         a second object with an empty set of properties.
const obj_1 = { a: "Any string", b: 42, c: {} };
alert(JSON.stringify(obj_1));

// using variables
const a = "Any string";
const b = 42;
const c = {};
const obj_2 = { a: a, b: b, c: c };
alert(JSON.stringify(obj_2));

// shorthand usage of variables
const obj_3 = { a, b, c };
alert(JSON.stringify(obj_3));

构造函数
new Object() 构造函数创建一个新对象。

"use strict";
const obj_4 = new Object({ a: 5, b: 42 });
alert(JSON.stringify(obj_4));

Object.create()
Object.create() 方法从现有对象创建一个新对象。

"use strict";
const obj_5 = Object.create({ a: 5, b: 42 });
alert(JSON.stringify(obj_5));  // ???
alert(JSON.stringify(obj_5.a));
console.log (obj_5);

读取属性

[编辑 | 编辑源代码]

每个属性都包含一个键值对。要读取属性的值,可以使用两种语法方式中的任何一种,即点表示法方括号表示法

"use strict";
const person = {firstName: "Albert", lastName: "Einstein" };

// dot notation
alert(person.firstName);   // no " " or ' '

// bracket notation
alert(person["firstName"]); // must use a string

// bracket notation using a variable
const fn = "firstName";
alert(person[fn]);

如果您不知道键怎么办?要获取所有现有键的列表,请使用Object.keys() 方法。它返回一个数组,其元素是字符串。这些字符串可以在循环中使用以访问值。由于在许多情况下需要这样的循环,JavaScript 为这种情况提供了一个特殊的语言元素。for .. in 循环选择键并循环遍历所有属性。

"use strict";
const person = {firstName: "Albert", lastName: "Einstein" };
alert(Object.keys(person));   // firstName, lastName

// The for .. in loop selects all existing keys and loops over the properties
for (const k in person) {
  alert('The key is: ' + k + '. The value is: ' + person[k]);
}

类似于Object.keys() 方法,还有两种方法Object.values()Object.entries() 用于分别获取值和属性(键和值)。在后一种情况下,您将获得一个数组数组(每个数组有两个元素)。

"use strict";
const person = {firstName: "Albert", lastName: "Einstein" };
alert(Object.values(person));   // Albert, Einstein

// for .. of loops differ from for .. in loops in syntax AND semantic; see chapter 'Loops'
for (const [k, v] of Object.entries(person)) {
  alert('The key is: ' + k + '. The value is: ' + v);
}

添加或修改属性

[编辑 | 编辑源代码]

您可以使用点表示法方括号表示法来添加或修改属性。上面读取操作和写入操作的语法之间没有区别。

"use strict";
const person = {firstName: "Albert", lastName: "Einstein" };

// add properties
person.bornIn = "Ulm";
person["profession"] = "Physicist";
alert(JSON.stringify(person));

// modify properties
person.bornIn = "Germany";
person["profession"] = "Theoretical Physics";
alert(JSON.stringify(person));

在上面的示例中,变量“person”是用关键字const 创建的。因此无法为它分配新值,但可以操作其属性。在操作属性时,原始对象保持不变。

删除属性

[编辑 | 编辑源代码]

delete 运算符从对象中删除整个属性 - 包括键和值。这与将nullundefined 存储在值中的情况不同。

同样,您可以使用点表示法方括号表示法

"use strict";
const person = {firstName: "Albert", lastName: "Einstein", bornIn: "Ulm", profession: "Physicist" };

delete person.bornIn;
delete person["profession"];
alert(JSON.stringify(person));

合并对象

[编辑 | 编辑源代码]

JavaScript 提供了“扩展语法”(三个点)。它将对象扩展为其属性(键值对)或将数组扩展为其元素。当您想要将多个对象合并为单个对象时,这可能很有用。

"use strict";
const person = {firstName: "Albert", lastName: "Einstein" };
const address = {city: "Ulm" };

// expand the two objects (and merge them)
const newPerson = {...person, ...address};
alert(JSON.stringify(newPerson));
// The result is an object with 3 properties. All values are strings.
// {firstName: "Albert", lastName: "Einstein",city: "Ulm"}

// which is different from the version without the 'spread syntax':
const newPerson1 = {person, address};
alert(JSON.stringify(newPerson1));
// The result is an object with 2 properties. Both values are objects.
// {person: {firstName: "Albert", lastName: "Einstein"}, address: {city: "Ulm"}}

函数/方法作为对象的一部分

[编辑 | 编辑源代码]

属性的值部分可能包含一个函数体;参见此处。在这种情况下,该函数称为方法

"use strict";

// only definitions here, no execution!
const city = {
  showName: function (cityName) {
              if (typeof cityName === "undefined") {
                alert("Sorry, I don't know my name.");
              } else {
                alert("The name of the city is: " + cityName);
              }
            },

  // this works too!
  showPopulation(count) {
    alert(count + " Inhabitants");
  },
};

// JSON's 'stringify()' doesn't support the serialization of methods. Use 'console.log()' instead.
console.log(city);

// executions
city.showName();
city.showName("Nairobi");
city.showPopulation(4500000);
...可在另一个页面上找到(点击此处)。
华夏公益教科书