10 个简洁实用的 JavaScript 一行代码 - 数组版

JavaScript 是一种功能强大且灵活的编程语言，可以通过巧妙的一行代码实现令人惊艳的功能。

本文总结在实际开发中，在处理数组时，经常使用的 10 个简洁实用的 JavaScript 一行代码，并分析其实现原理和妙用。

1. 快速生成数组

使用 Array.from 方法根据指定的长度 {length: length} 和映射函数 (element, index) => index 创建从 0 到 length - 1 的连续整数数组。

const creatArr = (length, fn) =>
  Array.from({ length }, fn ? fn : (element, index) => index);

示例

const creatArr = (length, fn) =>
  Array.from({ length }, fn ? fn : (element, index) => index);

// 生成连续数字的数组
console.log("生成数字数组：", creatArr(6));

// 生成对象数组
console.log(
  "生成对象数组：",
  creatArr(6, (element, index) => {
    return { name: `第${index + 1}个对象`, index };
  })
);

2. 数组求和

使用数组的 reduce 方法，实现对数组元素的求和。通过运用累加器和初始值为 0，将数组中的所有元素相加得到总和。

const sum = (arr) => arr.reduce((a, b) => a + b, 0);

参数说明

reduce(callbackFn, initialValue)

下面对 reduce 函数入参进行简单的说明：

callbackFn 接收参数说明：

它可以接收 4 个值，含义如下：

• accumulator（累加器）：累积回调函数的返回值，在每次执行回调时都会传入更新。

• currentValue（当前值）：当前处理元素。

• index（索引）：当前处理元素的索引值，可选。

• array（数组）：调用 reduce() 的数组，可选。

initialValue 参数说明：

• 第一次调用回调时初始化  accumulator  的值

示例

const sum = (arr) => arr.reduce((a, b) => a + b, 0);

const arr = [1, 2, 3, 4, 5];

console.log("累加后的结果：", sum(arr));

3. 数组去重

使用 ES6 的 Set 数据结构和扩展运算符，可以快速将数组中的重复元素去除，返回一个唯一元素的新数组。先将数组转化为 Set，然后再将 Set 转回为数组。

const uniqueArr = (arr) => [...new Set(arr)];

Set 是一种无序且不重复的集合，可以用来存储原始数组中的值，由于 Set 中的值不能重复，所以可以方便地实现数组去重。

示例

const uniqueArr = (arr) => [...new Set(arr)];

const arr = [1, 1, 2, 2, 3, 3];

console.log("原始数组：", arr);

console.log("去重后数组：", uniqueArr(arr));

注意： Set  对象使用内部的算法来确保元素的唯一性，因此它仅适用于原始值类型（如字符串、数字、布尔值等），不能去重引用类型的对象（如数组、对象等）。

4. 数组极值

最大值

通过利用扩展运算符和 Math.max 方法，这行代码可以快速找到数组中的最大值。

const max = (arr) => Math.max(...arr);

最小值

同样的，利用扩展运算符和 Math.min 方法，这行代码可以快速找到数组中的最小值。

const min = (arr) => Math.min(...arr);

示例

const max = (arr) => Math.max(...arr);
const min = (arr) => Math.min(...arr);

const arr = [1, 2, 3, 0, -1, 11, 12, 66];

console.log("最大值：", max(arr));
console.log("最小值：", min(arr));

5. 数组平均值

这行代码使用了数组的 reduce 方法和 length 属性，以及数学运算，计算出数组中元素的平均值。

const average = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;

示例

const average = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;

const arr = [1, 2, 3, 0, -1, 11, 12, 66];

console.log("平均值：", average(arr));

注意：由于 JavaScript 中的数值计算存在精度问题，所以计算平均值时可能出现小数位数不准确的情况。在需要精确计算的场景下，可以使用其他方法来处理。

6. 数组排序

利用数组的 sort 方法，这行代码可以根据对象的某个属性值进行排序，并返回排序后的新数组。

const sortedArray = (array) => array.sort((a, b) => a.property - b.property);

示例

const sortedArray = (arr) => arr.sort((a, b) => a - b);

const arr = [3, 2, 5, 0, -1, 6];

console.log("排序后：", sortedArray(arr));

以上是较为简单的数字型数组的排序方案，我们可以再改造一下，看对象数组如何进行排序：

const sortedArray = (arr) => arr.sort((a, b) => a.sort - b.sort);

const arr = [
  { name: "张三", sort: 2 },
  { name: "赵四", sort: 1 },
  { name: "王五", sort: 4 },
  { name: "马六", sort: 3 },
];

console.log("排序后：", sortedArray(arr));

注意：sort() 方法会直接修改原始的数组，而不是返回一个新的数组。也就是说，在排序操作完成后，array 数组的元素顺序会发生改变。

7. 数组随机排序

通过传递一个随机比较函数给 sort 方法，可以实现数组的随机排序。

const shuffledArray = (arr) => arr.sort(() => Math.random() - 0.5);

因为 Math.random() 方法返回一个 0 到 1 之间（不包括 1）的随机数，所以比较函数 () => Math.random() - 0.5 的结果会是负数、正数或者 0，从而实现了数组元素的随机排序。

当比较函数返回负值时，表示第一个元素要排在第二个元素前面；返回正值时，表示第一个元素要排在第二个元素后面；返回 0 时，表示两个元素相等，不需要调整它们的相对位置。

示例

const shuffledArray = (arr) => arr.sort(() => Math.random() - 0.5);

const arr = [1, 2, 3, 4, 5, 6];

console.log("随机排序1：", shuffledArray(arr));
console.log("随机排序2：", shuffledArray(arr));

注意：这种随机排序是不完全随机的，由于比较函数只是比较两个元素之间的差值，并不会完全改变它们的相对次序，因此可能存在相同元素在排序后仍然保持原来的相对次序的情况。如果需要得到更加随机的结果，可以考虑改写更为复杂的算法或第三方库。

8. 数组分组

通过使用 reduce 方法和对象的属性存储特性，可以将数组元素按照具体的分组规则进行统计和分组。

const groupedArray = (arr, key) =>
  arr.reduce(
    (acc, curr) => ({
      ...acc,
      [curr[key]]: [...(acc[curr[key]] || []), curr],
    }),
    {}
  );

使用 reduce 方法遍历对象数组 array，初始值设为一个空对象 {}。在每次遍历中，使用展开运算符 ... 将累加器对象 acc 展开，然后使用可计算属性名 [curr.name] 将当前元素 curr 按照 name 属性的值进行分组。

如果当前名称 curr.name 在累加器对象 acc 中不存在，则初始化一个空数组 [] 作为该分组的初始值。然后，将当前元素 curr 放入对应分组数组中。最后返回更新后的累加器对象 acc。

示例

const arr = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
  { id: 3, name: "张三" },
  { id: 4, name: "王五" },
];

const groupedArray = (arr, key) =>
  arr.reduce(
    (acc, curr) => ({
      ...acc,
      [curr[key]]: [...(acc[curr[key]] || []), curr],
    }),
    {}
  );

console.log(groupedArray(arr, "name"));

9. 数组扁平化

数组的扁平化，将二维数组转化为一维数组。

// depth 嵌套数组的结构深度
const flattenedArray = (arr, depth = 1) => arr.flat(depth);

flat() 方法用于将嵌套的数组结构降维，使其变为一维数组。可以接受一个可选参数 depth，用于指定扁平化的层级深度，默认为 1。

示例

// depth 嵌套数组的结构深度
const flattenedArray = (arr, depth = 1) => arr.flat(depth);

const arr = [1, 2, [3, 4, [5, 6]]];

console.log("depth为1：", flattenedArray(arr, 1)); // 输出：[ 1, 2, 3, 4, [ 5, 6 ] ]
console.log("depth为2：", flattenedArray(arr, 2)); // 输出：[1, 2, 3, 4, 5, 6]

注意：flat() 方法会创建一个新数组，原始的数组保持不变。同时，如果数组中存在 undefined 元素，它们会被跳过并从结果中删除。如果数组中的元素是对象或其他引用类型，扁平化后得到的数组中仍然是原来的元素的引用。

10. 数组合并

通过使用 Array.concat()或扩展运算符 (...) 方法来合并数组

const mergedArray1 = (arr1, arr2) => arr1.concat(arr2);
const mergedArray2 = (arr1, arr2) => [...arr1, ...arr2];

无论是 concat() 方法还是扩展运算符 [...]，都可以实现合并数组的功能，生成一个新的数组。它们的结果都是将两个数组中的元素合并到一个数组中，并且不会改变原始的数组。

示例

const mergedArray1 = (arr1, arr2) => arr1.concat(arr2);
const mergedArray2 = (arr1, arr2) => [...arr1, ...arr2];

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [3, 4, 5];

console.log("合并数组1和2：", mergedArray1(arr1, arr2));
console.log("合并数组1和3：", mergedArray2(arr1, arr3));

注意：进行数组合并时，原始数组的元素顺序将保持不变，同时也不会对数组去重。

结语

在 JavaScript 开发中，数组是一种非常常见且重要的数据结构。对数组进行各种操作和处理是我们在日常开发中经常需要做的事情。而在处理数组时，编写简洁、优雅且高效的代码是每个开发者都追求的目标。

本篇文章介绍了，在实际开发中， 10 个非常实用的 JavaScript 一行代码，以及其实现原理和妙用，这些代码展示了 JavaScript 的灵活性和强大功能，并且可以帮助开发者更加优雅且高效地处理各种操作数组的场景。通过理解这些代码背后的原理，我们可以在自己的项目中灵活运用或对其加以改造，以达到更高的效率和质量。