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

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

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

一、原數組里的數據不包含引用類型

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

1、使用 slice() 方法

拷貝數組：

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

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

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

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

2、使用 concat() 方法

拷貝數組：

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

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

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

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

3、使用簡單的數組賦值語法

拷貝數組：

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

修改經過簡單賦值過的新數組

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

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

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

二、原數組里的數據包含引用類型

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

1、使用 slice() 方法

拷貝數組：

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

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

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

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

2、使用 concat() 方法

拷貝數組：

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

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

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

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

三、原因分析

1、數組的淺拷貝

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

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

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

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

方法一：遞歸

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數組對象深度復制 slice方法 js中的replace方法

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/96382.html

用好JS 原生API系列之數組

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

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

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

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

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

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

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

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

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

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