网页前端开发之Javascript入门篇(9/9)：对象

Javascript对象

什么是对象?
答：其概念跟 Python教程 的字典基本相似，虽然存有一些差异，不过对于目前的教程来讲可以忽略。

下面是对象的语法：

var aaa = {
  "弓" : "张",
  "木" : "李",
  "文" : "刘"
}
console.log(aaa)

其中
一对大括号 是创建对象的特定语法，其内部的每一行称为一组 键值对 ，
而键值对的左侧存的是键，右侧存的是此键对应的值，中间用 冒号 隔开。
多个键值对之间用 逗号 隔开，最后赋值给一个变量保存即可。

在 Javascript 中，一个对象变量其实是其内置类Object的一个实例（Javascript会自动转换）。
因此它拥有一些类属性和类方法，你可以按照实例的语法去读取或调用它们。

注：请在 MinWegPage 上直接在线编写和运行本篇代码，无需安装任何环境。

下面是常见的对象用法：

读取

使用 键 来访问对象中的 值 。
其语法是： 对象名 带上一对 中括号 ，里面填入 键 即可。

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };  // 键值对可以缩写在同一行
var value = aaa["弓"];
console.log(value);  // 输出：张

添加键值对

将 新值 直接赋值给 新键 即可。
即：对象名[新键] = 新值

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出：{'弓': '张', '木': '李', '文': '刘'}
aaa["子"] = "孙";
console.log(aaa);
// 输出：{'弓': '张', '木': '李', '文': '刘', '子': '孙'}

删除键值对/移出键值对

使用 delete 关键字即可。
即：delete 对象名[键]

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出：{'弓': '张', '木': '李', '文': '刘'};
delete aaa["弓"];
console.log(aaa);
// 输出：{'木': '李', '文': '刘'}

修改值/替换值

将 新值 直接赋值给 键 即可。
即：对象名[键] = 新值

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出：{'弓': '张', '木': '李', '文': '刘'}
aaa["木"] = "林";
console.log(aaa);
// 输出：{'弓': '张', '木': '林', '文': '刘'}

空对象

📘 示例

var aaa = {};    // 什么都不填，则为一个空的对象
console.log(aaa);  // 输出：{}

遍历

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
for(key in aaa)
{
  var value = aaa[key];  // 每循环一次就能读到一个新的key
  console.log(key, value);
}
// 输出多行：
// 弓 张
// 木 李
// 文 刘

其中
for…in… 是特定语法（意思：从中取得），与while一样也是一种循环控制语句。

先写入for，带上一个 变量名 来存储每次循环取得的键，
再写入in，带上一个要从中读取的 目标内容 （上例中是对象）。

当目标没有内容可再读取时，循环会自动结束。
在 Javascript 中，对象需要此特殊语法才能遍历到其成员。

本篇的练习题如下：

第1题
创建一个对象friends，包含你两个以上朋友的名字作为键，值为他们的年龄。
打印此字典的长度。
第2题
创建一个对象friends，包含你三个朋友的名字作为键，值为他们的年龄。
使用循环打印出每个朋友的名字。
第3题
创建一个对象box，包含你喜欢的三个食物作为键，值为它们的数量。
使用循环打印出每个食物的数量。

请认真完成所有练习题，勤加练习有助于快速提升你的编程能力。
更多练习题在 https://www.min2k.com/course/docs/web-client/object