手写函数-数组扁平化通过手写JS方法，加强对JS方法的理解，巩固原生JS基础。本次要写的是数组的扁平化，这里用了两种实现

前言

通过手写JS方法，加强对JS方法的理解，巩固原生JS基础。本次要写的是数组的扁平化，这里用了两种实现方法，第一种是通过递归的方式，第二种是通过some()方法检测数组内还有没有数组。

数组扁平化

说明：将一个嵌套多层的数组array（嵌套可以是任何层数）转换成只有一层的数组。

语法：flatten(array)

let arr = [1, [2, [3, 4]]];
console.log(flatten(arr)) // [1, 2, 3, 4]

实现方法有两种：

方法一：

实现：

结构：方法接收一个数组参数
功能实现：

主要思想是循环判断每个元素，不是数组直接拼接，是数组比较麻烦，不能用展开运算符然后拼接的方式，因为可能是多维数组，所以需要用递归。
- 声明空数组。用它来接收最后的结果
- 遍历数组。通过forEach()
  - 判断。判断当前元素是否为一个数组。
  - 如果是一个数组(难点) 。用递归的方式，再执行该元素，最后将递归的结果通过数组拼接的方式，拼接到result，用result接收赋值
  - 如果不是数组。直接将该项与新数组拼接，注意如果是用数组拼接(concat(item)需要重新赋值，因为如果不做重新赋值，那么新数组就是空的。
- 返回结果

代码：

flatten.js

function flatten(arr) {
  // 声明新数组
  let result = []
  // 遍历数组
  arr.forEach(item => {
    // 判断。如果是数组用递归，如果不是数组直接拼接
    if (Array.isArray(item)) result = result.concat(flatten(item))
    else result.push(item)
  })
  // 返回数组
  return result
}

flatten.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./flatten.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, [4, 5, [6, 7]]]
    const arrNew = flatten(arr)
    console.log(arrNew)
  </script>
</body>

</html>

方法二：

利用some和concat实现

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

实现

结构：方法接收数组作为参数
功能实现：
- 声明数组。我们需要对新数组进行操作，而不是操作原数组，所以使用展开运算符将数组值传递给新数组，得到一个一模一样的数组。
- 循环判断：通过while实现
  
  原理：使用some()判断数组中有没有一个满足是数组的，如果有，那就展开并且通过concat()拼接；继续some()判断如果又有数组那就继续展开继续拼接。判断数组有没有子数组用：result.some(item=>Array.isArray(item))
  - 判断。通过some判断数组内是否有数组
  - 如果result有子数组，那就将result展开放入空数组中并赋值给result
- 返回结果

代码：

flatten.js

function flatten(arr) {
  // 声明数组，将原数组值赋值给新数组
  let result = [...arr]
  // 循环，通过some判断数组内是否有数组
  while (result.some(item => Array.isArray(item))) {
    // 如果result有子数组，那就将result展开放入空数组中并赋值给result
    result = [].concat(...result)
  }
  // 返回结果
  return result
}

flatten.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./flatten.js"></script>
</head>

<body>
  <script>
    const arr = [1, 2, 3, [4, 5, [6, 7]]]
    const arrNew = flatten(arr)
    console.log(arrNew)
  </script>
</body>

</html>