Javascript数组

学习目标

理解数组的概念：数组是一种特殊的数据类型，可以用来存储一系列的值。你需要理解这个基本概念，以及数组在实际编程中的应用。
创建和访问数组：学习如何创建一个数组，以及如何访问数组中的元素。例如：
数组的长度和索引：理解数组的长度（length 属性）和索引的概念，以及如何使用它们。
数组的方法：JavaScript 提供了大量的数组方法，如 push、pop、shift、unshift、splice、slice、map、filter、reduce 等。你需要理解这些方法的用法，以及它们在实际编程中的应用。
遍历数组：理解如何使用循环（如 for 循环、for...of 循环、forEach 方法等）遍历数组。
理解数组的不变性：在一些编程范式（如函数式编程）中，不推荐直接修改数组，而是使用返回新数组的方法（如 map、filter、concat、slice 等）。理解这一概念，并学习如何编写不改变原数组的代码。

常见的对象：数组（Array）

在学生信息管理的示例中，我们还留下了一个问题没有回答：如何存储很多个学生的信息？

如果你有很多个学生，你还可以使用一类特殊的对象 —— 数组（Array）来存储多个学生的信息。

我们创建一个变量students，然后用以下的代码来存储学生的信息：

<script>
  var students = [{
    name: '张小花',
    id: 'S01',
    age: '8',
    gender: '女'
  }, {
    name: '王小草',
    id: 'S02',
    age: '11',
    gender: '女'
  }, {
    name: '张大花',
    id: 'S03',
    age: '12',
    gender: '女'  
  }, {
    name: '王大草',
    id: 'S04',
    age: '9',
    gender: '女'  
  }];
</script>

在上面的代码中，students是一个数组，它里面存储了四个学生的信息。

如果你有更多的学生，你可以在students里面，照着同样的格式，把其他学生的信息增加进去。

1. 什么是数组？

数组是一种对象，它可以把很多的变量存储在一起，好像排队一样排起来。

数组里的变量可以是各种类型的变量，例如：

<script>
  var numbers = [2, 8, 10, 4, 6];
</script>

这是一个数字组成的数组。

<script>
  var countries = ['China', 'Singapre', 'USA', 'UK'];
</script>

这是一个字符串组成的数组。

在之前的例子中，students是一个对象组成的数组。

怎样识别出一个数组？

数组使用方括号 [] 来表示。当你看到一段代码以[和]开头和结尾，你就可以知道这是个数组。

2. 创建和访问数组

2.1 创建数组

在 JavaScript 中，我们通常使用数组字面量或 new Array() 构造函数来创建数组：

let arr1 = []; // 使用数组字面量创建数组
let arr2 = new Array(); // 使用 new Array() 创建数组

我们也可以在创建数组时直接定义元素：

let fruits = ['apple', 'banana', 'cherry'];

2.2 访问数组

我们可以使用索引来访问数组中的元素：

console.log(fruits[0]); // 输出 "apple"

3. 数组的长度和索引

每个数组都有一个 length 属性，它表示数组中的元素个数。数组的索引是从 0 开始的，所以最后一个元素的索引是 length - 1。

console.log(fruits.length); // 输出 3
console.log(fruits[fruits.length - 1]); // 输出 "cherry"

4. 数组的方法

JavaScript 提供了大量的数组方法，用于操作数组。

4.1 添加和删除元素

push：在数组的末尾添加一个或多个元素，返回新的长度。
pop：删除并返回数组的最后一个元素。
shift：删除并返回数组的第一个元素。
unshift：在数组的开头添加一个或多个元素，返回新的长度。
splice：在数组中添加或删除元素。

4.2 截取和连接数组

slice：返回一个新的数组，包含从 start 到 end（不包括 end）的数组元素。
concat：返回一个新的数组，是调用它的对象与它的参数合并后的新数组。

4.3 遍历和搜索数组

forEach：对数组的每个元素执行一次给定的函数。
map：创建一个新数组，其结果是该数组中的每个元素都调用一个函数后返回的结果。
filter：创建一个新数组，包含通过测试的所有元素。
find：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
reduce：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个输出值。

5. 遍历数组

我们可以使用 for 循环，for...of 循环，forEach 方法等遍历数组的元素：

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
for (let fruit of fruits) {
  console.log(fruit);
}
fruits.forEach(function(fruit) {
  console.log(fruit);
});

6. 数组的不变性

在一些编程范式（如函数式编程）中，不推荐直接修改数组，而是使用返回新数组的方法（如 map，filter，concat，slice 等）：

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // 输出 [1, 4, 9, 16, 25]
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

练习：数组的操作

我们可以阅读一下Javascript参考手册，看看我们可以对数组做哪些操作：

数组的教程：https://www.runoob.com/js/js-obj-array.html
数组的完整参考手册：https://www.runoob.com/jsref/jsref-obj-array.html

我们用这个数组做例子：

<script>
  var numbers = [2, 8, 10, 4, 6];
</script>

阅读数组的参考手册，然后完成以下这些操作：

find()：查找。尝试在numbers里查找到数字8和数字12，看看分别得到什么结果
sort()：排序。尝试把numbers里的数字按照从小到大的顺序排列起来。
push()：向numbers中增加一个数字14，看看在它会出现在哪里。
pop()：从numbers中移除最后一个数字，看看numbers会变成什么样。

以上这些操作的代码是：

<script>
  var numbers = [2, 8, 10, 4, 6];
</script>

上面这段代码中的输出结果是：

【图片1：示例1的输出结果】

如果我们换一个不同的数组，里面存储了不同类型的数据，我们还可以使用上面的这些操作吗？

当然可以！

我们使用countries这个数组：

<script>
  var countries = ['China', 'Singapre', 'USA', 'UK'];
</script>

再次试试之前的这些操作：

find()：查找，试试查找“China”和"France"，看看分别返回什么结果
sort()：排序，试试国家的字母顺序来排序
push()：向countries中增加一个国家：Germany
pop()：从数组中移除最后一个国家，看看它会变成什么样子

完成这些操作的代码如下：

我们可以看到：

虽然数组中存储的数据不一样，但是对数组的操作都是一样的！

本课总结

本课学习的重要概念：
- Javascript对象
- Javascript数组
学习方法：
- 如何读文档

作业

阅读Javascript参考手册，学习并尝试使用数组对象、字符串对象、日期对象。

## 学习目标

1. **理解数组的概念**：数组是一种特殊的数据类型，可以用来存储一系列的值。你需要理解这个基本概念，以及数组在实际编程中的应用。
2. **创建和访问数组**：学习如何创建一个数组，以及如何访问数组中的元素。例如：
3. **数组的长度和索引**：理解数组的长度（length 属性）和索引的概念，以及如何使用它们。
4. **数组的方法**：JavaScript 提供了大量的数组方法，如 push、pop、shift、unshift、splice、slice、map、filter、reduce 等。你需要理解这些方法的用法，以及它们在实际编程中的应用。
5. **遍历数组**：理解如何使用循环（如 for 循环、for...of 循环、forEach 方法等）遍历数组。
6. **理解数组的不变性**：在一些编程范式（如函数式编程）中，不推荐直接修改数组，而是使用返回新数组的方法（如 map、filter、concat、slice 等）。理解这一概念，并学习如何编写不改变原数组的代码。

## 常见的对象：数组（Array）

在学生信息管理的示例中，我们还留下了一个问题没有回答：如何存储很多个学生的信息？

如果你有很多个学生，你还可以使用一类特殊的对象 —— 数组（Array）来存储多个学生的信息。

我们创建一个变量`students`，然后用以下的代码来存储学生的信息：

```html
<script>
  var students = [{
    name: '张小花',
    id: 'S01',
    age: '8',
    gender: '女'
  }, {
    name: '王小草',
    id: 'S02',
    age: '11',
    gender: '女'
  }, {
    name: '张大花',
    id: 'S03',
    age: '12',
    gender: '女'  
  }, {
    name: '王大草',
    id: 'S04',
    age: '9',
    gender: '女'  
  }];
</script>
```

在上面的代码中，`students`是一个数组，它里面存储了四个学生的信息。

如果你有更多的学生，你可以在`students`里面，照着同样的格式，把其他学生的信息增加进去。

## 1. 什么是数组？

数组是一种对象，它可以把很多的变量存储在一起，好像排队一样排起来。

数组里的变量可以是各种类型的变量，例如：

```html
<script>
  var numbers = [2, 8, 10, 4, 6];
</script>
```

这是一个数字组成的数组。

```html
<script>
  var countries = ['China', 'Singapre', 'USA', 'UK'];
</script>
```

这是一个字符串组成的数组。

在之前的例子中，`students`是一个对象组成的数组。

怎样识别出一个数组？

- 数组使用方括号 `[]` 来表示。当你看到一段代码以`[`和`]`开头和结尾，你就可以知道这是个数组。

## 2. 创建和访问数组

### 2.1 创建数组

在 JavaScript 中，我们通常使用数组字面量或 `new Array()` 构造函数来创建数组：

```
let arr1 = []; // 使用数组字面量创建数组
let arr2 = new Array(); // 使用 new Array() 创建数组

```

我们也可以在创建数组时直接定义元素：

```
let fruits = ['apple', 'banana', 'cherry'];

```

### 2.2 访问数组

我们可以使用索引来访问数组中的元素：

```
console.log(fruits[0]); // 输出 "apple"

```

## 3. 数组的长度和索引

每个数组都有一个 `length` 属性，它表示数组中的元素个数。数组的索引是从 0 开始的，所以最后一个元素的索引是 `length - 1`。

```
console.log(fruits.length); // 输出 3
console.log(fruits[fruits.length - 1]); // 输出 "cherry"

```

## 4. 数组的方法

JavaScript 提供了大量的数组方法，用于操作数组。

### 4.1 添加和删除元素

- `push`：在数组的末尾添加一个或多个元素，返回新的长度。
- `pop`：删除并返回数组的最后一个元素。
- `shift`：删除并返回数组的第一个元素。
- `unshift`：在数组的开头添加一个或多个元素，返回新的长度。
- `splice`：在数组中添加或删除元素。

### 4.2 截取和连接数组

- `slice`：返回一个新的数组，包含从 start 到 end（不包括 end）的数组元素。
- `concat`：返回一个新的数组，是调用它的对象与它的参数合并后的新数组。

### 4.3 遍历和搜索数组

- `forEach`：对数组的每个元素执行一次给定的函数。
- `map`：创建一个新数组，其结果是该数组中的每个元素都调用一个函数后返回的结果。
- `filter`：创建一个新数组，包含通过测试的所有元素。
- `find`：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
- `reduce`：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个输出值。

## 5. 遍历数组

我们可以使用 `for` 循环，`for...of` 循环，`forEach` 方法等遍历数组的元素：

```
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for (let fruit of fruits) {
  console.log(fruit);
}

fruits.forEach(function(fruit) {
  console.log(fruit);
});

```

## 6. 数组的不变性

在一些编程范式（如函数式编程）中，不推荐直接修改数组，而是使用返回新数组的方法（如 `map`，`filter`，`concat`，`slice` 等）：

```
let numbers = [1, 2, 3, 4, 5];

let squared = numbers.map(function(number) {
  return number * number;
});

console.log(squared); // 输出 [1, 4, 9, 16, 25]
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

```

## 练习：数组的操作

我们可以阅读一下Javascript参考手册，看看我们可以对数组做哪些操作：

- 数组的教程：https://www.runoob.com/js/js-obj-array.html
- 数组的完整参考手册：https://www.runoob.com/jsref/jsref-obj-array.html

我们用这个数组做例子：

```html
<script>
  var numbers = [2, 8, 10, 4, 6];
</script>
```

阅读数组的参考手册，然后完成以下这些操作：

- find()：查找。尝试在`numbers`里查找到数字8和数字12，看看分别得到什么结果
- sort()：排序。尝试把`numbers`里的数字按照从小到大的顺序排列起来。
- push()：向`numbers`中增加一个数字14，看看在它会出现在哪里。
- pop()：从`numbers`中移除最后一个数字，看看`numbers`会变成什么样。

以上这些操作的代码是：

```html
<script>
  var numbers = [2, 8, 10, 4, 6];
</script>
```

上面这段代码中的输出结果是：

【图片1：示例1的输出结果】

如果我们换一个不同的数组，里面存储了不同类型的数据，我们还可以使用上面的这些操作吗？

当然可以！

我们使用`countries`这个数组：

```html
<script>
  var countries = ['China', 'Singapre', 'USA', 'UK'];
</script>
```

再次试试之前的这些操作：

- find()：查找，试试查找“China”和"France"，看看分别返回什么结果
- sort()：排序，试试国家的字母顺序来排序
- push()：向`countries`中增加一个国家：Germany
- pop()：从数组中移除最后一个国家，看看它会变成什么样子

完成这些操作的代码如下：

```html

```

我们可以看到：

- 虽然数组中存储的数据不一样，但是对数组的操作都是一样的！

## 本课总结

- 本课学习的重要概念：
  - Javascript对象
  - Javascript数组
- 学习方法：
  - 如何读文档

## 作业

- 阅读Javascript参考手册，学习并尝试使用数组对象、字符串对象、日期对象。