JavaScript 快速入门

数组与对象#

在 JavaScript 中，数组和对象是最常用的数据结构。它们允许我们组织和存储数据，是构建复杂应用程序的基础。

数组：有序的元素集合，通过索引访问
对象：键值对的集合，通过键名访问

数组#

数组是一种有序的数据结构，可以存储多个值。在 JavaScript 中，数组可以包含不同类型的元素。

// 创建数组
const fruits = ['苹果', '香蕉', '橙子'];
const mixed = [1, 'hello', true, { name: '张三' }];

// 访问数组元素
console.log(fruits[0]); // '苹果'
console.log(fruits.length); // 3

// 修改数组元素
fruits[1] = '葡萄';
console.log(fruits); // ['苹果', '葡萄', '橙子']

// 添加和删除元素
fruits.push('西瓜'); // 添加到末尾
console.log(fruits); // ['苹果', '葡萄', '橙子', '西瓜']

fruits.pop(); // 删除末尾元素
console.log(fruits); // ['苹果', '葡萄', '橙子']

fruits.unshift('柠檬'); // 添加到开头
console.log(fruits); // ['柠檬', '苹果', '葡萄', '橙子']

fruits.shift(); // 删除开头元素
console.log(fruits); // ['苹果', '葡萄', '橙子']

JavaScript 提供了丰富的数组操作方法，让我们能够方便地处理数组数据。

遍历数组#

const numbers = [1, 2, 3, 4, 5];

// for 循环
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// for...of 循环
for (const num of numbers) {
  console.log(num);
}

// forEach 方法
numbers.forEach((num, index) => {
  console.log(`索引 ${index}: ${num}`);
});

数组转换方法#

const numbers = [1, 2, 3, 4, 5];

// map: 转换每个元素
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 过滤元素
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// reduce: 将数组减少为单个值
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

数组查找方法#

const fruits = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];

// indexOf: 查找元素索引
console.log(fruits.indexOf('香蕉')); // 1
console.log(fruits.indexOf('柠檬')); // -1 (未找到)

// includes: 检查元素是否存在
console.log(fruits.includes('橙子')); // true
console.log(fruits.includes('柠檬')); // false

// find: 查找满足条件的第一个元素
const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
console.log(found); // 4

对象#

对象是键值对的集合，用于存储相关数据。

// 创建对象
const person = {
  name: '张三',
  age: 25,
  isStudent: true,
  hobbies: ['读书', '游泳'],
  address: {
    city: '北京',
    street: '朝阳路'
  }
};

// 访问对象属性
console.log(person.name); // '张三'
console.log(person['age']); // 25
console.log(person.address.city); // '北京'

// 修改对象属性
person.age = 26;
person['isStudent'] = false;

// 添加新属性
person.email = 'zhangsan@example.com';

// 删除属性
delete person.hobbies;

遍历对象#

const person = {
  name: '张三',
  age: 25,
  city: '北京'
};

// for...in 循环
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Object.keys()
const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'city']

// Object.values()
const values = Object.values(person);
console.log(values); // ['张三', 25, '北京']

// Object.entries()
const entries = Object.entries(person);
console.log(entries); // [['name', '张三'], ['age', 25], ['city', '北京']]

对象合并#

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 使用展开运算符
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

// 使用 Object.assign()
const merged2 = Object.assign({}, obj1, obj2);
console.log(merged2); // { a: 1, b: 2, c: 3, d: 4 }

解构赋值与展开运算#

解构赋值#

解构赋值是一种从数组或对象中提取值的便捷方式。

// 数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

// 对象解构
const person = { name: '张三', age: 25, city: '北京' };
const { name, age } = person;
console.log(name, age); // '张三' 25

// 重命名变量
const { name: userName, age: userAge } = person;
console.log(userName, userAge); // '张三' 25

// 默认值
const { country = '中国' } = person;
console.log(country); // '中国'

展开运算符#

展开运算符（...）可以展开数组或对象。

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

// 函数参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

动手试试#

下面是一个简单的练习，帮助你熟悉数组和对象的基本操作。请尝试完成以下任务：

创建一个包含你喜欢的三种水果的数组
向数组中添加一个新的水果
创建一个包含你个人信息的对象
修改对象中的某个属性
使用解构赋值获取对象的某些属性

完成上述练习后，尝试以下扩展任务：

使用数组的 map 方法将水果名称转换为大写
使用 filter 方法筛选出长度大于 2 的水果
使用对象解构时设置默认值
使用展开运算符合并两个对象