🔐 JavaScript Object 对象基础知识

JavaScript 使用对象用来存储键值对和更复杂的实体。

JavaScript 对象是拥有属性和方法的数据。引用数据类型、复合数据类型，在对象中可以保存多个不同数据类型的属性。一个对象可以代表现实中的一个事物。

# 对象基础知识

# 对象的作用

可以统一管理多个数据。

# 对象的组成

属性：属性名（一般为字符串）和属性值（任意）组成。
方法：一种特别的属性，属性值为函数。

对象的创建：使用带有可选 属性列表 的花括号 {…} 来创建对象。一个属性就是一个键值对（ “key: value” ），其中键（ key ）是一个字符串（也叫做属性名），值（ value ）可以是任何值。

两种创建空对象的方法：

「构造函数」语法： let user = new Object();

「字面量」语法： let user = {};

# 计算属性

当创建一个对象时，可以在对象字面量中使用方括号。这叫做 计算属性。例如：

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// 从 fruit 变量中获取值
bag[fruit] = 5;

1
2
3
4
5

使用更复杂的表达式：

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

1
2
3
4

方括号比点符号更强大。它允许任何属性名和变量，但写起来也更加麻烦。所以，大部分时间里，当属性名是已知且简单的时候，就使用点符号。如果我们需要一些更复杂的内容，那么就用方括号。

# 属性值简写

当属性名与属性值相同时，可以缩写为只写属性名：

let user = {
  name,  // 与 name:name 相同
  age: 30
};

1
2
3
4

# 属性名命名

属性名命名没有限制（对于变量名，不能使用保留字）。可以是任何字符串或者 symbol。其他类型会被自动地转换为字符串。

例如：属性名为数字，会被转化为字符串的数字，但是访问对象时，使用数字或者字符串的属性名皆可访问对象的属性。

let obj = {
  0: "test" // 等同于 "0": "test"
};

// 都会输出相同的属性（数字 0 被转为字符串 "0"）
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的属性)

1
2
3
4
5
6
7

# 对象的访问

.属性名 （无论是属性还是方法）。有时不能用，如属性名包含特殊字符 - 或者空格；属性名名不确定时。
['属性名'] 通用。例如， obj['name'] 、 obj['setName']('Simon')
必须使用 [‘属性名’] 访问对象的情况：

// 属性名含有特殊字符时
p['content-type'] = 'text/json'

// 属性名不确定时
var propName = 'myAge'
var value = 18
// p.proName = value 不能用
p[propName] = value

1
2
3
4
5
6
7
8

属性名也可以使用多字词语，但是需要加上引号：
let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 多词属性名必须加引号
};
1
2
3
4
5
此时访问对象同样要使用使用 [‘属性名’] ，或者使用以下方法：
let key = "likes birds";

// 跟 user["likes birds"] = true; 一样
user[key] = true;
1
2
3
4

上面提到使用变量访问对象，为代码带来了灵活性：

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// 访问变量
alert( user[key] );

1
2
3
4
5
6
7
8
9

注意

通过变量访问对象，不可以使用 . 点符号访问。

使用 delete 操作符移除对象属性：

delete user.age

# 属性存在 `in` 操作符

JavaScript 的对象有一个需要注意的特性：能够被访问任何属性。即使属性不存在也不会报错！ 读取不存在的属性只会得到 undefined 。

检查属性是否存在，使用操作符 in ：

let user = { name: "John", age: 30 };

alert( "age" in user ); // true，user.age 存在
alert( "blabla" in user ); // false，user.blabla 不存在。

1
2
3
4

in 的左边必须是 属性名。通常是一个带引号的字符串。

如果省略引号，就意味着左边是一个变量，它应该包含要判断的实际属性名（字符串变量）。

为什么要使用 in 而不仅仅使用与 undefined 比较判断：

大部分情况下与 undefined 进行比较的确没有问题。

但属性存在，并且存储的值是 undefined 的时候，此时与 undefined 比较就存在问题，只能使用 in 。这种情况很少发生，因为通常情况下不应该给对象赋值 undefined 。通常会用 null 来表示未知的或者空的值。因此， in 运算符是代码中的特殊来宾。

# 对象的遍历

使用 for … in 语句遍历对象：

var person = {fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt = txt + person[x];
}

1
2
3
4
5
6

# 对象特殊的顺序

当对象存在整数属性，整数属性会被进行排序，其他属性则按照 创建的顺序 显示。

** 整数属性指的是：一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串。** 而例如 +4 、 1.2 不是整数属性，不能相互转换。

例如：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}
// 如果想要按照创建的顺序输出，给每个属性名加一个‘+’号即可。

1
2
3
4
5
6
7
8
9
10
11
12

# 对象的分类

内建对象：由 ES 标准中定义的对象，在任何的 ES 的实现中都可以使用，为开发者提供一些常用或最基本的功能 / 属性 / 方法，帮助快速开发。

📁 查询参考文档：使用对象 - JavaScript | MDN (mozilla.org) (opens new window)
- Math 对象：Math 对象中具有数学常数和函数的属性与方法；跟数学相关的运算可以使用：
- random() 随机对象
- 日期对象：与 Math 不一样，Date 对象式构造函数，需要实例化后才能使用；
- 数组对象；
- 字符串对象；
宿主对象：由 JavaScript 的运行环境提供的对象，目前来讲主要指由浏览器提供的对象；例如 BOM DOM；
自定义对象：自己创建的对象：

编辑

📢 上次更新: 2022/09/02, 10:18:16

← 🌱 node.js 基本使用 ⌛️ JavaScript 对象的复制与引用→

🔐 JavaScript Object 对象基础知识

# 对象基础知识

# 对象的作用

# 对象的组成

# 计算属性

# 属性值简写

# 属性名命名

# 对象的访问

# 属性存在 in 操作符

# 对象的遍历

# 对象特殊的顺序

# 对象的分类

# 属性存在 `in` 操作符