在 JavaScript 中克隆一个数组
本教程将讨论如何使用 JavaScript 中的以下函数克隆现有数组:values()
、concat()
、slice()
、loop 和 map()
。
要克隆现有数组,我们可以使用 JavaScript 中的 values()
函数。此命令使用与给定数组中相同的值创建另一个数组。例如,让我们创建一个数组并使用 values()
函数克隆它。请参考下面的代码。
var ArrA = [1,2,3];
var ArrB = Object.values(ArrA);
console.log(ArrB)
输出:
[1, 2, 3]
我们还可以使用 Date()
函数测试该函数的性能。Date()
函数以毫秒为单位返回当前时间。例如,让我们创建一个 1000×1000 数组并使用 values()
函数克隆它并使用 Date()
函数检查其性能。请参考下面的代码。
num = 1000*1000;
TimeStart = + new Date();
ArrA = Array(num);
ArrB = Object.values(ArrA);
console.log(new Date() - TimeStart ,'ms');
输出:
19 ms
此测试在 Chrome 浏览器上进行,但可能会根据你的系统和浏览器而有所不同。你可以使用此方法检查不同功能的性能。
我们还可以使用 concat()
函数来克隆 JavaScript 中的现有数组。此函数将一个数组与另一个数组连接起来,这样我们就可以通过将一个空数组与现有数组连接起来来创建一个新数组。例如,让我们创建一个数组并使用 concat()
函数克隆它。请参考下面的代码。
var ArrA = [1,2,3];
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(ArrB)
输出:
[1, 2, 3]
我们还可以使用 Date()
函数测试 concat()
函数的性能。Date()
函数以毫秒为单位返回当前时间。例如,让我们创建一个 1000×1000 数组并使用 concat()
函数克隆它并使用 Date()
函数检查其性能。请参考下面的代码。
num = 1000*1000;
TimeStart = + new Date();
ArrA = Array(num);
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(new Date() - TimeStart ,'ms');
输出:
12 ms
正如你在输出中所观察到的,使用 concat()
函数克隆一个 1000×1000 的数组需要 12 毫秒。
我们还可以使用 slice()
函数在 JavaScript 中克隆一个数组。此函数返回现有数组的选定元素或值,并将其保存在另一个数组中。例如,让我们使用带有 slice()
函数的现有数组创建一个数组。请参考下面的代码。
var ArrA = [1,2,3];
var ArrB = [];
ArrB = ArrA.slice();
console.log(ArrB)
输出:
[1, 2, 3]
我们还可以使用 Date()
函数测试 slice()
函数的性能。Date()
函数以毫秒为单位返回当前时间。我们可以记录 clone 操作前后的时间来查看这个函数所用的时间。例如,让我们创建一个 1000×1000 数组并使用 slice()
函数克隆它并使用 Date()
函数检查其性能。请参考下面的代码。
num = 1000*1000;
TimeStart = + new Date();
ArrA = Array(num);
var ArrB = ArrA.slice();
console.log(new Date() - TimeStart ,'ms');
输出:
14 ms
在输出中,使用 slice()
函数克隆一个 1000×1000 的数组需要 14 毫秒。
我们还可以使用循环来克隆现有数组。我们需要使用循环将每个元素从一个数组复制到另一个数组。例如,让我们使用 while
循环来克隆现有数组。请参考下面的代码。
var ArrA = [1,2,3];
var ArrB = [];
var i = ArrA.length;
while (i--){
ArrB[i] = ArrA[i];
}
console.log(ArrB)
输出:
[1, 2, 3]
我们也可以使用 Date()
函数来测试这个方法的性能;此命令以毫秒为单位返回当前时间。让我们使用 1000×1000 数组检查此方法的性能。请参考下面的代码。
num = 1000*1000;
TimeStart = + new Date();
ArrA = Array(num);
var ArrB = [];
var i = ArrA.length;
while (i--){
ArrB[i] = ArrA[i];
}
console.log(new Date() - TimeStart ,'ms');
输出:
125 ms
你可以在输出中注意到,使用 while
循环克隆一个 1000×1000 数组需要 125 毫秒。
要克隆现有数组,我们还可以使用 JavaScript 中的 map()
函数。此命令通过为现有数组的每个元素调用一个函数来创建另一个数组。例如,让我们使用 map()
函数使用现有数组创建一个数组。请参考下面的代码。
var ArrA = [1,2,3];
var ArrB = ArrA.map(function(i){return i});
console.log(ArrB)
输出:
[1, 2, 3]
我们还可以使用 Date()
函数测试 map()
函数的性能。让我们来看看这个函数对 1000×1000 数组的执行情况。请参考下面的代码。
num = 1000*1000;
TimeStart = + new Date();
ArrA = Array(num);
ArrB = ArrA.map(function(i){return i});
console.log(new Date() - TimeStart ,'ms');
输出:
25 ms
根据输出,使用 map()
函数克隆一个 1000×1000 的数组需要 25 毫秒。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。