飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

JavaScript 对象

时间:2021-11-25  作者:匿名  

对象

正如我们在 数据类型 一章学到的,JavaScript 中有八种数据类型。有七种原始类型,因为它们的值只包含一种东西(字符串,数字或者其他)。

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

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

我们可以把对象想象成一个带有签名文件的文件柜。每一条数据都基于键(key)存储在文件中。这样我们就可以很容易根据文件名(也就是“键”)查找文件或添加/删除文件了。

我们可以用下面两种语法中的任一种来创建一个空的对象(“空柜子”):

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

文本和属性

我们可以在创建对象的时候,立即将一些属性以键值对的形式放到 {...} 中。

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

属性有键(或者也可以叫做“名字”或“标识符”),位于冒号 ":" 的前面,值在冒号的右边。

user是我们给这个对象取的名字,在 user 对象中,有两个属性:

第一个的键是 "name",值是 "John"。取名叫name简单易懂,一看就知道这个是它的名字的意思。

第二个的键是 "age",值是 30。

生成的 user 对象可以被想象为一个放置着两个标记有 “name” 和 “age” 的文件的柜子。

我们也可以把对象理解为一个其他实物,比如一个人,这个人会有属性:身高、体重、肤色、胸围等等。这个人是可以给我们创造的,所以我们可以调用它的身高,也可以设定他的身高,还可以给它增加奇怪的属性,比如增加一个叫做放屁值或者口气值的东西。

我们可以随时添加、删除和读取文件。

可以使用点符号访问属性值:

// 读取文件的属性:
alert( user.name ); // John
alert( user.age ); // 30

属性的值可以是任意类型,让我们加个布尔类型:

user.isAdmin = true;

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

delete user.age;

我们也可以用多字词语来作为属性名,但必须给它们加上引号:

let user = {
  name: "John",
  age: 30,
  "likes birds": true,  // 多词属性名必须加引号
};

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

方括号

对于多词属性,点操作就不能用了:

// 这将提示有语法错误
user.likes birds = true

JavaScript 理解不了,这个时候我们就需要用到方括号。

let user = {};
// 设置
user["likes birds"] = true;
// 读取
alert(user["likes birds"]); // true
// 删除
delete user["likes birds"];

在这里,变量 key 可以是程序运行时计算得到的,例如我们这样写:

let key = "likes birds";
alert( user.key ) // 这里的效果等同于 alert(user["likes birds"]);

计算属性

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

例如:

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};
alert( bag.apple ); // 5 如果 fruit="apple"

在这个例子中,对象bag的属性是由我们输入得到的,当你输入apple的时候,等同于:

let bag = {
  apple: 5,
};

我们可以在方括号中使用更复杂的表达式:

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

我们在这里使用的是fruit + 'Computers',等同于设置了一个属性名叫appleComputers的属性。

属性名称限制

我们已经知道,变量名不能是编程语言的某个保留字,如 “for”、“let”、“return” 等……

但对象的属性名并不受此限制:

// 这些属性都没问题
let obj = {
  for: 1,
  let: 2,
  return: 3
};
alert( obj.for + obj.let + obj.return );  // 输出6

简而言之,属性命名没有限制。属性名可以是任何字符串或者 symbol(一种特殊的标志符类型,将在后面介绍)。

其他类型会被自动地转换为字符串。

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

let obj = {
  0: "test" // 等同于 "0": "test"
};
// 都会输出相同的属性(数字 0 被转为字符串 "0")
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的属性)

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

相比于其他语言,JavaScript 的对象有一个需要注意的特性:能够被访问任何属性。即使属性不存在也不会报错!

读取不存在的属性只会得到 undefined。所以我们可以很容易地判断一个属性是否存在:

let user = {};
alert( user.noSuchProperty === undefined ); // 返回true 意思是没有这个属性

这里还有一个特别的,检查属性是否存在的操作符 "in"。

语法是:

"key" in object

我们通常可以使用in来判断要做的操作,比如:

let user = {
  name: "John",
  age: 30,
  "likes birds": true,  // 多词属性名必须加引号
};
if("name" in user){  //如果存在name属性
    alert( obj["name"] );//弹出提示 user对象的名字属性值 John
}

遍历对象的属性“for…in” 循环

语法:

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

让我们列出 user 所有的属性和值,下面一个网页中的一段语句:

<!DOCTYPE HTML>
<html>
<body>
  <script>
    let user = {
      name: "John",
      age: 30,
      isAdmin: true
    };
    for (key in object) {
      // keys
      alert( key );  // 依次输出属性名 name, age, isAdmin
      // 属性键的值
      alert( user[key] ); // 依次输出属性的值 John, 30, true
    }
  </script>
</body>
</html>

说道遍历,那么问题来了,属性挨个输出的时候,会被排序吗?谁先出来谁后出来?

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

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};
for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

上面的属性名都是整数,这样的话,它就会自动按从小到大的顺序排序,小的先出现。

但是如果属性名不是数字的时候,根据你建立时候的先后顺序来:

let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // 增加一个属性,开始没有被定义,我们可以直接这样增加。
// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {
  alert( prop ); // name, surname, age
}
搜你所爱
JavaScript基础教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。