JS:数组里面有多个子数组，想要获取每个子数组的第一个元素

**获取数组中子数组的第一个元素**

在 JavaScript 中，我们经常会遇到这样的场景：我们需要从一个包含多个子数组的数组中，获取每个子数组的第一个元素。这个问题看起来简单，但实际上涉及到了数组和迭代的概念。

**示例数据**

首先，让我们定义一个包含多个子数组的数组：

javascriptconst array = [
 [1,2,3],
 [4,5,6],
 [7,8,9]
];

**获取第一个元素的方法**

有几种方式可以实现这个功能。我们将分别讨论每一种方法。

### 方法一：使用 `map()` 函数`map()` 函数是 JavaScript 中的一个非常强大的函数，它可以对数组中的每个元素执行某些操作。我们可以使用它来获取每个子数组的第一个元素：

javascriptconst firstElements = array.map(subArray => subArray[0]);
console.log(firstElements); // [1,4,7]

在这个例子中，我们使用 `map()` 函数对 `array` 中的每个元素（即每个子数组）执行一个函数。这个函数返回了每个子数组的第一个元素。最终结果是包含所有子数组第一个元素的新数组。

### 方法二：使用 `forEach()` 函数`forEach()` 函数也是 JavaScript 中的一个强大函数，它可以对数组中的每个元素执行某些操作。我们可以使用它来获取每个子数组的第一个元素：

javascriptlet firstElements = [];
array.forEach(subArray => {
 firstElements.push(subArray[0]);
});
console.log(firstElements); // [1,4,7]

在这个例子中，我们使用 `forEach()` 函数对 `array` 中的每个元素（即每个子数组）执行一个函数。这个函数将每个子数组的第一个元素推入到 `firstElements` 数组中。

### 方法三：使用 `reduce()` 函数`reduce()` 函数是 JavaScript 中的一个强大函数，它可以对数组中的每个元素执行某些操作，并最终返回一个结果。我们可以使用它来获取每个子数组的第一个元素：

javascriptconst firstElements = array.reduce((acc, subArray) => {
 acc.push(subArray[0]);
 return acc;
}, []);
console.log(firstElements); // [1,4,7]

在这个例子中，我们使用 `reduce()` 函数对 `array` 中的每个元素（即每个子数组）执行一个函数。这个函数将每个子数组的第一个元素推入到 `acc` 数组中，最终返回了包含所有子数组第一个元素的新数组。

### 方法四：使用 `flat()` 函数和 `map()` 函数`flat()` 函数是 JavaScript 中的一个强大函数，它可以对数组中的每个元素执行某些操作，并最终返回一个结果。我们可以使用它来获取每个子数组的第一个元素：

javascriptconst firstElements = array.flat().map(subArray => subArray[0]);
console.log(firstElements); // [1,4,7]

在这个例子中，我们使用 `flat()` 函数对 `array` 中的每个元素（即每个子数组）执行某些操作，并最终返回一个结果。然后我们使用 `map()` 函数对该结果进行进一步处理，获取每个子数组的第一个元素。

### 方法五：使用 `flatMap()` 函数`flatMap()` 函数是 JavaScript 中的一个强大函数，它可以对数组中的每个元素执行某些操作，并最终返回一个结果。我们可以使用它来获取每个子数组的第一个元素：

javascriptconst firstElements = array.flatMap(subArray => [subArray[0]]);
console.log(firstElements); // [1,4,7]

在这个例子中，我们使用 `flatMap()` 函数对 `array` 中的每个元素（即每个子数组）执行某些操作，并最终返回一个结果。然后我们将每个子数组的第一个元素推入到新数组中。

**总结**

获取数组中子数组的第一个元素有多种方法，我们可以使用 `map()` 函数、`forEach()` 函数、`reduce()` 函数、`flat()` 函数和 `flatMap()` 函数等来实现这个功能。每种方法都有其特点和应用场景，选择合适的方法需要根据具体需求进行考虑。

**参考**

* MDN Web Docs：[Array.prototype.map()]( />* MDN Web Docs：[Array.prototype.forEach()]( />* MDN Web Docs：[Array.prototype.reduce()]( />* MDN Web Docs：[Array.prototype.flat()]( />* MDN Web Docs：[Array.prototype.flatMap()](