js 数组克隆方法 小结


Posted in Javascript onMarch 20, 2010

因此如果要创建一个与已经存在的对象内容相同的对象,不能通过简单的赋值操作。这样说的可能还是不太明白。

看下面的例子:

var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一个元素 alert(b); //弹出1,2,3 alert(c); //弹出1,2,3 
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一个元素 alert(b); //弹出1,2,3 alert(c); //弹出1,2,3

我们执行上面的代码发现,在a的内容做改变后,变量b和c的结果也改变了。

上面的情况也许不是我们所需要的,我们希望的是创建一个与原对象内容一样的“新”对象。这样我们就需要通过一些克隆的办法来实现。

JS里Array也是一种Object。这里我们主要总结一下Array的克隆方式,我们这里为Array原生对象扩展一个clone方法。

1、最简单的办法,就是创建一个新数组,并遍历数组逐项添加到新数组中。

Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; } 
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }

这种实现方式是最容易想到也是最容易理解的,但是代码有点复杂了,我们仔细研究Array的一些方法,其实还有一个很简单的办法。下面说一下其它的两种办法。

2、通过Array对象的slice方法。

slice方法是通过参数start和end的传入值来返回数组中的一段,该方法不对原数组进行操作。我们通过slice(0)可以使其返回所有项。

Array.prototype.clone=function(){ return this.slice(0); } 
Array.prototype.clone=function(){ return this.slice(0); }

3、通过Array对象的concat方法。
concat方法是用来实现数组的合并的。通过和一个空函数的合并,即可实现我们的克隆功能。
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); } 
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }

如果发挥想象应该还有其它的办法,以上只是本人想到的两种方法。

JavaScript 克隆数组最简单的方法

JavaScript数组的快速克隆(slice()函数)和数组的排序、乱序和搜索(sort()函数)

Javascript 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
js实现漫天星星效果
Jan 19 Javascript
javascript实现简易计算器
Feb 01 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vs2003 js文件编码问题的解决方法
Mar 20 #Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 #Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 #Javascript
jQuery 前的按键判断代码
Mar 19 #Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 #Javascript
JS 有名函数表达式全面解析
Mar 19 #Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 #Javascript
You might like
php skymvc 一款轻量、简单的php
2011/06/28 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
.net软件工程师面试题
2015/03/31 面试题
计算机求职信
2013/12/01 职场文书
小学生成长感言
2014/01/30 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
啤酒节策划方案
2014/05/28 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis