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

晚灯留不住星光2024-02-06 17:16

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

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

元素的增删

向数组中添加元素

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

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

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

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

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

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

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

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

在数组中删除元素

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

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

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

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

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

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

    js 复制代码 
     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 方法。这个方法会返回一个新数组，其中包含通过指定函数测试的所有元素。

js 复制代码 
 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 主要用于在原数组中删除或插入元素，会对原数组进行修改。

  1. slice 方法：

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

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

    js 复制代码 
     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] (原数组不受影响)

  2. splice 方法：

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

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

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

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

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

    js 复制代码 
     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)

找出元素

查询元素是否存在

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

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

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

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

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

查询元素位置

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

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

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

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

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

元素的拼接

concat()

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

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

扩展运算符（...）

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

js 复制代码 
 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()方法将一个数组的元素逐个添加到另一个数组末尾。

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

元素的复制

浅拷贝

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

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

    js 复制代码 
     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]
 ​

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

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

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

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

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

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

深拷贝

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

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

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

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

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

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

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

维度的变化

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

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

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

一维数组变二维

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

    js 复制代码 
     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]]

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

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

    • convertToMultiDim 函数使用 reduce 方法遍历原始数组 arr 中的每个元素。
    • 对于每个元素，计算它在多维数组中的块索引 chunkIndex，这是通过除以指定的块大小 size 并向下取整得到的。
    js 复制代码 
     // 定义函数 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 值，并在下一次迭代时使用。这样，通过不断累积结果，最终得到了一个新的数组。

多维数组变一维

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

    语法：array.flat(depth)

    • array ： flat() 方法将在给定的数组中使用。
    • depth ：可选参数，指定展平的深度，默认情况下，深度为 1。如果传入 <=0 的整数，将返回原数组，不"拉平"。
    js 复制代码 
     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 ]

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

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

    js 复制代码 
     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]

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

    js 复制代码 
     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()

特点：

  • 用于遍历数组的每个元素，并对每个元素执行提供的回调函数。
  • 返回一个新数组，新数组包含对每个元素应用回调函数的结果。
  • 用于在原数组基础上生成新的数组。
js 复制代码 
 const arr = [1, 2, 3];
 const mappedArray = arr.map((element) => element * 2);
 console.log(mappedArray); // 输出: [2, 4, 6]
filter()

特点：

  • 用于遍历数组的每个元素，并对每个元素执行提供的回调函数。
  • 返回一个新数组，新数组包含满足条件的元素。
  • 用于从原数组中筛选满足特定条件的元素。
js 复制代码 
 const arr = [1, 2, 3, 4];
 const filteredArray = arr.filter((element) => element % 2 === 0);
 console.log(filteredArray); // 输出: [2, 4]

不会创建新数组的方法

forEach()

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

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

  • 不支持break和continue。

    js 复制代码 
     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。

    js 复制代码 
     const arr = [1, 2, 3];
 arr.forEach((element) => console.log(element));
 // 输出:
 // 1
 // 2
 // 3
for...of...

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

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

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

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

    js 复制代码 
     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() 中无法直接使用。

    js 复制代码 
     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() 方法。

    js 复制代码 
     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方法更加合适，因为它找到这个元素，就不在进行循环，效率更高。
js 复制代码 
 const arr = [1, 2, 3, 4];
 const hasEven = arr.some((element) => element % 2 === 0);
 console.log(hasEven); // 输出: true
every()

特点：

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

  • 示例：

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

易混淆方法的对比

fill() 方法：

  • 用于填充数组的所有元素，使用静态值。
  • 返回修改后的原数组。
  • 可以指定起始索引和结束索引。
js 复制代码 
 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 码点进行排序。

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

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

    js 复制代码 
     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()

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

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

concat() 结合 sort()

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

js 复制代码 
 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() 是数组对象的原生方法，将数组转换为一个由数组元素以逗号分隔的字符串。

  • 不改变原数组。

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

join()

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

  • 不改变原数组。

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

JSON.stringify()

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

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

    js 复制代码 
     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 数据时。
js 复制代码 
 const fruitsString = '["apple","banana","orange"]';
 const fruitsArray = JSON.parse(fruitsString);
 console.log(fruitsArray); // 输出: ['apple', 'banana', 'orange']

参考资料

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

相关推荐
Martin -Tang4 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发5 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析，从入门到精通（10）
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心，方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS，三大选择器，游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记（webAPI—DOM）
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化