搜索
您的当前位置:首页正文

JavaScript克隆数组最简单的方法_javascript技巧

2023-12-02 来源:字库网

var a = [1, 2, 3]; var b = a.slice(0); b[1] = 20; alert(a[1]); //2 alert(b[1]); //20 两个值不一样说明克隆成功。当然也可以使用Array的原型来做: Array.prototype.clone = function () { return this.slice(0); } var a = [1, 2, 3]; var b = a.clone(); b[1] = 20; alert(a[1]); //2 alert(b[1]); //20

小编还为您整理了以下内容,可能对您也有帮助:

怎么使用javascript深度拷贝一个数组

有两种数组拷贝类型:浅拷贝 & 深拷贝。浅拷贝只会拷贝数组的第一层,剩下的会引用。如果你需要一个嵌套的数组的拷贝,那需要你去深度拷贝这个数组。深拷贝,选择JSON方法或者Lodsh库吧

const numbers = [1, [2], [3, [4]], 5];

// Using JavaScript

JSON.parse(JSON.stringify(numbers));

// Using Lodash

_.cloneDeep(objects);

数组是引用类型

为了搞清楚为什么有两种类型的拷贝,我们来深度了解一下基础知识然后解释什么是引用类型。

与原始类型(number、string)不同,数组是引用类型。这意味着当你把一个数组赋值给一个变量,你是将数组的内存地址而非数组本身赋给变量。

拷贝值类型

这里没什么大不了的,我们创建一个value的拷贝。当我们改变valueCopy的值,它不会影响原来的value值。同理,当我们改变原来的值它也不会影响拷贝后的值。很好👍

let value = 3;

let valueCopy = value; // create copy

console.log(valueCopy); // 3

// Change valueCopy

valueCopy = 100

console.log(valueCopy); // 100

// ✅ Original NOT affected

console.log(value); // 3

拷贝引用类型

好的,这里就会有点奇怪了!我们用同样的方法拷贝数组。

let array = [1,2,3];

let arrayCopy = array; // create copy

console.log(arrayCopy); // [1,2,3];

// Change 1st element of the array

arrayCopy[0] = '👻';

console.log(arrayCopy); // [ '👻', 2, 3 ]

// ❌Original got affected

console.log(array); // [ '👻', 2, 3 ]

为什么原来的数组也受到了影响呢?好了,是因为:你拷贝的不是你拷贝的。说人话,意思就是你拷贝的只是指向数组内存空间的指针。引用类型不包含值,它们是指向内存中值的指针。

拷贝引用类型的方法

解决方法就是拷贝值而不是指针。

let array = [1,2,3];

let arrayCopy = [...array]; // create TRUE copy

console.log(arrayCopy); // [1,2,3];

// Change 1st element of the array

arrayCopy[0] = '👻';

console.log(arrayCopy); // [ '👻', 2, 3 ]

// ✅ Original NOT affected

console.log(array); // [ 1, 2, 3 ]

浅 & 深 拷贝

当我使用展开扩展符号...来拷贝一个数组,我只是浅拷贝了一个数组。如果数组是嵌套或者的,这就不奏效了。

let nestedArray = [1, [2], 3];

let arrayCopy = [...nestedArray];

// Make some changes

arrayCopy[0] = '👻'; // change shallow element

arrayCopy[1][0] = '💩'; // change nested element

console.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]

// ❌ Nested array got affected

console.log(nestedArray); // [ 1, [ '💩' ], 3 ]

如上,浅拷贝首层数组表现良好,然而,更改了嵌套数组元素,原始数组也受到影响💩。为了解决这个问题,就要用到深拷贝了。

let nestedArray = [1, [2], 3];

let arrayCopy = JSON.parse(JSON.stringify(nestedArray));

// Make some changes

arrayCopy[0] = '👻'; // change shallow element

arrayCopy[1][0] = '💩'; // change nested element

console.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]

// ✅ Nested array NOT affected

console.log(nestedArray); // 1, [ 2 ], 3 ]

所以,这就完事了吗?要不要手写一个深拷贝引用类型的方法?

const deepClone = obj => {

const isObject = args => (typeof args === 'object' || typeof args === 'function') && typeof args !== null

if (!isObject) throw new Error('Not Reference Types')

let newObj = Array.isArray(obj) ? [...obj] : { ...obj }

Reflect.ownKeys(newObj).map(key => {

newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]

})

return newObj

}

文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,js 数组克隆方法 小结

因此如果要创建一个与已经存在的对象内容相同的对象,不能通过简单的赋值操作。这样说的可能还是不太明白。
看下面的例子:
复制代码
代码如下:
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()函数)

js 数组克隆方法 小结

因此如果要创建一个与已经存在的对象内容相同的对象,不能通过简单的赋值操作。这样说的可能还是不太明白。
看下面的例子:
复制代码
代码如下:
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中的concat方法复制数组


我们知道concat方法可以组合两个或多个数组以创建新数组,实际上concat方法也可以用来复制数组,本篇文章我们就来介绍关于JavaScript中concat方法复制数组的用法。
我们在需要进行数组复制的时候可能会想到以下的方法
代码
var arr1 = [1,2,3,4,5];
var arr2 = [];
arr2 = arr1;
console.log(arr1);
console.log(arr2);执行结果如下:
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]在这个例子中,将数组arr1赋值给了另一个数组arr2。
查看执行结果,似乎复制了数组的内容并创建了相同的数组。

但是,由于数组是“引用类型”的数据,因此它不会复制该值,而只是共享存储该值的内存的位置。

因此,我们编写以下代码
arr2.push(6);

console.log(arr1);
console.log(arr2);执行结果如下
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6]根据以上结果可以发现即使我们只给arr2添加新值6,但是数组arr1中也会添加一个6,这就是因为两个
数组都只引用存储值的位置,如果更改任一数组中的数据,两者都会改变。
所以下面我们就来使用concat方法复制数组

我们来看具体示例
var arr1 = [1,2,3,4,5];
var arr2 = [];

arr2 = arr1.concat();
arr2.push(6);

console.log(arr1);
console.log(arr2);执行结果如下
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6]要将另一个数组复制到数组arr2,只需要在复制源arr1中执行concat()即可。
本篇文章到这里就全部结束了,更多精彩内容大家可以关注Gxl网相关栏目教程!!!

如何使用JavaScript中的concat方法复制数组


我们知道concat方法可以组合两个或多个数组以创建新数组,实际上concat方法也可以用来复制数组,本篇文章我们就来介绍关于JavaScript中concat方法复制数组的用法。
我们在需要进行数组复制的时候可能会想到以下的方法
代码
var arr1 = [1,2,3,4,5];
var arr2 = [];
arr2 = arr1;
console.log(arr1);
console.log(arr2);执行结果如下:
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]在这个例子中,将数组arr1赋值给了另一个数组arr2。
查看执行结果,似乎复制了数组的内容并创建了相同的数组。

但是,由于数组是“引用类型”的数据,因此它不会复制该值,而只是共享存储该值的内存的位置。

因此,我们编写以下代码
arr2.push(6);

console.log(arr1);
console.log(arr2);执行结果如下
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6]根据以上结果可以发现即使我们只给arr2添加新值6,但是数组arr1中也会添加一个6,这就是因为两个
数组都只引用存储值的位置,如果更改任一数组中的数据,两者都会改变。
所以下面我们就来使用concat方法复制数组

我们来看具体示例
var arr1 = [1,2,3,4,5];
var arr2 = [];

arr2 = arr1.concat();
arr2.push(6);

console.log(arr1);
console.log(arr2);执行结果如下
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6]要将另一个数组复制到数组arr2,只需要在复制源arr1中执行concat()即可。
本篇文章到这里就全部结束了,更多精彩内容大家可以关注Gxl网相关栏目教程!!!

JS中实现深拷贝的几种方法(object,Array)

4.通过第三方工具实现深拷贝

lodash.cloneDeep

数组深拷贝

1. concat(arr1, arr2,....)

2. slice(idx1, idx2)

参数可以省略

1)没有参数是拷贝数组

2)只有一个参数是从该位置起到结束拷贝数组元素

3)两个参数,拷贝从起始位置到结束位置的元素(不包含结束位置的元素:含头不含尾)

注意:当数组中的元素均为一维是深拷贝

          数组中元素一维以上是值的引用

js怎么拷贝数组[1,[2,3],[4,[5,6]],7]

  var arr = [1, [2, 3], [4, [5, 6]], 7];
        function copy(ar) {
            var a = [];
            for (var i = 0; i < ar.length;i++) {
                if (ar[i] instanceof Array) {
                    a.push(copy(ar[i]));
                } else {
                    a.push(ar[i]);
                }
            }
            return a;
        }
        var v = copy(arr);
        console.log(v);

js怎么拷贝数组[1,[2,3],[4,[5,6]],7]

  var arr = [1, [2, 3], [4, [5, 6]], 7];
        function copy(ar) {
            var a = [];
            for (var i = 0; i < ar.length;i++) {
                if (ar[i] instanceof Array) {
                    a.push(copy(ar[i]));
                } else {
                    a.push(ar[i]);
                }
            }
            return a;
        }
        var v = copy(arr);
        console.log(v);

在javascript里怎样方便的克隆一个object

javascript克隆一个object的方法是:
function clone(obj) {
var copy;
// 处理null和undefined
if (null == obj || "object" != typeof obj) return obj;
// 处理日期类型
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// 处理数组
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}

// 处理object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}

throw new Error("Unable to copy obj! Its type isn't supported.");
}

在javascript里怎样方便的克隆一个object

javascript克隆一个object的方法是:
function clone(obj) {
var copy;
// 处理null和undefined
if (null == obj || "object" != typeof obj) return obj;
// 处理日期类型
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// 处理数组
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}

// 处理object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}

throw new Error("Unable to copy obj! Its type isn't supported.");
}

js 的数组方法的都有哪些?

JavaScript 的数组方法有很多,以下是一些常用的方法:

- push():在数组末尾添加一个或多个元素,并返回新数组的长度。

- pop():删除数组末尾的元素,并返回该元素。

- shift():删除数组的第一个元素,并返回该元素。

- unshift():在数组开头添加一个或多个元素,并返回新数组的长度。

- splice():在数组中添加/删除项目,然后返回被删除的项目。

- slice():从现有数组中返回选定的元素。

JavaScript编程开发技巧?

随着互联网的不断发展,关于JavaScript编程开发语言的使用也被广大程序员掌握。而今天我们就一起来了解一下,JavaScript编程开发的一些技巧都有哪些。

JSON.stringify

我们平时经常会用到JSON对象,比如当我们要实现对象的深拷贝时,我们可以用JSON对象的JSON.stringify和JSON.parse来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系。在使用localStorage时,也会用到它,因为localStorage只能存储字符串格式的内容,所以,我们在存之前,将数值转换成JSON字符串,取出来用的时候,再转成对象或数组。

参数:

value:将要被序列化的变量的值

replacer:替代器。可以是函数或者是数组,如果是一个函数,则value每个属性都要经过这个函数的处理,该函数的返回值就是后被序列化后的值。如果是一个数组,则要求该数组的元素是字符串,且这些元素会被当做value的键(key)进行匹配,后序列化的结果,是只包含该数组每个元素为key的值。

space:指定输出数值的代码缩进,美化格式之用,可以是数字或者字符串。如果是数字(大为10)的话,代表每行代码的缩进是多少个空格。如果是字符串的话,该字符串(多前十个字符)将作显示在每行代码之前。

用Set来实现数组去重

在ES6中,引入了一个新的数据结构类型:Set。而Set与Array的结构是很类似的,且Set和Array可以相互进行转换。

数组去重,也算是一个比较常见的前端面试题了,方法有很多种,这里不多赘述。下面我们看看用Set和...(拓展运算符)可以很简单的进行数组去重。

用块级作用域避免命名冲突

在开发的过程中,通常会遇到命名冲突的问题,就是需要根据场景不同来定义不同的值来赋值给同一个变量。下面天通苑IT培训介绍一个使用ES6中的块级作用域来解决这个问题的方法。

函数参数值校验

我们知道,在ES6中,为函数增加了参数默认值的特性,可以为参数设定一些默认值,可以让代码更简洁,可维护。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 送周子华南归的作者 送周子华南归的作者是什么]

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻的全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者是什么

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

Top