L.Leverage Learn从第一行代码,到读懂真实后端查看项目源码

JavaScript 基础 / 第 3 课

函数、数组与对象

把可重复的步骤写成函数,用数组和对象整理一组相关数据。

◷ 预计 25 分钟 · 面向初学者

当一段操作需要重复使用,可以把它写成函数。函数是有名字的一组指令;参数是调用时交给它的输入,return 把结果交还给调用处。下面定义 double,再传入数字 4 并显示返回值。

function double(number) {
  return number * 2;
}
console.log(double(4)); // 8

定义函数不会立刻执行函数体,写出 double(4) 这样的调用时才运行。调用把 4 交给参数 number,函数计算后由 return 交回 8。没有 return 的函数不会交回计算结果。函数能把一项明确的操作集中在一个名字下,修改时也只需维护这段定义。

数组用方括号按顺序保存多个值,元素之间用逗号隔开。位置编号叫索引,JavaScript 从 0 开始数,因此 colors[0] 是第一个颜色。访问超出范围的位置会得到 undefined,它表示“这里没有可用的值”。length 表示数组里有几个元素。

const colors = ["红", "蓝"];
console.log(colors[0]); // 红
console.log(colors.length); // 2

对象用花括号保存一组有名称的属性。每项写成“属性名: 值”,项之间用逗号。用点号和属性名读取,例如 person.name。如果访问对象中不存在的属性,结果也是 undefined;它不会自动报错,但后续计算可能得不到想要的结果,必要时先检查属性是否存在。

数组适合表示有顺序的一组值,对象适合把不同信息按名称归在一起。比如颜色列表中第一个位置由索引确定;一个人的名字和年龄则分别用 name、age 这样的属性名表示。用方括号或点号读取时,都要确认目标位置或属性确实有值;检查 === undefined 是一种直接做法。

const person = { name: "小林", age: 18 };
console.log(person.name); // 小林
console.log(person.color); // undefined
if (person.color === undefined) {
  console.log("没有颜色信息");
}

函数、数组和对象可以一起用:函数接收一组数据,返回处理后的值。练习:定义函数 firstColor,接收一个颜色数组并返回第一个元素;用 ["绿", "黄"] 调用它并显示结果。

答案:

function firstColor(colors) {
  return colors[0];
}
console.log(firstColor(["绿", "黄"]));

互动练习:写一个纯函数

实现 double(number):返回输入数字的两倍,不修改外部状态。

✓
这一课,你已经能……

定义和调用函数,读写数组元素与对象属性