对象和数组是 JavaScript 的容器。掌握它们意味着掌握数据结构操作。
对象 (键值对)
javascript
const user = {
name: "Jane Doe",
age: 28,
role: "Admin"
};
// 点符号 (整洁)
console.log(user.name);
// 括号符号 (动态)
const propToCheck = "role";
console.log(user[propToCheck]);解构 (解包)
手提箱比喻
想象一个对象是一个打包好的手提箱。
解构 就是打开手提箱,直接把物品拿出来放到你手里。
javascript
const settings = {
theme: "dark",
fontSize: 16,
wifi: true
};
// 旧方式:重复
// const theme = settings.theme;
// const fontSize = settings.fontSize;
// 专业方式:解构
const { theme, fontSize } = settings;
console.log(theme); // "dark"展开运算符 (...)
这将对象或数组“爆炸”成单独的部分。这对 React 至关重要。
javascript
const baseUser = { name: "John", age: 30 };
// 创建一个新对象,从 baseUser 复制所有内容,并添加属性
const updatedUser = { ...baseUser, isActive: true };
console.log(updatedUser);
// { name: "John", age: 30, isActive: true }数组和方法
javascript
const stack = ["HTML", "CSS", "JS"];
// 数组解构
const [first, second] = stack;
console.log(first); // "HTML"
// 数组展开 (合并)
const backend = ["Node", "SQL"];
const fullStack = [...stack, ...backend];
console.log(fullStack);