对象

72 阅读5分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

前言

  • 对象用来存储键值对和更复杂的实体。在 JavaScript 中,对象几乎渗透到了这门编程语言的方方面面。所以,在我们深入理解这门语言之前,必须先理解对象。

  • 我们可以通过花括号 {…} 来创建对象。一个属性就是一个键值对(“key: value”),其中键(key)是一个字符串(属性名),值(value)可以是任何值。

image.png

  • 对象就像上图的柜子,而key就是一个个文件,而数据就是文件内容,我们不需要操作数据只需根据key进行相关操作即可
  • 可以用下面两种语法中的任一种来创建一个空的对象(常用第二种)
let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

文本和属性

let user = { // 一个对象 
name: "John", // 键 "name",值 "John" 
age: 30, // 键 "age",值 30 
};

// 读取文件的属性:
alert( user.name );  // John 
alert( user.age ); // 30
  • 这里user是个对象,里面有两个属性(name和age),使用点符号访问属性值

  • 列表中的最后一个属性应以逗号结尾,这叫做尾随(trailing)或悬挂(hanging)逗号。这样便于我们添加、删除和移动属性,因为所有的行都是相似的。

  • 属性命名没有限制。属性名可以是任何字符串或者 symbol(一种特殊的标志符类型,将在后面介绍)。其他类型会被自动地转换为字符串。

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

例如,当数字 0 被用作对象的属性的键时,会被转换为字符串 "0"

可以用 delete 操作符移除属性:

delete user.age;

此外,如果我们想用多字词语来作为属性名,必须加上引号

"likes birds": true

  • 这时候点符号不能用来访问属性了
// 这将提示有语法错误
   user.likes birds = true

点符号要求 key 是有效的变量标识符。这意味着:不包含空格,不以数字开头,也不包含特殊字符(允许使用 $ 和 _)。因此它会把birds当成一个错误处理

  • 解决方法:使用方括号,可用于任何字符串:
// 设置 
user["likes birds"] = true; 
// 读取 
alert(user["likes birds"]); // true 
// 删除 
delete user["likes birds"];
  • 方括号中的字符串要放在引号中,单引号或双引号都可以

  • 方括号同样提供了一种可以通过任意表达式来获取属性名的方式

let key = "likes birds";            
user[key] = true; // 跟 user["likes birds"] = true; 一样

let key = prompt("What do you want to know about the user?", "name"); // 访问变量 alert( user[key] ); // John(如果输入 "name"

计算属性

  • 看下面这两段代码
let fruit = prompt("Which fruit to buy?", "apple");

let bag = { 
[fruit]: 5, 
// 属性名是从 fruit 变量中得到的
[fruit + 'Computers']: 5 // bag.appleComputers = 5
};

// 等同于
let bag = {
[fruit + 'Computers']: 5 // bag.appleComputers = 5
}; 
bag[fruit] = 5; // 从 fruit 变量中获取值 
  • 当创建一个对象时,我们可以在对象字面量中使用方括号。这叫做 计算属性

属性值简写

例如:

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ……其他的属性
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

在上面的例子中,属性名跟变量名一样。这种通过变量生成属性的应用场景很常见,在这有一种特殊的 属性值缩写 方法,使属性名变得更短。

可以用 name 来代替 name:name 像下面那样:

function makeUser(name, age) {
return {
    name, // 与 name: name 相同
    age,  // 与 age: age 相同
    // ...
  };
}

我们可以把属性名简写方式和正常方式混用:

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

属性存在性测试,“in” 操作符

JavaScript 的对象有一个需要注意的特性:能够被访问任何属性。即使属性不存在也不会报错!读取不存在的属性只会得到 undefined。这时候我们就需要in做判断了

let user = { 
name: "John",
age: 30 
};
alert( "age" in user ); // true,user.age 存在 
alert( "blabla" in user ); // false,user.blabla 不存在。


  • in 的左边必须是 属性名,通常是一个带引号的字符串,否则要

let user = { age: 30 };
let key = "age"; 
alert( *key* in user ); // true,属性 "age" 存在

"for..in" 循环

  • 为了遍历一个对象的所有键(key),可以使用一个特殊形式的循环:for..in

语法:

for (key in object) {
  // 对此对象属性中的每个键执行的代码
}

例如,让我们列出 user 所有的属性:

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

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

像对象一样排序

对象有顺序吗?

“有特别的顺序”:整数属性会被进行排序,其他属性则按照创建的顺序显示。详情如下:

例如,让我们考虑一个带有电话号码的对象:

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

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
} 

对象可用于面向用户的建议选项列表。如果我们的网站主要面向德国观众,那么我们可能希望 49 排在第一。

  • 因为这些电话号码是整数,所以它们以升序排列。所以我们看到的是 1, 41, 44, 49

整数属性?那是什么?

  • 这里的“整数属性”指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串。所以,"49" 是一个整数属性名,因为我们把它转换成整数,再转换回来,它还是一样的。但是 “+49” 和 “1.2” 就不行了:
// Number(...) 显式转换为数字
// Math.trunc 是内建的去除小数部分的方法。
alert( String(Math.trunc(Number("49"))) ); // "49",相同,整数属性
alert( String(Math.trunc(Number("+49"))) ); // "49",不同于 "+49" ⇒ 不是整数属性
alert( String(Math.trunc(Number("1.2"))) ); // "1",不同于 "1.2" ⇒ 不是整数属性
  • 所以,为了解决电话号码的问题,我们可以使用非整数属性名来 欺骗 程序。只需要给每个键名加一个加号 "+" 前缀就行了。
let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

现在跟预想的一样了。