从0开始学前端 第二十三课：JavaScript 数组基础

第二十三课：JavaScript 数组基础

学习目标

完成本课程后，您将能够：

1. 理解并创建数组。
2. 学会访问和修改数组中的元素。
3. 掌握数组的基本赋值和复制方法。
4. 了解并使用数组的全部常用方法。

学习内容

1. 创建和访问数组

• 概念: 数组是一种有序集合，可以包含多个值，每个值可以是不同类型的数据。在JavaScript中，数组使用方括号[]定义，元素之间用逗号分隔。
• 创建数组:

  let fruits = ['Apple', 'Banana', 'Cherry'];
  

• 访问数组元素:

  console.log(fruits[0]); // 预计输出: Apple
  console.log(fruits[2]); // 预计输出: Cherry
  

2. 数组赋值

• 概念: 给数组元素赋值是指更改数组中的特定位置的值。
• 数组赋值:

  fruits[1] = 'Blackberry'; // 将第二个元素 Banana 更改为 Blackberry
  console.log(fruits); // 预计输出: ['Apple', 'Blackberry', 'Cherry']
  

3. 数组的全部常用方法

• push & pop: 用于在数组末尾添加和移除元素。

  fruits.push('Dragonfruit');
  console.log(fruits); // 预计输出: ['Apple', 'Blackberry', 'Cherry', 'Dragonfruit']
  fruits.pop();
  console.log(fruits); // 预计输出: ['Apple', 'Blackberry', 'Cherry']
  

• shift & unshift: 用于在数组开头移除和添加元素。

  fruits.shift();
  console.log(fruits); // 预计输出: ['Blackberry', 'Cherry']
  fruits.unshift('Apricot');
  console.log(fruits); // 预计输出: ['Apricot', 'Blackberry', 'Cherry']
  

• slice: 返回数组的一部分，不改变原数组。

  let citrus = fruits.slice(1, 3);
  console.log(citrus); // 预计输出: ['Blackberry', 'Cherry']
  

• splice: 可以用来删除、替换或添加新元素到数组。

  fruits.splice(2, 0, 'Blueberry');
  console.log(fruits); // 预计输出: ['Apricot', 'Blackberry', 'Blueberry', 'Cherry']
  

• concat: 用于连接两个数组。

  let moreFruits = ['Elderberry', 'Fig'];
  let allFruits = fruits.concat(moreFruits);
  console.log(allFruits); // 预计输出: ['Apricot', 'Blackberry', 'Blueberry', 'Cherry', 'Elderberry', 'Fig']
  

• join: 将数组元素连接成一个字符串。

  let fruitString = fruits.join(' and ');
  console.log(fruitString); // 预计输出: 'Apricot and Blackberry and Blueberry and Cherry'
  

• indexOf & includes: 用于查找数组中元素的索引或检查数组是否包含某个元素。

  console.log(fruits.indexOf('Cherry')); // 预计输出: 3
  console.log(fruits.includes('Apple')); // 预计输出: false
  

• sort: 对数组进行排序。

  let numbers = [3, 1, 4, 1, 5, 9];
  numbers.sort();
  console.log(numbers); // 预计输出: [1, 1, 3, 4, 5, 9]
  

• reverse: 颠倒数组中元素的顺序。

  fruits.reverse();
  console.log(fruits); // 预计输出: ['Cherry', 'Blueberry', 'Blackberry', 'Apricot']
  

• map: 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  let lengths = fruits.map(fruit => fruit.length);
  console.log(lengths); // 预计输出: [6, 9, 10, 7]
  

• filter: 创建一个新数组，包含通过所提供函数实现的测试的所有元素。

  let longFruits = fruits.filter(fruit => fruit.length > 7);
  console.log(longFruits); // 预计输出: ['Blueberry', 'Blackberry']
  

• reduce: 对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

  let sum = numbers.reduce((total, number) => total + number, 0);
  console.log(sum); // 预计输出: 23
  

课后练习

1. 创建一个名为 vegetables 的数组，包含至少5种蔬菜。
2. 使用 slice 方法创建 vegetables 的一个副本，并将其存储在另一个变量中。
3. 使用 splice 方法在 vegetables 数组的中间插入至少两种新的蔬菜。
4. 使用 concat 合并 fruits 和 vegetables 数组。
5. 使用 join 将合并后的数组转换为用逗号和空格分隔的字符串。

课后练习解析

1. 创建 vegetables 数组:

   let vegetables = ['Carrot', 'Potato', 'Cucumber', 'Broccoli', 'Spinach'];
   

2. 使用 slice 创建副本:

   let vegCopy = vegetables.slice();
   console.log(vegCopy); // 预计输出: ['Carrot', 'Potato', 'Cucumber', 'Broccoli', 'Spinach']
   

3. 使用 splice 插入新蔬菜:

   vegetables.splice(2, 0, 'Pepper', 'Onion');
   console.log(vegetables); // 预计输出: ['Carrot', 'Potato', 'Pepper', 'Onion', 'Cucumber', 'Broccoli', 'Spinach']
   

4. 使用 concat 合并数组:

   let combined = fruits.concat(vegetables);
   console.log(combined);
   

5. 使用 join 转换为字符串:

   let combinedString = combined.join(', ');
   console.log(combinedString);
   

以上代码示例和预计输出都假定 fruits 数组经过了前面的操作且包含操作后的结果。如果你在实际的练习中重置了 fruits 数组，请用你当前数组的结果来预期输出。

---

章节目录
第二十四课：JavaScript对象