国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

duan199226 / 1142人閱讀

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

一、原數(shù)組里的數(shù)據(jù)不包含引用類型 
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ù)組

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

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

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

2、使用 concat() 方法

拷貝數(shù)組：

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

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

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

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

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

拷貝數(shù)組：

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

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

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

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

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

二、原數(shù)組里的數(shù)據(jù)包含引用類型 
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ù)組

修改經(jīng)過 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"}]


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

2、使用 concat() 方法

拷貝數(shù)組：

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

修改經(jīng)過 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"}]


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

三、原因分析

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

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

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

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

四、解決辦法（含有引入類型的數(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));

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96382.html

相關(guān)文章

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

    摘要：函數(shù)的因?yàn)橐矒碛袑傩裕云浔环Q為類數(shù)組對象。方法數(shù)組的拼接，，指被拼接的對象數(shù)組，為數(shù)組。如果為負(fù)，則將其視為，其中為數(shù)組的長度。而提供了數(shù)組反轉(zhuǎn)和排序來對數(shù)組進(jìn)行重排序。用好原生，你的代碼將顯得干凈，有趣。 前言 最近工作做數(shù)據(jù)交互展示，常和數(shù)據(jù)打交道，而隨之而來的就是遇見后端傳來的各種各樣的數(shù)組，我需要用各式各樣的方法來變換這些數(shù)據(jù)，來最好的展示這些數(shù)據(jù)；很多東西久了沒用就容易忘...

    shenhualong 評論0 收藏0

  • 深入理解JS深淺拷貝

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

    JackJiang 評論0 收藏0

  • 淺拷貝與深拷貝

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

    hzc 評論0 收藏0

  • 淺拷貝與深拷貝

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

    史占廣 評論0 收藏0

  • 【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用、克隆對象、復(fù)制數(shù)組

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

    ccj659 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<