您现在的位置是:网站首页 > 数组转换方法文章详情
数组转换方法
陈川
【
JavaScript
】
22935人已围观
3564字
数组是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