0Pricing
JavaScript Academy · 课时

数组的增删改查与迭代；对象基础与访问

数组的增删改查与迭代；对象字面量，以及使用点号、方括号和可选链访问属性

数组的增删改查与迭代；对象基础与访问 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 2 节课。

简介

目标：使用简单、安全的方式处理数组和对象。

  • 数组的增删改查
  • 遍历值
  • 访问对象
数组的增删改查与迭代；对象基础与访问 — 插图 1

数组增删改查基础

使用 push/unshift 添加元素，使用 pop/shift 移除元素。在移动设备上，请让输出内容保持简短。

// Make an array
const colors = ["red", "green"];

// Add to end
colors.push("blue");

// Add to start
colors.unshift("pink");

// Remove from end
const last = colors.pop();

// Remove from start
const first = colors.shift();

console.log("Colors now:", colors);
console.log("Removed:", first, last);
数组的增删改查与迭代；对象基础与访问 — 插图 2

索引与长度

使用索引访问和长度进行简单读取。

// Read by index and use length
const nums = [10, 20, 30];

console.log("First:", nums[0]);
console.log("Last:", nums[nums.length - 1]);
console.log("Count:", nums.length);
数组的增删改查与迭代；对象基础与访问 — 插图 3

数组遍历

for…of 会直接得到值；forEach 会为每个值调用一次函数。

// Iterate values with for…of
const fruits = ["apple", "banana", "cherry"];

for (const value of fruits) {
  console.log("of:", value);
}

// Or use forEach with a small callback
fruits.forEach(function (v) {
  console.log("each:", v);
});
数组的增删改查与迭代；对象基础与访问 — 插图 4

对象字面量与访问

对象存储键值对。请使用点号或方括号访问。

// Create an object with properties
const user = {
  name: "Ayla",
  level: 1,
  active: true
};

// Dot access
console.log("Name:", user.name);

// Bracket access (useful for dynamic keys)
const key = "level";
console.log("Level:", user[key]);
数组的增删改查与迭代；对象基础与访问 — 插图 5

可选链与展开

?. 会在路径缺失时避免错误。使用 ... 展开语法复制和合并对象（后面的键会覆盖前面的键）。

// Optional chaining: safely read nested values
const profile = { contact: { email: "ayla@example.com" } };
console.log("Email:", profile.contact?.email);
console.log("Twitter:", profile.social?.twitter);

// Clone and merge with spread
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const clone = { ...base };
const merged = { ...base, ...extra };

console.log("Clone:", clone);
console.log("Merged:", merged);
数组的增删改查与迭代；对象基础与访问 — 插图 6

数组方法小测

快速检查：向数组末尾添加元素。

数组的增删改查与迭代；对象基础与访问 — 插图 7

回顾

回顾：您练习了数组的增删改查，使用 for…of/forEach 进行遍历，访问了对象属性，使用了可选链，并使用展开语法进行了复制和合并。

数组的增删改查与迭代；对象基础与访问 — 插图 8

常见问题解答

「数组的增删改查与迭代；对象基础与访问」课时是免费的吗？

是的 — 「数组的增删改查与迭代；对象基础与访问」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 2 节课。

「数组的增删改查与迭代；对象基础与访问」这节课中我会学到什么？

数组的增删改查与迭代；对象字面量，以及使用点号、方括号和可选链访问属性 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 2 节。

「数组的增删改查与迭代；对象基础与访问」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 数组的增删改查与迭代；对象基础与访问
  2. 克隆与合并——展开语法和 Object.assign
← 返回 JavaScript Academy