数组方法：多维数组拍平小发现、创建定长等值数组、数组排序

多维数组拍平小发现

[1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]] + ''

[1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]].toString()

[1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]].join(',')

[1,2,[3,[4, 5]]].flat(2) // flat中明确拉平层数

均可将多维数组拍平成 ‘1,2,3,4,5,6,7,8,9,10,11,12,13’ // 类型变化 Number → String
相关资料：https://blog.csdn.net/XU441520/article/details/108770467

创建定长等值数组

业务场景：雷达图 画参考线，series[1].data = [10,10,10,10]

解决方案：Array(length).fill(value)

相关资料：https://blog.csdn.net/six6de6/article/details/126939644

数组empty和undefiend区别

empty表示空位，非数据类型；undefined表示值未定义，是数据类型；

forEach()会跳过空位；for()会将empty转换成undefined;

empty如何创建，比如: [1,2,3] // 逗号创建的就是空位， new Array(5) // [empty, empty, empty, empty, empty]

相关资料: https://www.cnblogs.com/aisowe/p/11663169.html

数组排序

需求：表格列排序，列数值类型：数值、日期、字符串；字符串按照首字母排序

关键词：中文转拼音、Array.sort()

解决方案：

import { pinyin } from 'pinyin-pro';
import { cloneDeep } from 'lodash';

export function handleSort(data, order = 'asc') {
  let curData = cloneDeep(data);
  curData.sort((front, back) => {
    /**
     * 数值类型排序: 123、'123'、1643874180000（时间戳）
     * 注意：parseInt(null)是NaN, Number(null)是0；null和undefined统一走字符串处理，转换成''
     */
    const isNum = !isNaN(parseInt(front)) && !isNaN(parseInt(back));
    const inVariable = isNum && (parseInt(front).toString().length === front.length && parseInt(back).toString().length === back.length); // 防止截取：比如'1啊' => 1、'2022-12-22 10:25:43' => 2022
    if (isNum && inVariable) {
      return order === 'asc' ? (parseInt(front) - parseInt(back)) : (parseInt(back) - parseInt(front));
    }

    // 日期类型排序: '2022 02 02'、"2022-02-03"、"2022/02/03 15:43"；注意：传入时间戳将走上一步
    const isDate = !isNaN(Date.parse(front)) && !isNaN(Date.parse(back));
    if (isDate) {
      return order === 'asc' ? (Date.parse(front) - Date.parse(back)) : (Date.parse(back) - Date.parse(front));
    }

    /**
     * 字符串类型排序: 字符串类型进行首字母排序; 注意其他类型均转换成字符串类型排序，undefined、null转换成''
     * 注意：
     * 必须使用 curfront > curBack 判断升序
     * 不能使用 curfront - curBack > 0 // 永远是false
     * 不能使用 return curfront - curBack // 永远是NaN
     */
    const curfront = (front) ?? '' + ''; // front 若为 undefined|null, 则返回'', 若非字符串则转换为字符串
    const curBack = (back) ?? '' + '';
    const frontInitial = pinyin(curfront, {pattern: 'first', toneType: 'none', type: 'Array'})[0];
    const backInitial = pinyin(curBack, {pattern: 'first', toneType: 'none', type: 'Array'})[0];
    return order === 'asc' ? (frontInitial > backInitial ? 1 : -1) : (backInitial > frontInitial ? 1 : -1);
  });
  return curData;
}

中文转拼音使用pinyin-pro包，详见：https://juejin.cn/post/6974362928879239204

Arrays.sort细节注意事项：排序会改变原数组，默认将元素转换成字符串，升序排列；详见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

测试

测试数据

/**
 * 测试数据：
 * 数值类：[50, 20, 30, 4, 2, 5, 10],
 * 日期类: ["2023-01-03 17:11:34", "2022-12-22 10:25:43", "2023-01-03 10:16:26", "2022-11-17 17:30:29","2023-01-03 17:06:45"]
 * 字符串类： ['111', 'c啊', '我', '啊']
 */
console.log('数值类： ' + handleSort([50, 20, 30, 4, 2, 5, 10], 'asc'));
console.log('日期类: ' + handleSort(['2023-01-03 17:11:34', '2022-12-22 10:25:43', '2023-01-03 10:16:26', '2022-11-17 17:30:29', '2023-01-03 17:06:45'], 'asc'));
console.log('字符串类： ' + handleSort(['111', 'c啊', '我', '啊'], 'asc'));

测试结果