JavaScript数组展平方法：flat()和flatMap()

一、JavaScript数组展平方法:flat()和flatMap()

1、作为一门主流的WEB编程语言，JavaScript不断发展，添加新的语法、功能或抽象，帮助开发人员轻松解决复杂的问题。如数组展平过去需要自己编写方法来实现，而从ES2019中开始引入了一种扁平化数组的新方法，可以展平任何深度的数组，这个方法就是flat()。而说起flat()的方法，就不得不顺便说下flatMap()。

2、flat()方法创建一个新数组，其中所有子数组元素以递归方式连接到特定深度。

3、array：flat()方法将在给定的数组中使用。

4、depth：可选参数，指定展平的深度，默认情况下，深度为1。

5、此方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

6、flat()方法也会移除数组中的空项：

7、在一些复杂的场合，数组的层级不单一比较复杂的情况下，不必去逐个计算数组的嵌套深度，可以借助参数Infinity，就可以将所有层级的数组展平。

8、flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map连着深度值为1的flat()几乎相同，但flatMap()通常在合并成一种方法的效率稍微高一些。

9、callbackFn：处理新数组元素的回调函数，接收三个参数

10、currentValue：数组中正在处理的当前元素。

11、index：可选参数，数组中正在处理的当前元素的索引。

12、array：可选参数，调用了数组map()。

13、thisArg：执行callbackFn时用作this的值

14、此方法返回一个新数组的值，其中每个元素都是通过回调函数的处理过的结果，并将其展平到深度为1。

15、上述代码通过flat()方法和flatMap()方法来解决同样问题，将所有用户的跑步记录进行累加。

16、flatMap()展平的深度值为1，而flat()可以指定多级。

二、js 如何动态添加数组

1、在JavaScript中，数组的创建可以通过多种方式实现。使用new Array()可以创建一个数组，如果不传入参数，则数组为空。如果传入一个参数，则该参数表示数组的长度。值得注意的是，尽管可以指定长度，但这只是一个初始长度，数组的长度可以动态调整。例如：

2、var arrayObj= new Array();//创建一个空数组

3、var arrayObj= new Array(5);//创建一个长度为5的数组，但实际存储元素不受长度限制

4、var arrayObj= new Array("元素0","元素1","元素2");//创建并赋值数组

5、数组元素可以通过下标访问，例如：

6、var testGetArrValue= arrayObj[1];//获取数组第二个元素

7、arrayObj[1]="这是新值";//修改数组第二个元素

8、添加元素是通过push()、unshift()和splice()方法实现。push()用于在数组尾部添加一个或多个元素，返回数组的新长度：

9、arrayObj.push("新元素1","新元素2");//在数组尾部添加元素

10、unshift()则是在数组头部添加一个或多个元素，同样返回数组的新长度：

11、arrayObj.unshift("新元素1","新元素2");//在数组头部添加元素

12、splice()方法则更灵活，可以插入或删除数组中的元素：

13、arrayObj.splice(insertPos, 0,"新元素1","新元素2");//在指定位置插入元素

14、删除元素也有多种方式，如pop()、shift()和splice()。pop()和shift()分别移除数组尾部和头部元素，并返回被移除的元素：

15、arrayObj.pop();//移除并返回数组尾部元素

16、arrayObj.shift();//移除并返回数组头部元素

17、splice()方法可以同时移除和插入元素，返回被移除的元素：

18、arrayObj.splice(deletePos, deleteCount);//移除指定位置及其后的元素

19、数组截取和合并功能通过slice()和concat()实现。slice()方法可以获取数组的一部分，返回一个新的数组：

20、arrayObj.slice(start, end);//从start到end-1的数组部分

21、concat()方法可以合并多个数组或字符串，返回一个新的数组：

22、arrayObj.concat("字符串", ["数组元素1","数组元素2"]);//合并数组和字符串

23、数组的拷贝通常使用slice()或concat()方法：

24、arrayObj.slice(0);//返回一个新数组

25、arrayObj.concat();//返回一个新数组

26、数组排序使用reverse()和sort()方法，reverse()反转数组，sort()则对数组进行排序：

27、arrayObj.sort();//对数组进行排序

28、最后，数组元素可以通过join()方法转换为字符串，separator为分隔符：

29、arrayObj.join(separator);//使用separator连接数组元素

30、toString()、toLocaleString()和valueOf()方法可以看作是join()的变体，主要用于特定场景。

三、JavaScript给数组添加元素的6个方法

1、使用length属性，可以在数组末尾后面添加一个元素：

2、console.log(arr);// [1, 2, 3, 4, 5, 6];

3、push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度：

4、console.log(arr);// [1, 2, 3, 4, 5, 6];

5、unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度：

6、console.log(arr);// [6, 1, 2, 3, 4, 5];

7、splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容：

8、console.log(arr);// [1, 2, 3, 4, 5, 6];

9、concat()方法用于将一个数组或值合并至一个数组中，该方法不会改变原数组：

10、console.log(newArr);// [1, 2, 3, 4, 5, 6];

11、展开语法...:可以在数组构造时,将数组表达式在语法层面展开：

12、console.log(arr);// [1, 2, 3, 4, 5, 6];