当前位置:首页 > JavaScript

js实现一维数组合并

2026-04-05 03:01:40JavaScript

合并一维数组的几种方法

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

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

使用扩展运算符 (...)
扩展运算符可以将多个数组展开并合并为一个新数组。

js实现一维数组合并

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

使用 push 方法(会修改原数组)
push 方法可以将另一个数组的元素逐个添加到目标数组中,但会修改原数组。

js实现一维数组合并

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

使用 Array.from 结合 concat
如果需要对类数组对象(如 arguments)进行合并,可以先用 Array.from 转换。

const array1 = [1, 2, 3];
const arrayLike = { 0: 4, 1: 5, 2: 6, length: 3 };
const mergedArray = array1.concat(Array.from(arrayLike));
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

合并数组并去重

如果需要合并数组并去除重复项,可以使用 Set 数据结构。

const array1 = [1, 2, 3];
const array2 = [2, 3, 4];
const mergedArray = [...new Set([...array1, ...array2])];
console.log(mergedArray); // 输出: [1, 2, 3, 4]

性能比较

  • concat 和扩展运算符 (...) 适合不修改原数组的场景。
  • push 适合需要直接修改原数组的情况。
  • 去重合并时,Set 是最简洁高效的方式。

选择方法时需根据具体需求决定是否修改原数组及是否需要去重。

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

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…