数组函数，join，map使用

JS 数组Array常用函数

[TOC]

## 1. 数组拼接函数

### 1.1. join()

将数组成员以join()的参数为分隔符拼接成一个字符串,join() 方法可以使用任意字符串（并不只是单个字符）作为分隔符来拼接数组元素

**join() 方法的基本用法**

+ **语法：**array.join(separator)
+ **参数：**separator 是可选的字符串，用于分隔数组的每个元素。如果省略该参数，则默认使用逗号 ,。
+ **返回值：**返回一个由数组元素拼接而成的字符串。

```javascript
const arr = ['Hello', 'World', 'JS'];
console.log(arr.join());       // 输出: "Hello,World,JS"（默认用逗号）
console.log(arr.join(' '));    // 输出: "Hello World JS"（用空格分隔）
console.log(arr.join('-'));    // 输出: "Hello-World-JS"（用连字符分隔）
console.log(arr.join('or'));   // 输出: "HelloorWorldorJS"（用"or"分隔）
console.log(arr.join(''));     // 输出: "HelloWorldJS"（无分隔符）
```

## 2. 数组替换函数

### 2.1. map()

在JavaScript中，`map()` 是一个非常实用的数组方法，它允许你遍历数组中的每个元素，并对每个元素执行相同的操作，最后返回一个新数组。下面详细介绍它的作用和使用方法：

**`map()` 的基本作用**

`map()` 方法会创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。简单来说，就是**“映射”一个数组到另一个数组**。

**语法**：

```javascript
const newArray = originalArray.map(callback(currentValue, index, array) {
  // 返回处理后的新值
});
```

- **`callback`**：必需，为数组中每个元素执行的函数，该函数接收三个参数：
  - **`currentValue`**：当前正在处理的元素。
  - **`index`**（可选）：当前元素的索引。
  - **`array`**（可选）：调用 `map()` 的原始数组。
- **返回值**：一个新数组，每个元素都是原数组元素经过处理后的结果。

#### 2.1.1. 常见使用场景

+ **数值计算**对数组中的每个元素进行数学运算：
```javascript
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // 输出: [1, 4, 9, 16]
```

+ **数据转换**将数组中的对象转换为另一种格式：
```javascript
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // 输出: ["Alice", "Bob"]
```

+ **格式化数据**为数组中的每个元素添加前缀或后缀：
```javascript
const products = ["apple", "banana", "cherry"];
const formatted = products.map(item => `Product: ${item}`);
console.log(formatted);
// 输出: ["Product: apple", "Product: banana", "Product: cherry"]
```

+ **处理DOM元素**获取DOM元素列表并转换为其他数据：
```javascript
const elements = document.querySelectorAll('button');
const buttonTexts = Array.from(elements).map(btn => btn.textContent);
console.log(buttonTexts); // 输出: ["测试按钮"]
```

#### 2.1.2. `map()` 与其他数组方法的区别

- **`map()`**：返回一个新数组，长度与原数组相同，每个元素都是处理后的结果。
- **`forEach()`**：用于遍历数组，没有返回值（返回 `undefined`）。
- **`filter()`**：返回一个新数组，只包含满足条件的元素。
- **`reduce()`**：将数组元素累积为单个值。

#### 2.1.3. 注意事项

1. **不改变原数组**：`map()` 返回新数组，不会修改原始数组。
2. **跳过空元素**：如果原数组有空位（`undefined`），`map()` 会保留空位。
3. **箭头函数简化**：使用箭头函数可以让代码更简洁（如 `num => num * num`）。

#### 2.1.4. 进阶用法

+ **结合其他方法链式调用**
```javascript
const numbers = [1, 2, 3, 4];
const sumOfSquares = numbers
  .map(num => num * num) // 平方：[1, 4, 9, 16]
  .reduce((acc, val) => acc + val, 0); // 求和：30
console.log(sumOfSquares); // 输出: 30
```

+ **处理复杂对象**
```javascript
const data = [
  { id: 1, name: "Apple", price: 10 },
  { id: 2, name: "Banana", price: 5 }
];
const discounted = data.map(item => ({
  ...item, // 复制原有属性
  price: item.price * 0.9 // 打九折
}));
console.log(discounted);
// 输出:
// [
//   { id: 1, name: "Apple", price: 9 },
//   { id: 2, name: "Banana", price: 4.5 }
// ]
```

#### 2.1.5. 总结
`map()` 是 JavaScript 中最常用的数组方法之一，适合需要对数组每个元素进行统一处理并返回新数组的场景。它让代码更简洁、更具声明性，避免了手动编写 `for` 循环。掌握 `map()` 对编写高效的 JavaScript 代码至关重要！

## 3. 数组数学函数

### 3.1. reduce()

在 JavaScript 中，`reduce()` 是数组的一个高阶方法，用于将数组中的每个元素通过一个累加器函数进行累积计算，最终返回一个单一的值。它是数组方法中功能最强大的之一，常用于求和、合并数组、分组统计等场景。

#### 3.1.1. 基本语法

```javascript
array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
```

- **`callback`**：执行每个元素的回调函数，包含四个参数：
  - **`accumulator`**：累加器，存储上一次回调的返回值（或初始值）。
  - **`currentValue`**：当前正在处理的元素。
  - **`currentIndex`**（可选）：当前元素的索引。
  - **`array`**（可选）：调用 `reduce()` 的原始数组。
- **`initialValue`**（可选）：作为第一次调用 `callback` 时的 `accumulator` 的初始值。如果未提供，则使用数组的第一个元素作为初始值（此时数组不能为空，否则会报错）。

#### 3.1.2. 核心作用

`reduce()` 的核心是**将数组元素逐个处理，累积结果**。每次调用 `callback` 时，`accumulator` 都会携带上一次的计算结果，直到遍历完所有元素。

#### 3.1.3. 常见用法示例

+ **数组求和**
```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出：10
```
> **过程解析**：
```plaintext
初始值 acc = 0
第1次：acc = 0 + 1 → 1
第2次：acc = 1 + 2 → 3
第3次：acc = 3 + 3 → 6
第4次：acc = 6 + 4 → 10
```

+ **数组求乘积**
```javascript
const numbers = [2, 3, 4];
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 输出：24
```

+ **合并数组**
```javascript
const arrays = [[1, 2], [3, 4], [5]];
const flattened = arrays.reduce((acc, arr) => acc.concat(arr), []);
console.log(flattened); // 输出：[1, 2, 3, 4, 5]
```

+ **统计元素出现次数**
```javascript
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const countMap = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(countMap); // 输出：{ apple: 3, banana: 2, orange: 1 }
```

+ **查找数组中的最大值**
```javascript
const numbers = [5, 3, 8, 1];
const max = numbers.reduce((acc, num) => Math.max(acc, num), -Infinity);
console.log(max); // 输出：8
```

+ **对象属性求和**
```javascript
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const totalAge = people.reduce((acc, person) => acc + person.age, 0);
console.log(totalAge); // 输出：90
```

#### 3.1.4. 注意事项

**初始值的重要性**：
 - 如果不提供 `initialValue`，`reduce()` 会跳过第一个元素，直接从第二个元素开始处理。
 - 空数组调用 `reduce()` 且不提供初始值会导致 `TypeError`。
```javascript
// 错误示例：空数组 + 无初始值
[].reduce((acc, num) => acc + num); // TypeError: Reduce of empty array with no initial value
// 正确示例：空数组 + 提供初始值
[].reduce((acc, num) => acc + num, 0); // 返回：0
```

**执行顺序**：
 - `reduce()` 从左到右遍历数组（如果需要从右到左，可使用 `reduceRight()`）。

#### 3.1.5. 进阶技巧

**替代 `map()` 和 `filter()`**

- **`map()` 效果**：
```javascript
const numbers = [1, 2, 3];
const doubled = numbers.reduce((acc, num) => {
  acc.push(num * 2);
  return acc;
}, []);
console.log(doubled); // 输出：[2, 4, 6]
```

- **`filter()` 效果**：
```javascript
const numbers = [1, 2, 3, 4];
const evens = numbers.reduce((acc, num) => {
  if (num % 2 === 0) acc.push(num);
  return acc;
}, []);
console.log(evens); // 输出：[2, 4]
```

**异步操作累加**

处理异步操作时，需结合 `async/await` 和 `Promise`：

```javascript
const urls = ['url1', 'url2', 'url3'];
urls.reduce(async (accPromise, url) => {
  const acc = await accPromise;
  const data = await fetch(url);
  acc.push(data);
  return acc;
}, Promise.resolve([]));
```

> **总结：**
`reduce()` 是一个强大的数组方法，适合处理需要累积计算的场景。通过合理使用初始值和回调函数，可以优雅地解决各种数据处理问题。但需注意初始值的设置和空数组的边界情况，避免报错。

## 4. 数组截取函数

### 4.1. slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变

+ **第一个参数：** satrt 提取起始处的索引（从 0 开始），包含起始位置

- 参数为正式则从左往右开始计算，如果为负数，则从数组末尾（从右开始算）开始计算

- 如果参数小于数组长度的最大负数时（-array.length）或者省略了 start，则参数等于 0

- 如果参数大于数组的长度，则不取任何成员

+ **第二个参数：** end 提取结束位置索引，不包含

- 参数为正式则从左往右开始计算，如果为负数，则从数组末尾（从右开始算）开始计算

- 如果参数小于数组长度的最大负数时（-array.length），则参数相等于 0

- 如果参数大于数组的长度或者省略了 end，则取数组长度为结束位置

- 如果 end 小于等于 start 则不取任何成员

+ **返回：**一个浅拷贝数组，也就是一个新的数组

> 描述
slice() 方法是一个复制方法。它不会改变 this，而是返回一个浅拷贝，其中包含了原始数组的一部分相同的元素。
slice() 方法会保留空槽。如果被切片的部分是稀疏的，则返回的数组也是稀疏的。
slice() 方法是通用的。它只要求 this 上有 length 属性和整数键属性。

**示例：**

```javascript
const animals = ["ant", "bison", "camel", "duck", "elephant"];
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
```

**示例：**在类数组对象上调用 slice()

slice() 方法会读取 this 对象的 length 属性，然后从 start 到 end 读取整数键属性，并将它们定义在一个新创建的数组中。

```javascript
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]
```

**示例：**使用 slice() 把类数组对象转化为数组

slice() 方法经常与 bind() 和 call() 一起使用，用于创建一个实用方法，将类数组对象转换为数组。

```javascript
// 调用 slice() 方法时，会将 this 对象作为第一个参数传入
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

const list1 = list(1, 2, 3); // [1, 2, 3]
```

**示例：**在稀疏数组上使用 slice()

如果源数组是稀疏数组，slice() 方法返回的数组也会是稀疏数组。

```javascript
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]
```