📜 前言
在编程的世界里，JavaScript 就像漫威宇宙的 无限宝石，掌握它，你就能操控网页的动态、构建交互式应用，甚至开发全栈系统！但和所有超级英雄一样，学习 JS 也需要从基础力量开始 —— 变量、数据类型、函数、对象，这些就是你的 “蜘蛛感应” 和 “钢铁战甲”。
在这篇文章中，我们将用 钢铁侠 来讲解 JavaScript 对象（Object），让新手不仅能理解代码逻辑，还能像编写 复仇者联盟剧本 一样享受编程的乐趣！
💡 你会学到：
-
对象（Object） 如何存储数据，比如钢铁侠的战甲、灭霸的无限手套
-
方法（Method） 如何让对象“动”起来，比如
ironMan.attack()
-
数组（Array）、字符串（String）、数字（Number） 在对象里的使用
-
动态属性访问，像
ironMan.weaponKind[0]
准备好了吗？让我们进入 “JavaScript 漫威宇宙”，用代码书写你的超级英雄传奇！
如何运行JavaScript？
前端运行
JS是一门脚本语言，最初是用来给页面增加动态交互效果的，所以它可以在浏览器中被运行，我们可以创建一个index.html和1.js,将js文件引入html的script中，利用右键，选择Open with Live Server打开文件。
当然要先下载在浏览器中打开的两个插件，才会显示相应选项：
后端运行
我们可以利用node.js来运行JavaScript代码，在 nodejs.org/zh-cn 下载node.js到C盘，安装后点击右键1.js，选择在终端打开，之后在终端输入命令node 1.js即可打开文件。
利用node打开js文件命令：node filename.js
注意:这个文件必须在当前打开的目录下！
初识 JavaScript 对象：Ironman / Thanos
代码世界就是现实世界的数字分身
在编程中，我们通过 对象（Object） 来映射现实世界的实体——就像钢铁侠的战甲档案存储了他的能力参数，灭霸的宝石手套记录着毁灭宇宙的规则。
- 每个 属性（property） 都是特征（如
thanos.power = 'Infinity Gauntlet'）
- 每个 方法（method） 都是行为（如
ironman.fly()）
- 数据与功能的结合，就是编程对现实的 数字建模
那么我们的Tony Stark在数字世界的抽象就是这样的：
const ironMan = {
name: "Tony·Stark",
age: 48,
weaponKind: ["Mark-50", "Jericho Missile", "Arc Pulse Cannon"],
job: "Leader of The Avengers/Engineer/Billionaire",
hobby:['make Armor','play with girls'],
alive:true,
}
动态语言 / 弱类型语言
从上面的例子我们可以看到，我们抽象托尼屎大颗到软件的世界中时，对于他的各个属性都是由Key:Value的结构组成，即直接写变量名，再写对应的内容，也就是说：变量的类型是由变量值决定的,不需要提前定义变量的类型，这就体现了JavaScript的动态性，其相对于C、Java这种静态性语言来说是很随意的，哎！我可以先声明一个变量，但不给他赋值 (动态性)，我愿意这个变量是什么值，它就可以改成什么值 （弱类型），比如：
var name;
console.log(name); // undefined 未定义
name = "Tony·Stark"
console.log(name); // JS中的printf，作用为输出内容 输出：Tony·Stark
name = 1;
console.log(name); // 输出: 1
name = ['1','2','3'];
console.log(name); // 输出：['1','2','3']
/*嘿！同一个变量，即使后面重新赋值改变为不同的类型也不会报错，这就是弱类型语言的魅力！*/
JavaScript可以做到先创建对象再赋值也不会报错，体现了其动态性，到了执行时会自动判断变量的类型，而C或Java等静态性语言则必须在编译之前确定好某个变量的类型，否则在编译时会报错，而对于弱类型，JavaScript的变量可以根据环境变化自己转变类型，不需要强转，而强类型语言则必须要强转才能改变变量的类型
JS的数据类型
我们可以从上面的例子中看到，Stark同志的各个属性都对应着不同的数据类型：
const ironMan = {} // 对应的是Object（对象）数据类型
// 对象数据类型的声明就是 一个变量名 + 一个{}即可，随意吧哈哈哈哈哈
name: "Tony·Stark", // String（字符串）数据类型
age: 48, // Number（数字）数据类型
weaponKind: ["Mark-50", "Jericho Missile", "Arc Pulse Cannon"], // 数组（也属于 Object ）
job: "Leader of The Avengers/Engineer/Billionaire", // String
hobby:['make Armor','play with girls'], // 数组
alive:true, // Boolean（布尔）数据类型，其只有两个值：true/false
JS一共有几种数据类型？（面试必考）
当然上面的不是全部的数据类型，实际上，JavaScript一共有7种数据类型，它们分别是：
Numeric、String、Boolean、null、undefined、Object、Symbol（ES6新增）
Numeric 包括 Number和bigInt（ES6新增）
而JavaScript的数据类型又可以分为简单数据类型和复杂数据类型，复杂数据类型只有Object，其他均为简单数据类型。
🕳️关于null和undefined
null和undefined虽然都表示“无”的概念，但它们的语义完全不同：
// 就像灭霸的响指造成的两种不同结果：
const vanishedHeroes = null; // 明确被消灭的英雄
const missingHeroes = undefined; // 从未出现过的英雄
Undefined
-
类型：undefined
-
含义： "这里应该有值，但还未定义"
-
产生方式：
- 变量声明但未赋值
- 函数参数未传递
- 访问对象不存在的属性
- 函数没有返回值
// 像未激活的战甲功能
let newFeature; // 自动获得 undefined
const suit = { name: "Mark XLII" };
console.log(suit.color); // undefined (不存在该属性)
function deployArmor(version) {
// version 可能为 undefined
return this.version;
}
Null
-
类型：
object (历史遗留的 bug，实际应为 null 类型)
- PS: 后来想改的，但是历史遗留代码太多，官方不敢改了hhhhhhh
-
含义： "这里有值，但值为空"
-
使用场景：主动赋值表示空值
// 就像主动清空战甲库存
let starkArmory = null; // 明确表示"没有战甲"
// 典型应用场景：
1. 作为函数的参数，表示"不需要传入值"
2. 作为对象属性的值，表示"清空该属性"
3. DOM 获取元素不存在时的返回值
🛠️ 为Iron Man装配方法函数：从数据类型到行为能力
现在我们的屎大颗同志已经有了基本的属性，但他目前像个植物人一样没有行动能力，接下来就让我们利用函数（Function） 来给他加装能力吧！
首先，我们的Tony Stark同志是一个非常花心的人，那么他就很喜欢勾搭其他美丽的异性，就会有以下能力：
Function hitOnGirl(girlName) {
const pickUpLines = [ `Hey ${girlName}, 我的战甲需要充电，而你就是我的电源。`,
`${girlName}，你是方舟反应堆吗？因为你让我的心跳加速了。`,
`我不是在找J.A.R.V.I.S，我是在找Mrs.Stark，你觉得怎么样？`,
`我的Mark战甲能承受40000英尺高空，但承受不住你的眼神。`,
`比起拯救世界，我更想拯救你的通讯录——把我的号码存进去。` ];
return pickUpLines[Math.floor(Math.random() * pickUpLines.length)];
}
当我们把这一段代码加入到Tony Stark的虚拟人设中，他就有了到处勾搭妹妹的能力了，那么他会怎么勾搭妹妹呢？取决于 return的随机撩妹话语~
接下来让我们从这一段花心男人的鬼话继续了解JavaScript的设计思想和语法~
函数（Function）
为什么要有函数？
函数的结构如下：
其功能是封装一段逻辑，就像把这一段逻辑打包了一样，装在了一个箱子里，通过函数名我们可以实现对此函数的调用，使用里面的逻辑，这个函数名就像是贴在箱子上的标签，也就是这段逻辑暴露在外的接口。
为什么要把一段逻辑封装成函数呢？就像我们的花心男Stark一样，他不局限于1个美女，他喜欢好多美女，所以当他遇见美女时要多次运用这些话术，来获得妹妹的心！也就是说，同样的一些话Stark会经常使用，所以我们就可以封装成一个函数，使其可以复用！
如何去调用一个函数？
const ironMan = {
name: "Tony·Stark",
age: 48,
weaponKind: ["Mark-50", "Jericho Missile", "Arc Pulse Cannon"],
job: "Leader of The Avengers/Engineer/Billionaire",
hobby:['make Armor','play with girls'],
alive:true,
hitOnGirl: Function(girlName) { // 在这里hitOnGirl是一个变量，它的值是一个函数
const pickUpLines = [ `Hey ${girlName}, 我的战甲需要充电，而你就是我的电源。`,
`${girlName}，你是方舟反应堆吗？因为你让我的心跳加速了。`,
`我不是在找J.A.R.V.I.S，我是在找Mrs.Stark，你觉得怎么样？`,
`我的Mark战甲能承受40000英尺高空，但承受不住你的眼神。`,
`比起拯救世界，我更想拯救你的通讯录——把我的号码存进去。` ];
return pickUpLines[Math.floor(Math.random() * pickUpLines.length)];
}
// 如何在全局调用函数呢？可以像下面这么做
ironMan.hitOnGirl('Pepper');
}
我们使用了ironMan.hitOnGirl('Pepper'),意思就是我们调用了ironMan中的hitOnGirl函数，传递了参数girlName为Pepper,这体现了面向对象的思维，动态的访问属性。
//比如我们要访问Stark的其他属性,都可以用对象名.属性名（或方法名）来访问：
ironMan.name; // Tony·Stark
ironMan.age; // 48
ironMan.weaponKind; // ["Mark-50", "Jericho Missile", "Arc Pulse Cannon"]
对hitOnGirl方法(Method)详解
不需要纠结，方法就是函数，只不过是在对象之中嘛，成了对象专用的一个函数，我们一般把它叫做方法（Method）.
Function hitOnGirl(girlName) {
const pickUpLines = [ `Hey ${girlName}, 我的战甲需要充电，而你就是我的电源。`,
`${girlName}，你是方舟反应堆吗？因为你让我的心跳加速了。`,
`我不是在找J.A.R.V.I.S，我是在找Mrs.Stark，你觉得怎么样？`,
`我的Mark战甲能承受40000英尺高空，但承受不住你的眼神。`,
`比起拯救世界，我更想拯救你的通讯录——把我的号码存进去。` ];
return pickUpLines[Math.floor(Math.random() * pickUpLines.length)];
}
这一段逻辑究竟有啥用呢？且听我娓娓道来~
字符串模板
首先映入眼帘的是这段代码：
const pickUpLines = [ `Hey ${girlName}, 我的战甲需要充电，而你就是我的电源。`,
`${girlName}，你是方舟反应堆吗？因为你让我的心跳加速了。`,
`我不是在找J.A.R.V.I.S，我是在找Mrs.Stark，你觉得怎么样？`,
`我的Mark战甲能承受40000英尺高空，但承受不住你的眼神。`,
`比起拯救世界，我更想拯救你的通讯录——把我的号码存进去。` ];
这是一个const常量，其中的值不可以后续修改，它是一个数组，里面有5句话，每一句都是Tony在女孩子身上用过无数次的。
两个 ` ` (反引号，在tab键上方) 就组成了字符串模板，其作用就是使得我们的数据表达更加方便，让我们来看同一段话在C语言和JavaScript（不用字符串模板）的表达：
printf("Hello %s, your armor is %d%% charged.\n", name, charge);
console.log( "Hello " + name + ", your armor is " + (10 - 2) + "% charged.");
而利用字符串模板：
console.log(`Hello ${Name},your armor is ${10-2}% charged.`)
加上反引号，可以对${}中的内容进行识别，其内容可以是参数，也可以是一段逻辑运算，字符串模板还有保留换行等作用。
面向对象的思想
接下来就是这一段代码：
return pickUpLines[Math.floor(Math.random() * pickUpLines.length)];
这是hitOnGirl函数的返回值，返回的是pickUpLines中的随机一句话，这里运用了Math对象，我们的JavaScript也是有面向对象的特性的，对于random、floor等数学方法，我们都将其封装在了Math对象中，从Math对象中获得引用。
return pickUpLines[] 显示是获取数组中的某个值，
Math.floor() 对某个数向下取整
Math.random() 从0~1中取随机数（不包括1）
pickUpLines.length pickUpLines数组的长度，其一共有5句话所以pickUpLines.length=5,
这样的话Math.floor(Math.random() * pickUpLines.length)的取值范围就控制在了0~4之间，可以随机到任何一句话（因为数组下标从0开始，由0~4正好对应5句话）
结语：从Iron Man到编程，从新手到开发者
在 Tony Stark 的实验室里，J.A.R.V.I.S. 通过 JavaScript 对象组织数据，用函数完成复杂的逻辑运算，用模板字符串优雅地拼接对话。这些概念不仅是代码的组成部分，也是构建智能系统的基石——就像钢铁侠的战甲一样，每一行代码都是精密的零件，组合起来才有强大的威力。
学习 JavaScript 的数据类型、对象、函数和模板字符串，就像解锁了战甲的第一层功能。未来，你还会接触更多高级概念（如 Symbol、原型链、异步编程），就像 Tony 不断升级 Mark 系列战甲，从基础款进化到纳米战甲。
记住：
-
对象（Object） 是组织数据的工具箱
-
函数（Function） 是让代码灵活运转的 AI 助手
-
模板字符串 让字符串拼接更优雅，就像 J.A.R.V.I.S. 的流畅交互
Keep coding, and you'll build your own suit someday. ⚡💻
登录