编程小知识之 JavaScript 数组拷贝
source link: https://blog.csdn.net/tkokof1/article/details/94484920
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
编程小知识之 JavaScript 数组拷贝
本篇文章简单介绍了几种在 JavaScript 中进行数组拷贝的方法
直接迭代数组进行拷贝可能是最直观的方法,只是性能不高
// use "for"
array = [1, 2, 3];
arrayClone = [];
for (i = 0; i < array.length; ++i) {
arrayClone[i] = array[i];
}
// use "while"
array = [1, 2, 3];
arrayClone = [];
i = 0;
while (i < array.length) {
arrayClone[i] = array[i];
++i;
}
- 使用 Array.map
Array.map 可以对数组元素进行映射(map)操作,如果提供一个自身到自身的映射函数,我们便可以实现数组的拷贝了.
array = [1, 2, 3];
// identity map
identity = (x) => x;
arrayClone = array.map(identity);
- 使用 Array.filter
同 Array.map 类似, Array.filter 可以对数组元素执行过滤(filter)操作,如果提供一个固定返回真值的过滤函数,我们同样可以实现数组拷贝.
array = [1, 2, 3];
always = () => true;
arrayClone = array.filter(always);
- 使用 Array.slice
Array.slice 可能是最常用的在 JavaScript 中拷贝数组的方法,使用上也比较简洁.
array = [1, 2, 3];
arrayClone = array.slice();
- 使用 Array.concat
Array.concat 方法可以用于合并两个或多个数组,如果我们将空数组作为函数参数,也能实现数组拷贝的目的.
array = [1, 2, 3];
arrayClone = array.concat();
arrayClone2 = array.concat([]);
arrayClone3 = [].concat(array);
- 使用 Array.reduce
Array.reduce 可以对数组元素执行化简(reduce)操作,使用他我们同样可以进行数组拷贝,只是代码上比较复杂,个人也不是很推荐这种写法,示例代码如下:
array = [1, 2, 3];
reduce = (newArray, element) => { newArray.push(element); return newArray; }
arrayClone = array.reduce(reduce, []);
- 使用 Array.from
Array.from 类似于 Array.map, 使用该函数也可以进行数组拷贝,并且语义上也是最接近数组拷贝的,代码上亦比较简洁.
array = [1, 2, 3];
arrayClone = Array.from(array);
- 使用 ES6 中的展开(Spread)语法
ES6 引入了展开(Spread)语法,通过将数组元素展开,再将展开元素构造成数组的方式,我们也可以进行数组拷贝:
array = [1, 2, 3];
arrayClone = [...array];
- 使用 JSON.parse 和 JSON.stringify
使用 JSON.stringify 将数组"序列化"为字符串,再通过解析该字符串并"反序列化"成数组,我们便可以完成数组的深拷贝操作.
array = [1, 2, 3];
arrayClone = JSON.parse(JSON.stringify(array));
- 使用 jQuery 的 $.extend
jQuery 的 $.extend 也可以实现数组的深拷贝,只是需要引入 jQuery.
array = [1, 2, 3];
arrayClone = $.extend(true, [], array);
当然,我们还有其他方法在 JavaScript 中进行数组拷贝(Object.create etc.),有兴趣的朋友可以继续了解.
Recommend
-
129
web前端开发，专注前端开发，关注用户体验，关注国内外最新最好的前端开发技术和前端开发资讯的专业博客
-
40
前言 之前去一家公司面试的时候，面试官问了我一个问题，说:"如何才能深拷贝一个对象"。当时我心里有些窃喜，这么简单的问题还用想吗？于是脱口而出:"平时常用的有两种办法，第一种用JSON.parse(JSON.stringify(obj))，第二种可以使用fo
-
32
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下。 1、扩展运算符（浅拷贝） 自从ES6出现以来，这已经成为最流行的方法。它是一个很简单的语法，但是当你在使用类似于React和Redux这类库时，你会发现它是
-
31
来源：twitter 作用：Milos 译者：前端小智 在项目开发过程中，企业会有很多的任务、需求、缺陷等需要进行管理， CORNERSTONE 提供敏捷、任务、...
-
3
数组编程知识汇总-吴师兄学编程 当前位置：吴师兄学编程 > 数据结构 > 数组编程知识汇总 ...
-
4
dotnet 6 数组拷贝性能对比本文来对比多个不同的方法进行数组拷贝，和测试其性能 测试性能必须采用基准（标准）性能测试方法，否则测试结果不可信。在 dotnet 里面，可以采用
-
2
拷贝漫画获取章节API JavaScript加密逆向分析 ...
-
9
超详细的JavaScript深浅拷贝实现！ 作者：CUGGZ 2022-09-26 09:01:23 如果拷贝的是基本数据类型，拷贝的就是基本数据类型的值；如果拷贝的是引用数据类型，拷贝的就是内存地址。如果其中一个对象的引用内存地址发...
-
2
JS手撕(二) 数组扁平化、浅拷贝、深拷贝数组扁平化数组扁平化就是将多层数组拍平成一层，如[1, [2, [3, 4]]]变成[1, 2, 3, 4] 可以使用递归来实...
-
9
JavaScript 深拷贝的循环引用问题 如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK