ホームページ  >  記事  >  ウェブフロントエンド  >  jsのシャローコピーとディープコピーとその実装方法の簡単な紹介

jsのシャローコピーとディープコピーとその実装方法の簡単な紹介

不言
不言オリジナル
2018-08-11 16:09:581826ブラウズ

この記事では、js での浅いコピーと深いコピーの簡単な紹介と実装方法を紹介します。必要な方は参考にしていただければ幸いです。

最初のステートメント: どのようなデータ型をコピーできますか?間違いなく、配列とオブジェクト [Array&Object]

Shallow copy:

* --- データのコピー方法(元のデータに影響を与えるのは浅いコピーです)
* 1. 変数に直接コピーします //Shallow copy
* 2. Object.assign() //オブジェクトの浅いコピー
* 3.Array.prototype.concat() //配列の浅いコピー
* 4.Array.prototype.slice() //配列の浅いコピー

深いコピー:

方法 1:

//无嵌套对象或者数组浅拷贝
function simpleDeepClone(target){
       return JSON.parse(JSON.stringify(target));
}

方法 2:

//嵌套对象或者数组深拷贝
//定义检测数据类型的函数
function checkType(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}

//实现深度拷贝
function clone(target) {
    //判断拷贝的数据类型
    let result, targetType = checkType(target);
    if (targetType === 'Object') {
        result = {};
    } else if (targetType === 'Array') {
        result = [];
    } else {
        return target;
    }
    //遍历目标数据
    for (let i in target) {
        //获取数据对象的每一个值
        let value = target[i];
        //判断目标结构里面是否存在对象/数组
        if (checkType(value) === 'Object' || checkType(value) === 'Array') {
            //继续遍历
            result[i] = clone(value);
        } else { //获取到的value值是基本的数据类型或者函数
            result[i] = value;
        }
    }
    return result;
}

関連する推奨事項:

jQuery の $.extend 浅いコピーと深いコピーの例の分析

j深いコピーと浅いコピーの実装メソッド

以上がjsのシャローコピーとディープコピーとその実装方法の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。