前端数据处理（基础篇）数组

本文参考各位大佬的优秀文章，提取其中经常用到的一些方法，记录为笔记，便于自查和复习。文末的参考资料中附上原文链接，便于大家进一步学习。

本篇介绍的是前端数据处理中，对数组的相关操作，涉及的内容请看下图：

元素的增删

向数组中添加元素

0. push 方法： 在数组末尾添加一个或多个元素，并返回新的长度。

    const arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // 输出: [1, 2, 3, 4]

1. unshift 方法： 在数组开头添加一个或多个元素，并返回新的长度。

    const arr = [2, 3, 4];
    arr.unshift(1);
    console.log(arr); // 输出: [1, 2, 3, 4]

2. splice 方法： 通过指定索引位置插入一个或多个元素，并可以同时删除元素。

    const arr = [1, 2, 3, 5];
    arr.splice(3, 0, 4);
    console.log(arr); // 输出: [1, 2, 3, 4, 5]

3. concat 方法： 创建一个新数组，包含原数组和要添加的元素，原数组不受影响。

    const arr1 = [1, 2, 3];
    const arr2 = arr1.concat(4);
    console.log(arr1); // 输出: [1, 2, 3]
    console.log(arr2); // 输出: [1, 2, 3, 4]

在数组中删除元素

以下的方法中，删除数组中的元素后，原数组都会被修改！

0. pop 方法： 删除数组末尾的元素。原数组会被修改。

    const arr = [1, 2, 3, 4, 5];
    ​
    // 删除数组末尾的元素
    const removedElement = arr.pop();
    ​
    console.log(removedElement); // 输出: 5 (被删除的元素)
    console.log(arr); // 输出: [1, 2, 3, 4] (原数组被修改)

1. shift 方法：删除数组开头元素。原数组会被修改。

    const arr = [1, 2, 3, 4, 5];
    ​
    // 删除数组开头的元素
    const removedElement = arr.shift();
    ​
    console.log(removedElement); // 输出: 1 (被删除的元素)
    console.log(arr); // 输出: [2, 3, 4, 5] (原数组被修改)

2. splice 方法： 可以指定要删除的元素的索引和数量。原数组会被修改。

    const arr = [1, 2, 3, 4, 5];
    ​
    // 删除数组末尾的元素
    const removedElement = arr.pop();
    ​
    console.log(removedElement); // 输出: 5 (被删除的元素)
    console.log(arr); // 输出: [1, 2, 3, 4] (原数组被修改)

选择使用 splice 还是 pop 取决于你想删除的元素位置。如果你知道要删除的元素的索引，可以使用 splice。如果你只想删除数组末尾的元素，可以使用 pop。

问：有没有什么方法，即可以删除元素，又不会修改原数组呢？

答：最常用的是使用 filter 方法。这个方法会返回一个新数组，其中包含通过指定函数测试的所有元素。

 const arr = [1, 2, 3, 4, 5];
 ​
 // 使用 filter 方法删除值为 3 的元素
 const newArr = arr.filter(element => element !== 3);
 ​
 console.log(newArr); // 输出: [1, 2, 4, 5] (新数组，原数组不受影响)
 console.log(arr); // 输出: [1, 2, 3, 4, 5] (原数组未修改)

slice和splice有什么区别？

slice 主要用于提取数组的一部分而不影响原数组，而 splice 主要用于在原数组中删除或插入元素，会对原数组进行修改。

0. slice 方法：

   • 作用： 从数组中提取出指定范围的元素，返回一个新的数组，不会修改原数组。

   • 语法： array.slice(start, end)

    const arr = [1, 2, 3, 4, 5];
    const slicedArr = arr.slice(1, 4);
    console.log(slicedArr); // 输出: [2, 3, 4]
    console.log(arr); // 输出: [1, 2, 3, 4, 5] (原数组不受影响)

1. splice 方法：

   • 作用： 从数组中删除或插入元素，可以同时删除和插入，会修改原数组。

   • 语法： array.splice(start, deleteCount, item1, item2, ...)

   • 参数详解： splice 方法的参数有三个主要部分，分别是 start、deleteCount 和 item1, item2, ...。下面是对每个参数的解释：

     • start： 必需，指定开始修改的位置，即删除或插入的起始索引。如果是负数，表示从数组的末尾开始计算的位置。
     • deleteCount： 可选，指定要删除的元素数量。如果省略或超过数组的长度，将删除从 start 索引开始到数组末尾的所有元素。
     • item1, item2, ...： 可选，要添加到数组的元素。可以添加任意数量的元素。这些元素将从 start 索引处开始插入到数组中。

     更多用法请参考：js中的splice的三种用法（删除，替换，插入）_js splice替换-CSDN博客

    const arr = [1, 2, 3, 4, 5];
    ​
    // 从索引 1 开始删除 2 个元素，并插入 6 和 7
    const splicedArr = arr.splice(1, 2, 6, 7);
    console.log(splicedArr); // 输出: [2, 3] (被删除的元素)
    console.log(arr); // 输出: [1, 6, 7, 4, 5] (原数组被修改)

补充： Array 实例的 toSpliced() 方法是 splice() 方法的复制版本。它返回一个新数组，并在给定的索引处删除和/或替换了一些元素。Array.prototype.toSpliced() - JavaScript | MDN (mozilla.org)

---

找出元素

查询元素是否存在

0. includes 方法：检查数组中是否包含特定的元素。如果是返回 true，否则false。

注意：includes() 方法还可以用于判断字符串是否包含指定的子字符串。JavaScript includes() 方法 | 菜鸟教程 (runoob.com)

 const arr = [1, 2, 3, 4, 5];
 const elementToCheck = 3;
 ​
 if (arr.includes(elementToCheck)) {
   console.log(`元素 ${elementToCheck} 存在于数组中`);
 } else {
   console.log(`元素 ${elementToCheck} 不存在于数组中`);
 }

2. indexOf 方法： 检索数组中是否含有某个元素，如果有就返回元素下标（索引），如果没有就返回-1。

    const arr = [10, 20, 30, 40, 50];
    const elementToFind = 30;
    const index = arr.indexOf(elementToFind);
    console.log(index); // 输出: 2

查询元素位置

find 和 findIndex 是数组方法，都用于在数组中查找元素。它们的主要区别在于返回值：

0. find 方法： 返回数组中满足测试函数条件的第一个元素的值，如果没有找到则返回 undefined。

    const arr = [1, 2, 3, 4, 5];
    const foundElement = arr.find(element => element > 2);
    console.log(foundElement); // 输出: 3

1. findIndex 方法： 返回数组中满足测试函数条件的第一个元素的索引，如果没有找到则返回 -1。

    const arr = [1, 2, 3, 4, 5];
    const foundIndex = arr.findIndex(element => element > 2);
    console.log(foundIndex); // 输出: 2

---

元素的拼接

concat()

concat()方法创建一个新数组，包含两个或更多数组的元素。原始数组不受影响。

 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
 const concatenatedArr = arr1.concat(arr2);
 console.log(concatenatedArr); // 输出: [1, 2, 3, 4, 5, 6]

扩展运算符（...）

使用扩展运算符 ... 将一个数组的元素展开，然后与另一个数组的元素一起组成一个新数组。

 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
 const concatenatedArr = [...arr1, ...arr2];
 console.log(concatenatedArr); // 输出: [1, 2, 3, 4, 5, 6]
 ​
 // 注意扩展运算符的使用
 console.log([arr1, arr2]); // 输出: [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
 console.log([...arr1, arr2]); // 输出: [ 1, 2, 3, [ 4, 5, 6 ] ]
 console.log([arr1, ...arr2]); // 输出: [ [ 1, 2, 3 ], 4, 5, 6 ]

push()

利用push()方法将一个数组的元素逐个添加到另一个数组末尾。

 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
 arr1.push(...arr2);
 console.log(arr1); // 输出: [1, 2, 3, 4, 5, 6] (原数组被修改)

---

元素的复制

浅拷贝

以下是一些常用的浅拷贝方法，只复制了原始数组的一层，如果原始数组包含对象或其他引用类型的元素，那么仅复制了引用，而不是创建新的对象。

0. slice 方法： 用于从数组中提取一个新的数组，包含从开始到结束（不包括结束）的元素。

    const originalArray = [1, 2, 3, 4, 5];
    ​
    // 复制索引 1 到索引 3 之间的元素（不包括索引 3）
    const copiedArray1 = originalArray.slice(1, 3);
    console.log(copiedArray1); // 输出: [2, 3]
    ​
    // 复制索引 2 之后的所有元素
    const copiedArray2 = originalArray.slice(2);
    console.log(copiedArray2); // 输出: [3, 4, 5]
    ​
    // 复制整个数组
    const copiedArray3 = originalArray.slice();
    console.log(copiedArray3); // 输出: [1, 2, 3, 4, 5]
    ​

1. concat 方法：本方法也可以用于创建一个新数组，包含原始数组的元素。

    const originalArray = [1, 2, 3, 4, 5];
    const copiedArray = [].concat(originalArray);
    console.log(copiedArray); // 输出: [1, 2, 3, 4, 5]

2. 扩展运算符： 使用扩展运算符 ... 可以将一个数组的元素展开到另一个数组。

    const originalArray = [1, 2, 3, 4, 5];
    const copiedArray = [...originalArray];
    console.log(copiedArray); // 输出: [1, 2, 3, 4, 5]

3. Array.from 方法： 使用 Array.from 方法可以将类数组对象或可迭代对象转换为数组，并创建一个新的数组。

    const originalArray = [1, 2, 3, 4, 5];
    const copiedArray = Array.from(originalArray);
    console.log(copiedArray); // 输出: [1, 2, 3, 4, 5]

深拷贝

深拷贝是一种在复制对象或数组时，不仅复制了对象或数组本身，还递归地复制了它们内部所有的嵌套对象和数组，确保新对象与原对象是完全独立的，互不影响。深拷贝创建了一个新的对象，而不仅仅是对原始对象的引用。

要进一步学习深拷贝，可以看一下大佬的博客（见参考资料），本文中仅简单展示一些常用的深拷贝方法：

0. 递归方法： 通过递归地复制对象的每个属性和子属性，从而实现深拷贝。

   • 如果是基本数据类型（如数字、字符串、布尔值、null、undefined等），直接返回该值，因为基本数据类型是不可变的。
   • 如果是引用类型（如对象或数组），则创建一个新的对象或数组，并递归地对其属性进行深拷贝。

    function deepClone(obj) {
      if (obj === null || typeof obj !== 'object') {
        return obj;
      }
    ​
      const clonedObj = Array.isArray(obj) ? [] : {};
    ​
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          clonedObj[key] = deepClone(obj[key]);
        }
      }
    ​
      return clonedObj;
    }
    ​
    const originalObj = {
      a: 1,
      b: {
        c: 2,
        d: [3, 4],
      },
    };
    ​
    const clonedObj = deepClone(originalObj);
    console.log(clonedObj);

   知识点补充：

   • hasOwnProperty 是 JavaScript 中 Object 原型上的一个方法。它用于检查一个对象是否包含特定的属性，而不是该对象的原型链上的属性。
   • 这个方法在遍历对象属性时，尤其是使用 for...in 循环时，常常用于确保只获取对象自身的属性而不包括继承的属性。
   • 详情请参考：js 中的hasOwnProperty()方法 - 简书 (jianshu.com)

1. JSON 方法： 将对象转换为 JSON 字符串，然后再解析为新的对象。这种方法要求对象可以被序列化为 JSON。

    const originalObj = {
      a: 1,
      b: {
        c: 2,
        d: [3, 4],
      },
    };
    ​
    const clonedObj = JSON.parse(JSON.stringify(originalObj));
    console.log(clonedObj);

   需要注意的是，这种方法存在一些限制，例如不能拷贝函数、undefined、symbol 等特殊类型。

---

维度的变化

在前端面试中，数组维度的变化是常考的内容！！

改变数组的维度的方法有很多种，各平台中也有大佬们分享出来的详细方法介绍，部分链接放在了文末参考资料中。

此处仅记录部分常见的方法：

一维数组变二维

0. 循环遍历一维数组：将一维数组分割成指定大小的块，然后push进新的数组中，从而实现一维到二维的转换。

    function chunkArray(arr, size) {
      const result = [];
      for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
      }
      return result;
    }
    ​
    const originalArray = [1, 2, 3, 4, 5, 6, 7, 8];
    const multiDimArray = chunkArray(originalArray, 3);
    console.log(multiDimArray); // 输出: [[1, 2, 3], [4, 5, 6], [7, 8]]

1. 结合 reduce 方法，定义了一个函数 convertToMultiDim，用于将一维数组转换为指定大小的二维数组。

   reduce函数很重要：es6 中的 reduce()方法详解

   • convertToMultiDim 函数使用 reduce 方法遍历原始数组 arr 中的每个元素。
   • 对于每个元素，计算它在多维数组中的块索引 chunkIndex，这是通过除以指定的块大小 size 并向下取整得到的。

    // 定义函数 convertToMultiDim，接受一个一维数组 arr 和一个块大小 size 作为参数
    function convertToMultiDim(arr, size) {
      // 使用 reduce 方法处理数组元素，将其转换为多维数组
      return arr.reduce((result, element, index) => {
        // 计算当前元素在多维数组中的块索引
        const chunkIndex = Math.floor(index / size);
    ​
        // 如果 result 数组中对应的块不存在，就创建一个空数组
        if (!result[chunkIndex]) {
          result[chunkIndex] = [];
        }
    ​
        // 将当前元素添加到对应的块数组中
        result[chunkIndex].push(element);
    ​
        return result;
      }, []);
    }
    ​
    const originalArray = [1, 2, 3, 4, 5, 6, 7, 8];
    ​
    // 将一维数组 originalArray 转换为多维数组，每个块大小为 3
    const multiDimArray = convertToMultiDim(originalArray, 3);
    ​
    console.log(multiDimArray); // 输出: [[1, 2, 3], [4, 5, 6], [7, 8]]

   在 arr.reduce((result, element, index) => {}, []) 中，传入的空数组 [] 是 reduce 方法的初始值（initialValue）。

   格式：arr.reduce(callback,[initialValue]) ，第一个参数是回调函数，该回调函数接受四个参数：
   0. result：累积的结果值。

   1. element：当前数组元素的值。
   2. index：当前数组元素的索引。
   3. array：原始数组。

   而第二个参数是初始值，它指定了初始的 result 值。在这里，初始值是一个空数组 []。

   当 reduce 方法开始执行时，第一次迭代的 result 就是初始值 []。在每次迭代中，回调函数将计算新的 result 值，并在下一次迭代时使用。这样，通过不断累积结果，最终得到了一个新的数组。

多维数组变一维

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

   语法：array.flat(depth)

   • array ： flat() 方法将在给定的数组中使用。
   • depth ：可选参数，指定展平的深度，默认情况下，深度为 1。如果传入 <=0 的整数，将返回原数组，不"拉平"。

    const arr = [[1, 2], [3, 4], 5];
    console.log(arr.flat()); // 输出:  [ 1, 2, 3, 4, 5 ]
    ​
    // flat() 方法也会移除数组中的空项：
    const arr1 = [[1, 2], , [3, 4], 5];
    console.log(arr1.flat()); // 输出: [ 1, 2, 3, 4, 5 ]
    ​
    // 传入一个整数参数，整数即"拉平"的层数
    const arr2 = [1,[2,3],[4,[5,[6]],7]];
    console.log（arr2.flat(2)); // 输出: [1,2,3,4,5,[6],7]
    ​
    // 用参数 Infinity 处理复杂的层级
    const arrVeryDeep = [[1, [2, 2, [3, [4, [5, [6]]]]], 1]];
    console.log(arrVeryDeep.flat(Infinity)); // 输出: [ 1, 2, 2, 3, 4, 5, 6, 1 ]

1. 扩展运算符(...) + concat方法：

   concat() 方法用于合并两个或多个数组，在拼接的过程中加上扩展运算符会展开一层数组。

    const multiDimArray = [[1, 2, 3], [4, 5, 6], [7, 8]];
    const flatArray = [].concat(...multiDimArray);
    console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]

2. reduce 方法： reduce 方法可以将多维数组递归地转为一维数组。

    const multiDimArray = [[1, 2], [3, 4], [5, 6]];
    const flatArray = multiDimArray.reduce((acc, current) => acc.concat(current), []);
    console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

---

遍历元素

• for是最简单的一种循环遍历方法，也是使用频率最高的一种。此处就不过多描述。
• for...in...：本质上该方法用来迭代对象，由于数组是特殊的对象，也可以进行迭代。但该方法效率低，输出的 key 是数组索引，数组遍历中不推荐使用。如果遍历的是对象，输出的则是对象的属性名。请注意，for-in 更适用于遍历对象的属性，而不是数组。

会创建新数组的方法

map()

特点：

• 用于遍历数组的每个元素，并对每个元素执行提供的回调函数。
• 返回一个新数组，新数组包含对每个元素应用回调函数的结果。
• 用于在原数组基础上生成新的数组。

 const arr = [1, 2, 3];
 const mappedArray = arr.map((element) => element * 2);
 console.log(mappedArray); // 输出: [2, 4, 6]

filter()

特点：

• 用于遍历数组的每个元素，并对每个元素执行提供的回调函数。
• 返回一个新数组，新数组包含满足条件的元素。
• 用于从原数组中筛选满足特定条件的元素。

 const arr = [1, 2, 3, 4];
 const filteredArray = arr.filter((element) => element % 2 === 0);
 console.log(filteredArray); // 输出: [2, 4]

不会创建新数组的方法

forEach()

• 只能用于遍历数组，不能用于其他可迭代对象。

• 用于遍历数组的每个元素，并对每个元素执行提供的回调函数。

• 不支持break和continue。

   const arr = [0, 1, 2, 3, 4, 5, 6, 7]
   arr.forEach((value, index, arr2) => {
       //if (index == 2) continue 报错：SyntaxError: Illegal continue statement: no surrounding iteration statement
       //if (index == 5) break    报错：SyntaxError: Illegal break statement
       value++
       arr2[index] += 10
   })
   console.log(arr);
   //现输出：[10, 11, 12, 13, 14, 15, 16, 17]
   //原数组：[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7]

• 没有返回值，返回 undefined。

   const arr = [1, 2, 3];
   arr.forEach((element) => console.log(element));
   // 输出:
   // 1
   // 2
   // 3

for...of...

用于遍历可迭代对象的语法结构，它在遍历数组和其他可迭代对象时非常方便。

• for...of 遍历的是对象的值，而不是索引。这使得代码更简洁，无需使用索引来获取值。

   const array = [1, 2, 3];
   for (const value of array) {
     console.log(value);
   }
   // 输出:
   // 1
   // 2
   // 3

• 可用于任何可迭代对象： for...of 不仅适用于数组，还适用于其他实现了可迭代协议的对象，例如 Set、Map、字符串等。

   const string = "Hello";
   for (const char of string) {
     console.log(char);
   }
   // 输出:
   // H
   // e
   // l
   // l
   // o
   ​
   const set = new Set([1, 2, 3]);
   for (const value of set) {
     console.log(value);
   }
   // 输出:
   // 1
   // 2
   // 3

• 支持 break 和 continue： 在 for...of 中可以使用 break 和 continue 控制语句，而在 forEach() 中无法直接使用。

   const array = [1, 2, 3, 4, 5];
   for (const value of array) {
     if (value === 3) {
       break; // 跳出循环
     }
     console.log(value);
   }
   // 输出:
   // 1
   // 2

• 不支持索引迭代： for...of 不提供直接访问数组索引的方法，如果需要索引，可以使用 Array.entries() 方法。

   const array = [1, 2, 3];
   for (const [index, value] of array.entries()) {
     console.log(`Index: ${index}, Value: ${value}`);
   }
   // 输出:
   // Index: 0, Value: 1
   // Index: 1, Value: 2
   // Index: 2, Value: 3

some()

特点：

• 用于遍历数组的每个元素，判断是否至少有一个元素满足指定条件。
• 返回一个布尔值，如果至少有一个元素满足条件则为 true，否则为 false。

• 如果查询数组中唯一的元素，用some方法更加合适，因为它找到这个元素，就不在进行循环，效率更高。

 const arr = [1, 2, 3, 4];
 const hasEven = arr.some((element) => element % 2 === 0);
 console.log(hasEven); // 输出: true

every()

特点：

• 用于遍历数组的每个元素，判断是否所有元素都满足指定条件。
• 返回一个布尔值，如果所有元素都满足条件则为 true，否则为 false。

• 示例：

   const arr = [1, 2, 3, 4];
   const allEven = arr.every((element) => element % 2 === 0);
   console.log(allEven); // 输出: false

易混淆方法的对比

fill() 方法：

• 用于填充数组的所有元素，使用静态值。
• 返回修改后的原数组。
• 可以指定起始索引和结束索引。

 const array = [1, 2, 3, 4, 5];
 array.fill(0, 1, 3); // 将索引为 1 到 2 的元素填充为 0
 console.log(array); // 输出: [1, 0, 0, 4, 5]
 ​
 const arr1 = [1, 2, 3];
 console.log(arr1.fill('a')); // 输出: [ 'a', 'a', 'a' ]

方法	特点	返回值	是否改变原数组	用途
find()	查找数组中满足条件的第一个元素。	找到的元素或 undefined	不改变原数组。	查找满足条件的第一个元素。
fill()	填充数组的所有元素，使用指定的静态值。	修改后的原数组	改变原数组。	填充数组的元素。
filter()	创建一个新数组，其中包含满足条件的所有元素。	新数组	不改变原数组。	创建包含满足条件元素的新数组。

这个表格总结了find()、fill() 和 filter() 方法的特点和用途。

---

数组排序

JavaScript 中数组排序有多种方法，其中一些常见的包括：

sort()

• 在原数组上直接进行排序，默认将元素转换为字符串再比较。

• 如果没有提供比较函数，会将元素按照 Unicode 码点进行排序。

   const numbers = [4, 2, 8, 1, 6];
   numbers.sort(); // 默认按照 Unicode 码点排序
   console.log(numbers); // 输出: [1, 2, 4, 6, 8]

• 可以通过传递一个比较函数来实现自定义排序。

   const numbers = [4, 2, 8, 1, 6];
   numbers.sort((a, b) => a - b); // 升序排序
   console.log(numbers); // 输出: [1, 2, 4, 6, 8]
   ​
   numbers.sort((a, b) => b - a); // 降序排序
   console.log(numbers); // 输出: [ 8, 6, 4, 2, 1 ]

reverse()

反转数组元素的顺序，改变原数组。

 const numbers = [1, 2, 3, 4, 5];
 numbers.reverse();
 console.log(numbers); // 输出: [5, 4, 3, 2, 1]

concat() 结合 sort()

创建一个新数组，然后对新数组进行排序，不改变原数组。

 const numbers = [4, 2, 8, 1, 6];
 const sortedArray = numbers.concat().sort((a, b) => a - b);
 console.log(sortedArray); // 输出: [1, 2, 4, 6, 8]
 console.log(numbers); // 输出: [4, 2, 8, 1, 6]（原数组不受影响）

---

数组转字符串

在JavaScript中，有几种常见的方法可以将数组转换为字符串：

toString()

• toString() 是数组对象的原生方法，将数组转换为一个由数组元素以逗号分隔的字符串。

• 不改变原数组。

   const fruits = ['apple', 'banana', 'orange'];
   const fruitsString = fruits.toString();
   console.log(fruitsString); // 输出: 'apple,banana,orange'

join()

• join() 方法接受一个参数，即分隔符，用于连接数组元素生成字符串。

• 不改变原数组。

   const fruits = ['apple', 'banana', 'orange'];
   const fruitsString = fruits.join(', '); // 使用逗号和空格分隔
   console.log(fruitsString); // 输出: 'apple, banana, orange'

JSON.stringify()

• JSON.stringify() 可以将包含原始值、数组和对象的结构转换为 JSON 格式的字符串。

• 不仅限于数组，还适用于其他 JavaScript 数据结构。

   const fruits = ['apple', 'banana', 'orange'];
   const fruitsString = JSON.stringify(fruits);
   console.log(fruitsString); // 输出: '["apple","banana","orange"]'

补充： 与 JSON.stringify() 方法相对应的是 JSON.parse() 方法，它用于将 JSON 格式的字符串转换为 JavaScript 对象。

• JSON.parse() 接受一个 JSON 格式的字符串，并将其转换为对应的 JavaScript 对象。
• 用于将从服务器端获取的 JSON 数据解析成可操作的对象。
• JSON.parse() 与 JSON.stringify() 一起使用，可以在前后端之间方便地进行数据交换，特别是在使用 AJAX 请求获取 JSON 数据时。

 const fruitsString = '["apple","banana","orange"]';
 const fruitsArray = JSON.parse(fruitsString);
 console.log(fruitsArray); // 输出: ['apple', 'banana', 'orange']

参考资料

有些资料的链接附在文中，有些放在此处：

• Array - JavaScript | MDN (mozilla.org)
• js数组的增删改查，十二种方法(含代码)_js数组增删改
• JavaScript深拷贝看这篇就行了！（实现完美的ES6+版本）_javascript 深拷贝
• JS数组降维的几种方法_js数据降维
• JavaScript一维数组转二维数组_js一维数组变成二维数组
• JavaScript 数组展平方法： flat() 和 flatMap()
• JavaScript基础：手写数组扁平化flat方法_.flat()
• es6 中的 reduce()方法详解_es6的reduce适用场景
• JavaScript 用七种方式教你判断一个变量是否为数组类型_js 判断变量是数组
• JS数组遍历的几种方法_js遍历数组
• js遍历数组的10种方法