From d6cfdeb4be02a3e73014c2a8bd96494e25d3d677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=BD=A3=E1=BD=BB=E1=BD=A4?= Date: Wed, 14 Aug 2024 19:28:40 +0800 Subject: [PATCH] --- ...230\351\207\221 (2024_8_14 19_28_28).html" | 494 ++++++++++++++++++ 1 file changed, 494 insertions(+) create mode 100644 "JS\343\200\220\346\225\260\347\273\204\345\220\210\345\271\266\343\200\221\347\232\204\346\200\247\350\203\275\345\267\256\345\274\202\345\257\271\346\257\224\346\225\260\347\273\204\345\220\210\345\271\266\345\217\257\344\273\245\350\257\264\346\230\257\346\210\221\344\273\254\345\234\250\346\223\215\344\275\234\346\225\260\347\273\204\344\270\255\346\234\200\345\270\270\351\201\207\345\210\260\347\232\204\345\234\272\346\231\257\344\271\213\344\270\200\357\274\201 \346\234\254\347\257\207\345\260\206\347\256\200\350\246\201\345\210\206\346\236\220\344\270\211\347\247\215\346\225\260\347\273\204\345\220\210\345\271\266\347\232\204\346\226\271\346\263\225\357\274\214\345\271\266 - \346\216\230\351\207\221 (2024_8_14 19_28_28).html" diff --git "a/JS\343\200\220\346\225\260\347\273\204\345\220\210\345\271\266\343\200\221\347\232\204\346\200\247\350\203\275\345\267\256\345\274\202\345\257\271\346\257\224\346\225\260\347\273\204\345\220\210\345\271\266\345\217\257\344\273\245\350\257\264\346\230\257\346\210\221\344\273\254\345\234\250\346\223\215\344\275\234\346\225\260\347\273\204\344\270\255\346\234\200\345\270\270\351\201\207\345\210\260\347\232\204\345\234\272\346\231\257\344\271\213\344\270\200\357\274\201 \346\234\254\347\257\207\345\260\206\347\256\200\350\246\201\345\210\206\346\236\220\344\270\211\347\247\215\346\225\260\347\273\204\345\220\210\345\271\266\347\232\204\346\226\271\346\263\225\357\274\214\345\271\266 - \346\216\230\351\207\221 (2024_8_14 19_28_28).html" "b/JS\343\200\220\346\225\260\347\273\204\345\220\210\345\271\266\343\200\221\347\232\204\346\200\247\350\203\275\345\267\256\345\274\202\345\257\271\346\257\224\346\225\260\347\273\204\345\220\210\345\271\266\345\217\257\344\273\245\350\257\264\346\230\257\346\210\221\344\273\254\345\234\250\346\223\215\344\275\234\346\225\260\347\273\204\344\270\255\346\234\200\345\270\270\351\201\207\345\210\260\347\232\204\345\234\272\346\231\257\344\271\213\344\270\200\357\274\201 \346\234\254\347\257\207\345\260\206\347\256\200\350\246\201\345\210\206\346\236\220\344\270\211\347\247\215\346\225\260\347\273\204\345\220\210\345\271\266\347\232\204\346\226\271\346\263\225\357\274\214\345\271\266 - \346\216\230\351\207\221 (2024_8_14 19_28_28).html" new file mode 100644 index 0000000..c9570c2 --- /dev/null +++ "b/JS\343\200\220\346\225\260\347\273\204\345\220\210\345\271\266\343\200\221\347\232\204\346\200\247\350\203\275\345\267\256\345\274\202\345\257\271\346\257\224\346\225\260\347\273\204\345\220\210\345\271\266\345\217\257\344\273\245\350\257\264\346\230\257\346\210\221\344\273\254\345\234\250\346\223\215\344\275\234\346\225\260\347\273\204\344\270\255\346\234\200\345\270\270\351\201\207\345\210\260\347\232\204\345\234\272\346\231\257\344\271\213\344\270\200\357\274\201 \346\234\254\347\257\207\345\260\206\347\256\200\350\246\201\345\210\206\346\236\220\344\270\211\347\247\215\346\225\260\347\273\204\345\220\210\345\271\266\347\232\204\346\226\271\346\263\225\357\274\214\345\271\266 - \346\216\230\351\207\221 (2024_8_14 19_28_28).html" @@ -0,0 +1,494 @@ + JS【数组合并】的性能差异对比数组合并可以说是我们在操作数组中最常遇到的场景之一！ 本篇将简要分析三种数组合并的方法，并 - 掘金 + + + +

+ JS【数组合并】的性能差异对比 +

+ 掘金安东尼 +
VIP.5 如鱼得水
+ 3,908 + + 阅读2分钟 +
+ 专栏：  +
+ JavaScript【掘金安东尼】 +

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」

+
+

数组合并可以说是我们在操作数组中最常遇到的场景之一！

+

本篇将简要分析三种数组合并的方法，并带来它们的性能差异分析~

+

它们是：

+
    +
  • Concat
    • +
  • Push
    • +
  • Spread Syntax
    • +
+

闲言少叙，冲ヾ(◍°∇°◍)ﾉﾞ

+

Concat

+

Concat 是 JavaScript 的标准方法：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

+
    +
  • Array.prototype.concat()
    • +
+

image.png

+

如图示：

+

image.png

+

图片来源

+

array2 合并到了 array1 后面，得到了一个新的 result 数组；

+

Push

+

Push 也是合并数组常用方法，可将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

+
    +
  • Array.prototype.push()
    • +
+

image.png

+

image.png

+

图片来源

+

与 concat 不同的时，push 方法会更改原数组，如图示，array1 发生了变化；

+

push 方法按照以上用循环的方式写，显然是不够“美妙的”，所以有了一个新的语法来支持优化它：那就是扩展运算符；

+

Spread Syntax

+

扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法，用来展开字符串，数组和对象；

+

合并方法如下：

+

image.png

+

一行就解决：

+

image.png

+

图片来源

+

性能对比

+

以上 3 中数组合并方法的性能测评基于第三方库 github.com/ecofic/arti…，可以 clone 下来，运行调试：

+

image.png

+

这里，我们尝试从 3 个维度来进行测试：（分别用1、10、100、1000、100,000、100,000、1,000,000元素数组进行100次测试）

+
    +
  1. 基本类型数组；
    2. +
  2. 对象数组；
    3. +
  3. 基本类型和对象混合的数组；
    4. +
+

得到以下数据：

+

image.png

+

image.png

+

image.png

+

绿块代表着数组合并的性能较优，红色反之较差；

+

可以很明显的看到：扩展运算法的合并方法性能较优，但是不适用于长度较大的数组，会得到 N/A 的结果；（原作者测出这个长度边界值是 63,653）

+

所以，最终给到一个结论是：

+

合并长度小的数组，用扩展运算符；合并长度较大的数组，用 concat！

+

简单又实用~~

+
+

OK，以上便是本篇分享~

+
+

我是掘金安东尼，输出暴露输入，技术洞见生活，再会~~

+
标签：
前端JavaScript面试
本文收录于以下专栏
cover
+ JavaScript【掘金安东尼】 +
+ 专栏目录 +
+ JavaScript 核心，我更关心“如何使用闭包”以及“如何充分利用异步”！ +
·
116 篇文章
评论 0
avatar
0 / 1000
暂无评论数据
+ 20 +
评论
+ 收藏 +
avatar
avatar
+ 掘金安东尼 + 创作等级LV.7
+ 🏆掘金签约作者 @cmic +
作者榜No.8
优秀作者
签约作者
+ 377 +
文章
+ 1.9m +
阅读
+ 9.8k +
粉丝
私信
找对属于你的技术圈子
回复「进群」加入官方微信群
为你推荐
  • JavaScript 数组操作必须熟练运用的10个方法
    JavaScript 提供了大量不同的处理数组的方法，这里花几分钟时间介绍 10 个项目中可以用到的数组方法。
    + JavaScript +
    JavaScript 数组操作必须熟练运用的10个方法
  • ES6中一些很好用的数组方法
    「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。 Array.from方法 Array.from方法用于将两类对象转为真正的数组： 类似数组的对象（array-lik
    + 前端 + + JavaScript +
    ES6中一些很好用的数组方法
  • JavaScript 数组常见操作(一)
    数组是 JavaScript 中常见数据类型之一，关于它的一些操作方法，我在这里做一下简单记录和总结。
    + 前端 + + JavaScript +
    JavaScript 数组常见操作(一)
  • JS数据结构&算法学习——数组
    数组 认识数组 数组是我们的老朋友了，一般情况，数组是用来存储同一数据类型的值，比如说一个数组内存有一系列对象形式，存储一系列字符串，一系列数值，等等，JS中数组内可以存放不同类型的值，但是这种用法不
    + 算法 + + JavaScript +
    JS数据结构&算法学习——数组
  • 10 个「有用」JavaScript 代码片段
    降低阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~注：本篇可能更适合 JavaScript 新手食用，大佬请绕道
    + 前端 + + JavaScript + + 面试 +
    10 个「有用」JavaScript 代码片段
  • 完整系统性的学习下ES6（二）
    本文已参与『新人创作礼』活动，一起开启掘金创作之路 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情 1. 函数 1.1 默认参数 可以给定义的函数接收的
    + 掘金·日新计划 +
    完整系统性的学习下ES6（二）
  • JavaScript 数组常见操作(二)
    数组是 JavaScript 中常见数据类型之一，关于它的一些操作方法，我在这里做一下简单记录和总结。
    + 前端 + + JavaScript +
    JavaScript 数组常见操作(二)
  • 日拱算法：删除有序数组中的重复项
    本篇带来双指针解法之“删除有序数组中的重复项”，附解题思路和代码；双指针的快慢指针可处理数组的花式遍历。
    + 前端 + + JavaScript + + 算法 +
    日拱算法：删除有序数组中的重复项
  • 日拱算法：两个数组的交集（I、II）
    本篇带来两个数组的交集（I、II）之双指针解法~ 冲就完事了~ 给定两个数组 nums1和 nums2，返回 它们的交集。。。
    + 前端 + + JavaScript + + 算法 +
    日拱算法：两个数组的交集（I、II）
  • JavaScript数组方法看这一篇就够了
    这是我参与更文挑战的第15天，活动详情查看 更文挑战 汇总了JavaScript数组常用的一些方法，并且按照增、删、该等用途进行了分类，涵盖了日常开发的大部分场景。
    + JavaScript + + 前端 +
    JavaScript数组方法看这一篇就够了
  • 日拱算法：环形数组是否存在循环
    算法继续——存在一个不含 0 的 环形 数组 nums ，每个 nums[i] 都表示位于下标 i 的角色应该向前或向后移动。。。
    + 前端 + + JavaScript + + 算法 +
    日拱算法：环形数组是否存在循环
  • JS数组之new Array()/Array.of()/Array.from()
    这是我参与更文挑战的第25天，活动详情查看： 更文挑战 数组API是JS开发者频繁使用的，在JS学习中很重要。 数组是一个基础的一维数据结构，在各种编程语言中都非常重要。JS天生的灵活性，又进一步发挥
    + JavaScript + + 前端 +
    JS数组之new Array()/Array.of()/Array.from()
  • 日拱算法：双指针解快乐数，快乐就完事了~
    在判断快乐数的问题上，快慢指针与哈希方法相比，不用创建集合来储存每次循环的数，所以减少了内存的消耗，是更好的选择。
    + 前端 + + JavaScript + + 算法 +
    日拱算法：双指针解快乐数，快乐就完事了~
  • JavaScript——数组详解2（数组的基本操作）
    这是我参与更文挑战的第4天，活动详情查看： 更文挑战 数组的访问与遍历 1. 访问数组元素 访问数组元素很简单，只需要通过“数组名[下标]”即可访问。 2. 遍历数组元素 遍历数组元素有三种，分别是f
    + JavaScript +
  • 『 纯干货』帮你梳理总结眼花缭乱的数组 API
    日常的开发或面试中，经过会用到或问到关于 JavaScript 中数组相关的问题，对于数组常见的问题，你知道多少呢？关于数组的操作，你是否知道每个方法之间的差异呢？如果还不是很了解，那就跟我一起学习吧
    + 前端 + + JavaScript + + ECMAScript 6 +
    『 纯干货』帮你梳理总结眼花缭乱的数组 API
    • 收藏成功！
    已添加到「」， 点击更改
    + APP内打开 +
    + +
    \ No newline at end of file