🚀 由Tony Stark 带你入门 JavaScript（新手向）🚀

📜 前言

在编程的世界里，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. ⚡💻