您现在的位置是:网站首页 > 数组转换方法文章详情

数组转换方法

数组是JavaScript中最常用的数据结构之一,提供了多种内置方法用于转换和处理数据。这些方法能够在不改变原数组或返回新数组的情况下,实现数据的筛选、映射、排序等操作。

数组转换为字符串

join()方法将数组所有元素连接成一个字符串,默认用逗号分隔,可自定义分隔符:

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.join()); // "apple,banana,orange"
console.log(fruits.join('-')); // "apple-banana-orange"

toString()方法类似,但固定使用逗号分隔且不可配置:

const numbers = [1, 2, 3];
console.log(numbers.toString()); // "1,2,3"

数组结构转换

flat()方法可扁平化嵌套数组,默认只展开一层:

const nested = [1, [2, [3]]];
console.log(nested.flat()); // [1, 2, [3]]
console.log(nested.flat(2)); // [1, 2, 3]

flatMap()结合了map()flat()的功能,先映射再扁平化:

const phrases = ["hello world", "goodbye moon"];
const words = phrases.flatMap(phrase => phrase.split(' '));
// ["hello", "world", "goodbye", "moon"]

数组元素重新排序

reverse()会原地反转数组顺序:

const letters = ['a', 'b', 'c'];
letters.reverse();
console.log(letters); // ['c', 'b', 'a']

sort()默认按字符串Unicode码点排序:

const nums = [10, 5, 80];
nums.sort();
console.log(nums); // [10, 5, 80] (按字符串比较)

// 正确数字排序
nums.sort((a, b) => a - b);
console.log(nums); // [5, 10, 80]

数组元素筛选转换

filter()创建包含通过测试元素的新数组:

const numbers = [12, 5, 8, 130, 44];
const bigNumbers = numbers.filter(n => n > 10);
// [12, 130, 44]

map()对每个元素执行函数并返回新数组:

const lengths = ['one', 'two', 'three'].map(str => str.length);
// [3, 3, 5]

数组与类数组转换

Array.from()将类数组对象转为真实数组:

const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);

扩展运算符也能实现类似转换:

const set = new Set([1, 2, 3]);
const arr = [...set]; // [1, 2, 3]

数组元素聚合计算

reduce()从左到右执行reducer函数:

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0);
// 6

reduceRight()从右到左执行:

const nested = ['a', ['b', ['c']]];
const flattened = nested.reduceRight((acc, val) => acc.concat(val), []);
// ['c', 'b', 'a']

特殊数组创建

Array.of()解决new Array()的怪异行为:

Array.of(3); // [3]
new Array(3); // [empty × 3]

fill()填充数组元素:

new Array(3).fill(0); // [0, 0, 0]

类型化数组转换

普通数组与类型化数组相互转换:

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
const normalArray = Array.from(int32View);

稀疏数组处理

entries()/keys()/values()方法返回迭代器:

const sparse = [1, , 3];
for (const [index, value] of sparse.entries()) {
  console.log(index, value); // 0 1, 2 3
}

数组与对象互转

Object.entries()Object.fromEntries()实现转换:

const arr = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(arr);
// {a: 1, b: 2}

const newArr = Object.entries(obj);
// [['a', 1], ['b', 2]]

高性能转换技巧

预分配数组大小可提升性能:

// 低效
const arr = [];
for (let i = 0; i < 1000000; i++) {
  arr.push(i);
}

// 高效
const arr = new Array(1000000);
for (let i = 0; i < 1000000; i++) {
  arr[i] = i;
}

不可变转换模式

使用扩展运算符避免修改原数组:

const original = [1, 2, 3];
const modified = [...original.slice(0, 1), 99, ...original.slice(2)];
// [1, 99, 3]

多维数组处理

处理矩阵转置等操作:

function transpose(matrix) {
  return matrix[0].map((_, colIndex) => 
    matrix.map(row => row[colIndex])
  );
}

const matrix = [
  [1, 2],
  [3, 4]
];
transpose(matrix); // [[1, 3], [2, 4]]

流式处理管道

组合多个转换方法:

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

const result = data
  .filter(x => x % 2 === 0)
  .map(x => x * 2)
  .reduce((sum, x) => sum + x, 0);
// 12

我的名片

网名:~川~

岗位:console.log 调试员

坐标:重庆市-九龙坡区

邮箱:cc@qdcc.cn

沙漏人生

站点信息

  • 建站时间:2013/03/16
  • 本站运行
  • 文章数量
  • 总访问量
微信公众号
每次关注
都是向财富自由迈进的一步