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

Javascript对象

什么是对象?

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

下面是对象的语法:

javascript 复制代码
var aaa = {
  "弓" : "张",
  "木" : "李",
  "文" : "刘"
}
console.log(aaa)

其中
一对大括号 是创建对象的特定语法,其内部的每一行称为一组++键值对++ ,

而键值对的左侧 存的是右侧 存的是此键对应的 ,中间用++冒号++ 隔开。

多个键值对之间用++逗号++隔开,最后赋值给一个变量保存即可。

在 Javascript 中,一个对象变量其实是其内置类Object的一个实例 (Javascript会自动转换)。

因此它拥有一些类属性类方法,你可以按照实例的语法去读取或调用它们。


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

下面是常见的对象用法:

读取

使用++键++ 来访问对象中的++值++ 。

其语法是:++对象名++ 带上一对++中括号++ ,里面填入++键++即可。

📘 示例

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

添加键值对

将++新值++ 直接赋值给++新键++ 即可。

即:对象名[新键] = 新值

📘 示例

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

删除键值对/移出键值对

使用 delete 关键字即可。

即:delete 对象名[键]

📘 示例

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

修改值/替换值

将++新值++ 直接赋值给++键++ 即可。

即:对象名[键] = 新值

📘 示例

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

空对象

📘 示例

javascript 复制代码
var aaa = {};    // 什么都不填,则为一个空的对象
console.log(aaa);  // 输出:{}

遍历

📘 示例

javascript 复制代码
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

相关推荐
AI进化营-智能译站20 小时前
ROS2 C++开发系列12-用多态与虚函数构建可扩展的ROS2机器人行为模块
开发语言·c++·ai·机器人
iCxhust20 小时前
微机原理实践教程(C语言篇)---A002流水灯
c语言·开发语言·单片机·嵌入式硬件·51单片机·课程设计·微机原理
是上好佳佳佳呀20 小时前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园20 小时前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript
图码20 小时前
如何用多种方法判断字符串是否为回文?
开发语言·数据结构·c++·算法·阿里云·线性回归·数字雕刻
U盘失踪了20 小时前
python curl转python脚本
开发语言·chrome·python
charlie11451419120 小时前
Linux 字符设备驱动:cdev、设备号与设备模型
linux·开发语言·驱动开发·c
handler0120 小时前
Linux 内核剖析:进程优先级、上下文切换与 O(1) 调度算法
linux·运维·c语言·开发语言·c++·笔记·算法
FQNmxDG4S20 小时前
Java泛型编程:类型擦除与泛型方法的应用场景
java·开发语言·python
我星期八休息21 小时前
IT疑难杂症诊疗室:AI时代工程师Superpowers进化论
linux·开发语言·数据结构·人工智能·python·散列表