慎用JS中的slice()、cancat()和assign()方法來復制數(shù)組

duan199226 發(fā)布于2019-08-23 10:28 / 1134人閱讀

摘要：使用方法拷貝數(shù)組打印新數(shù)組張小二新數(shù)組修改經過拷貝過的新數(shù)組隔壁張小二打印舊數(shù)組隔壁張小二打印新數(shù)組隔壁張小二結論使用方法拷貝數(shù)組，然后修改新數(shù)組，會改變舊數(shù)組的值。

一、原數(shù)組里的數(shù)據不包含引用類型

let arr1 = [1 , 2 , 3 , "hello" , "world"];  //原數(shù)組

1、使用 slice() 方法

拷貝數(shù)組：

let arr2 = arr1.slice(0);
console.log(arr2);   //打印新數(shù)組
[1 , 2 , 3 , "hello" , "world"];  //新數(shù)組

修改經過 slice() 拷貝過的新數(shù)組：

arr2[3] = "Hello";
console.log(arr1);  //打印舊數(shù)組
[1 , 2 , 3 , "hello" , "world"]   
console.log(arr2);   //打印新數(shù)組
[1 , 2 , 3 , "Hello" , "world"]

結論：使用 slice() 方法拷貝數(shù)組，然后修改新數(shù)組，不會影響到舊數(shù)組的值。

2、使用 concat() 方法

拷貝數(shù)組：

let arr3 = [].conat(arr1);
console.log(arr3);   //打印新數(shù)組
[1 , 2 , 3 , "hello" , "world"];  //新數(shù)組

修改經過 concat() 拷貝過的新數(shù)組

arr3[3] = "Hello";
console.log(arr1);  //打印舊數(shù)組
[1 , 2 , 3 , "hello" , "world"]   
console.log(arr3);   //打印新數(shù)組
[1 , 2 , 3 , "Hello" , "world"]

結論：使用 concat() 方法拷貝數(shù)組，然后修改新數(shù)組，不會影響到舊數(shù)組的值。

3、使用簡單的數(shù)組賦值語法

拷貝數(shù)組：

let arr4 = arr1;
console.log(arr4);   //打印新數(shù)組
[1 , 2 , 3 , "hello" , "world"];  //新數(shù)組

修改經過簡單賦值過的新數(shù)組

arr4[3] = "Hello";
console.log(arr1);  //打印舊數(shù)組
[1 , 2 , 3 , "Hello" , "world"]   
console.log(arr4);   //打印新數(shù)組
[1 , 2 , 3 , "Hello" , "world"]

結論：使用數(shù)組簡單賦值方法拷貝數(shù)組，然后修改新數(shù)組，會影響到舊數(shù)組的值。

原因：這種簡單賦值的方法屬于數(shù)組的淺拷貝，數(shù)組arr1和數(shù)組arr4共用同一塊內存，其中一個數(shù)組改變，另一個數(shù)組也會跟著改變。

二、原數(shù)組里的數(shù)據包含引用類型

let arr1 = [1 , 2 , 3 , {"name" : "張小二"} , {"sex" : "male"}];  //原數(shù)組

1、使用 slice() 方法

拷貝數(shù)組：

let arr2 = arr1.slice(0);
console.log(arr2);   //打印新數(shù)組
[1 , 2 , 3 , {"name" : "張小二"} , {"sex" : "male"}];  //新數(shù)組

修改經過 slice() 拷貝過的新數(shù)組：

arr2[3].name = "隔壁張小二";
console.log(arr1);  //打印舊數(shù)組
[1 , 2 , 3 , {"name" : "隔壁張小二"} , {"sex" : "male"}]   
console.log(arr2);   //打印新數(shù)組
[1 , 2 , 3 , {"name" : "隔壁張小二"} , {"sex" : "male"}]

結論：使用 slice() 方法拷貝數(shù)組，然后修改新數(shù)組，會改變舊數(shù)組的值。

2、使用 concat() 方法

拷貝數(shù)組：

let arr3 = [].conat(arr1);
console.log(arr3);   //打印新數(shù)組
[1 , 2 , 3 , {"name" : "張小二"} , {"sex" : "male"}];  //新數(shù)組

修改經過 concat() 拷貝過的新數(shù)組

arr3[3].name = "隔壁張小二";
console.log(arr1);  //打印舊數(shù)組
[1 , 2 , 3 , {"name" : "隔壁張小二"} , {"sex" : "male"}]   
console.log(arr3);   //打印新數(shù)組
[1 , 2 , 3 , {"name" : "隔壁張小二"} , {"sex" : "male"}]

結論：使用 concat() 方法拷貝數(shù)組，然后修改新數(shù)組，會改變舊數(shù)組的值。

三、原因分析

1、數(shù)組的淺拷貝

（1）數(shù)組的直接賦值屬于數(shù)組的淺拷貝，JS存儲對象都是存內存地址的，所以淺拷貝會導致新數(shù)組和舊數(shù)組共用同一塊內存地址，其中一個數(shù)組變化，另一個數(shù)組也會相應的變化。

（2）數(shù)組內部不含有引用類型，使用slice() 、concat() 和 assign() 方法都屬于數(shù)組的深拷貝，一個數(shù)組變化，另一個數(shù)組不受影響。

（3）數(shù)組內部含有引用類型，使用slice() 、concat() 和 assign() 方法，非引用類型的值屬于深拷貝，引入類型的值屬于淺拷貝，一個數(shù)組變化，另一個也會相應的變化。

四、解決辦法（含有引入類型的數(shù)組）

方法一：遞歸

let cloneObj = function(obj){
    let str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== "object"){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化對象
        newobj = JSON.parse(str); //還原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === "object" ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

let newArr = cloneObj(oldArr);

方法二：通過JSON解析解決

let newArr = JSON.parse(JSON.stringify(oldArr));

云服務器 GPU云服務器 js中的assign js數(shù)組對象深度復制 slice方法 js中的replace方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96382.html

用好JS 原生API系列之數(shù)組

摘要：函數(shù)的因為也擁有屬性，所以其被稱為類數(shù)組對象。方法數(shù)組的拼接，，指被拼接的對象數(shù)組，為數(shù)組。如果為負，則將其視為，其中為數(shù)組的長度。而提供了數(shù)組反轉和排序來對數(shù)組進行重排序。用好原生，你的代碼將顯得干凈，有趣。前言最近工作做數(shù)據交互展示，常和數(shù)據打交道，而隨之而來的就是遇見后端傳來的各種各樣的數(shù)組，我需要用各式各樣的方法來變換這些數(shù)據，來最好的展示這些數(shù)據；很多東西久了沒用就容易忘...

shenhualong 2019-08-21 16:20 評論0 收藏0
深入理解JS深淺拷貝

摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數(shù)據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數(shù)超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數(shù)據類型基本數(shù)據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數(shù)據類型：...

JackJiang 2019-08-23 14:31 評論0 收藏0
淺拷貝與深拷貝

摘要：二淺拷貝與深拷貝深拷貝和淺拷貝是只針對和這樣的引用數(shù)據類型的。淺拷貝是按位拷貝對象，它會創(chuàng)建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。對于字符串數(shù)字及布爾值來說不是或者對象，會拷貝這些值到新的數(shù)組里。一、數(shù)據類型數(shù)據分為基本數(shù)據類型(String, Number, Boolean, Null, Undefined，Symbol)和對象數(shù)據類型。基本數(shù)據類型的特點：直...

hzc 2019-08-02 13:56 評論0 收藏0
淺拷貝與深拷貝

摘要：二淺拷貝與深拷貝深拷貝和淺拷貝是只針對和這樣的引用數(shù)據類型的。淺拷貝是按位拷貝對象，它會創(chuàng)建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。對于字符串數(shù)字及布爾值來說不是或者對象，會拷貝這些值到新的數(shù)組里。一、數(shù)據類型數(shù)據分為基本數(shù)據類型(String, Number, Boolean, Null, Undefined，Symbol)和對象數(shù)據類型。基本數(shù)據類型的特點：直...

史占廣 2019-08-23 14:15 評論0 收藏0
【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用、克隆對象、復制數(shù)組

摘要：前端芝士樹淺拷貝深拷貝以及的作用首先還是得回到的基本數(shù)據類型。值類型深拷貝數(shù)值布爾值字符串。它接受任意數(shù)量的源對象，主要作用就是枚舉它們的所有屬性并分配給。【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用首先還是得回到Javascript的基本數(shù)據類型。值類型[深拷貝]：數(shù)值Num、布爾值Boolean、字符串String、null、undefined。基本...

ccj659 2019-08-23 16:14 評論0 收藏0