当前位置:首页 > JavaScript

js实现一维数组合并

2026-03-02 02:11:37JavaScript

合并一维数组的几种方法

使用 concat() 方法
concat() 方法用于合并两个或多个数组,返回一个新数组而不改变原数组。

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

使用展开运算符(...)
ES6 的展开运算符可以简洁地合并数组。

js实现一维数组合并

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [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]

使用 Array.from() 和 reduce()
适合需要处理多个数组合并的场景。

const arrays = [[1, 2], [3, 4], [5, 6]];
const mergedArr = Array.from(arrays.reduce((acc, curr) => acc.concat(curr), []));
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

使用 flat() 方法
若数组成员是嵌套数组,flat() 可将其展平为一维。

const nestedArr = [[1, 2], [3, 4], [5, 6]];
const mergedArr = nestedArr.flat();
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

注意事项

  • 性能考量:对于大数组,展开运算符和 concat() 性能较好,push() 在循环中可能较慢。
  • 去重需求:若需合并后去重,可结合 Set 实现。
    const arr1 = [1, 2, 3];
    const arr2 = [3, 4, 5];
    const uniqueArr = [...new Set([...arr1, ...arr2])];
    console.log(uniqueArr); // [1, 2, 3, 4, 5]

标签: 数组js
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

vue实现数组平均值

vue实现数组平均值

计算数组平均值的方法 在Vue中计算数组的平均值可以通过多种方式实现。以下是几种常见的方法: 方法一:使用计算属性 export default { data() { return…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…