স্প্রেড সিনট্যাক্সটি ব্যবহার করে ES6 এ গভীর অনুলিপি করুন

Question 1

আমি আমার রেডাক্স প্রকল্পের জন্য একটি গভীর অনুলিপি মানচিত্র পদ্ধতি তৈরি করার চেষ্টা করছি যা অ্যারের পরিবর্তে অবজেক্টের সাথে কাজ করবে। আমি পড়েছি রেডাক্সে প্রতিটি রাজ্যের আগের রাজ্যে কোনও পরিবর্তন করা উচিত নয়।

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    output[key] = callback.call(this, {...object[key]});

    return output;
    }, {});
}

এটি কাজ করে:

    return mapCopy(state, e => {

            if (e.id === action.id) {
                 e.title = 'new item';
            }

            return e;
        })

তবে এটি অভ্যন্তরীণ আইটেমগুলিকে গভীরভাবে অনুলিপি করে না তাই আমার এটির জন্য টুইট করতে হবে:

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    let newObject = {...object[key]};
    newObject.style = {...newObject.style};
    newObject.data = {...newObject.data};

    output[key] = callback.call(this, newObject);

    return output;
    }, {});
}

এটি কম মার্জিত হয় কারণ এটি জানতে যে কোন জিনিসগুলি পাস হয়েছে। ES6- তে কোনও অবজেক্টের গভীর অনুলিপি করতে স্প্রেড সিনট্যাক্স ব্যবহার করার কোনও উপায় আছে কি?

Question 2

ES6 এর মতো কোনও কার্যকারিতা অন্তর্নির্মিত নয়। আপনি কী করতে চান তার উপর নির্ভর করে আপনার কাছে কয়েকটি বিকল্প রয়েছে বলে আমি মনে করি।

আপনি যদি সত্যিই গভীর অনুলিপি করতে চান:

একটি গ্রন্থাগার ব্যবহার করুন। উদাহরণস্বরূপ, লোড্যাশের একটি cloneDeepপদ্ধতি রয়েছে।
আপনার নিজস্ব ক্লোনিং ফাংশনটি কার্যকর করুন।

আপনার নির্দিষ্ট সমস্যার বিকল্প সমাধান (কোনও গভীর অনুলিপি নেই)

তবে আমি মনে করি, আপনি যদি কয়েকটি জিনিস পরিবর্তন করতে ইচ্ছুক হন তবে আপনি নিজের কিছু কাজ বাঁচাতে পারেন। আমি ধরে নিচ্ছি যে আপনি আপনার ফাংশনে সমস্ত কল সাইট নিয়ন্ত্রণ করছেন।

নির্দিষ্ট করুন যে সমস্ত কলব্যাকগুলি পাস করা হয়েছে mapCopyবিদ্যমান অবজেক্টটির পরিবর্তনের পরিবর্তে নতুন অবজেক্টগুলি ফিরিয়ে আনতে হবে। উদাহরণ স্বরূপ:
```
mapCopy(state, e => {
  if (e.id === action.id) {
    return Object.assign({}, e, {
      title: 'new item'
    });
  } else {  
    return e;
  }
});
```
এটি Object.assignএকটি নতুন অবজেক্ট তৈরির জন্য ব্যবহার eকরে, সেই নতুন অবজেক্টের বৈশিষ্ট্য নির্ধারণ করে , তারপরে সেই নতুন অবজেক্টে একটি নতুন শিরোনাম সেট করে। এর অর্থ আপনি কখনই বিদ্যমান অবজেক্টগুলিকে পরিবর্তন করতে পারবেন না এবং যখন প্রয়োজন হয় কেবল তখনই নতুন তৈরি করেন।

mapCopy এখন সত্যিই সহজ হতে পারে:

export const mapCopy = (object, callback) => {
  return Object.keys(object).reduce(function (output, key) {
    output[key] = callback.call(this, object[key]);
    return output;
  }, {});
}

মূলত, mapCopyতার কলকারীদের সঠিক কাজ করার জন্য বিশ্বাস করা হচ্ছে। এই কারণেই আমি বলেছিলাম এটি অনুমান করে আপনি সমস্ত কল সাইট নিয়ন্ত্রণ করেন।

Question 3

পরিবর্তে গভীর অনুলিপি জন্য এটি ব্যবহার করুন

var newObject = JSON.parse(JSON.stringify(oldObject))

var oldObject = {
  name: 'A',
  address: {
    street: 'Station Road',
    city: 'Pune'
  }
}
var newObject = JSON.parse(JSON.stringify(oldObject));

newObject.address.city = 'Delhi';
console.log('newObject');
console.log(newObject);
console.log('oldObject');
console.log(oldObject);

স্নিপেট প্রসারিত করুন

Question 4

এমডিএন থেকে

দ্রষ্টব্য: একটি অ্যারে অনুলিপি করার সময় স্প্রেড সিনট্যাক্স কার্যকরভাবে এক স্তর পর্যন্ত যায়। অতএব, নিম্নলিখিত উদাহরণটি দেখায় যেমন এটি বহুমাত্রিক অ্যারেগুলি অনুলিপি করা অনুপযুক্ত হতে পারে (এটি অবজেক্ট.সেসাইন () এবং স্প্রেড সিনট্যাক্সের সাথে একই)।

ব্যক্তিগতভাবে, আমি লোডাসের ক্লোনডিপ ব্যবহার করার পরামর্শ দিচ্ছি মাল্টি-লেভেল অবজেক্ট / অ্যারে ক্লোনিংয়ের জন্য ফাংশনটি ।

এখানে একটি কার্যকারী উদাহরণ:

const arr1 = [{ 'a': 1 }];

const arr2 = [...arr1];

const arr3 = _.clone(arr1);

const arr4 = arr1.slice();

const arr5 = _.cloneDeep(arr1);

const arr6 = [...{...arr1}]; // a bit ugly syntax but it is working!


// first level
console.log(arr1 === arr2); // false
console.log(arr1 === arr3); // false
console.log(arr1 === arr4); // false
console.log(arr1 === arr5); // false
console.log(arr1 === arr6); // false

// second level
console.log(arr1[0] === arr2[0]); // true
console.log(arr1[0] === arr3[0]); // true
console.log(arr1[0] === arr4[0]); // true
console.log(arr1[0] === arr5[0]); // false
console.log(arr1[0] === arr6[0]); // false

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

স্নিপেট প্রসারিত করুন

Question 5

আমি প্রায়শই এটি ব্যবহার করি:

function deepCopy(obj) {
    if(typeof obj !== 'object' || obj === null) {
        return obj;
    }

    if(obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if(obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }

    if(obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {})
    }
}

Question 6

const a = {
  foods: {
    dinner: 'Pasta'
  }
}
let b = JSON.parse(JSON.stringify(a))
b.foods.dinner = 'Soup'
console.log(b.foods.dinner) // Soup
console.log(a.foods.dinner) // Pasta

ব্যবহার JSON.stringifyএবং JSON.parseসেরা উপায়। কারণ স্প্রেড অপারেটরটি ব্যবহার করে আমরা যখন জসন অবজেক্টের ভিতরে অন্য একটি বস্তু থাকে তখন আমরা কার্যকর উত্তরটি পাই না। আমাদের এটি ম্যানুয়ালি নির্দিষ্ট করতে হবে।

Question 7

function deepclone(obj) {
    let newObj = {};

    if (typeof obj === 'object') {
        for (let key in obj) {
            let property = obj[key],
                type = typeof property;
            switch (type) {
                case 'object':
                    if( Object.prototype.toString.call( property ) === '[object Array]' ) {
                        newObj[key] = [];
                        for (let item of property) {
                            newObj[key].push(this.deepclone(item))
                        }
                    } else {
                        newObj[key] = deepclone(property);
                    }
                    break;
                default:
                    newObj[key] = property;
                    break;

            }
        }
        return newObj
    } else {
        return obj;
    }
}

Question 8

// use: clone( <thing to copy> ) returns <new copy>
// untested use at own risk
function clone(o, m){
  // return non object values
  if('object' !==typeof o) return o
  // m: a map of old refs to new object refs to stop recursion
  if('object' !==typeof m || null ===m) m =new WeakMap()
  var n =m.get(o)
  if('undefined' !==typeof n) return n
  // shallow/leaf clone object
  var c =Object.getPrototypeOf(o).constructor
  // TODO: specialize copies for expected built in types i.e. Date etc
  switch(c) {
    // shouldn't be copied, keep reference
    case Boolean:
    case Error:
    case Function:
    case Number:
    case Promise:
    case String:
    case Symbol:
    case WeakMap:
    case WeakSet:
      n =o
      break;
    // array like/collection objects
    case Array:
      m.set(o, n =o.slice(0))
      // recursive copy for child objects
      n.forEach(function(v,i){
        if('object' ===typeof v) n[i] =clone(v, m)
      });
      break;
    case ArrayBuffer:
      m.set(o, n =o.slice(0))
      break;
    case DataView:
      m.set(o, n =new (c)(clone(o.buffer, m), o.byteOffset, o.byteLength))
      break;
    case Map:
    case Set:
      m.set(o, n =new (c)(clone(Array.from(o.entries()), m)))
      break;
    case Int8Array:
    case Uint8Array:
    case Uint8ClampedArray:
    case Int16Array:
    case Uint16Array:
    case Int32Array:
    case Uint32Array:
    case Float32Array:
    case Float64Array:
      m.set(o, n =new (c)(clone(o.buffer, m), o.byteOffset, o.length))
      break;
    // use built in copy constructor
    case Date:
    case RegExp:
      m.set(o, n =new (c)(o))
      break;
    // fallback generic object copy
    default:
      m.set(o, n =Object.assign(new (c)(), o))
      // recursive copy for child objects
      for(c in n) if('object' ===typeof n[c]) n[c] =clone(n[c], m)
  }
  return n
}

Question 9

const cloneData = (dataArray) => {
    newData= []
    dataArray.forEach((value) => {
        newData.push({...value})
    })
    return newData
}

a = [{নাম: "সিভা"}, {নাম: "সিভা 1"}];
খ = আমারকপি (ক)
খ === এ // মিথ্যা `

Question 10

আমি নিজেই গত দিন এই উত্তরগুলিতে অবতরণ করেছি, জটিল কাঠামোগুলি গভীরভাবে অনুলিপি করার একটি উপায় সন্ধান করার চেষ্টা করছি, যার মধ্যে পুনরাবৃত্ত লিঙ্কগুলি অন্তর্ভুক্ত থাকতে পারে। আগে যে কোনও প্রস্তাব দেওয়া থেকে আমি সন্তুষ্ট না হওয়ায় আমি নিজেই এই চাকাটি বাস্তবায়ন করেছি। এবং এটি বেশ ভাল কাজ করে। আশা করি এটি কাউকে সাহায্য করবে।

ব্যবহারের উদাহরণ:

OriginalStruct.deep_copy = deep_copy; // attach the function as a method

TheClone = OriginalStruct.deep_copy();

দয়া করে https://github.com/latitov/JS_DeepCopy দেখুনএটি কীভাবে ব্যবহার করতে হয় তার সরাসরি উদাহরণগুলির জন্য এবং এছাড়াও গভীর_প্রিন্ট () রয়েছে।

আপনার যদি এটির দ্রুত প্রয়োজন হয়, এই মুহুর্তে ডিপ_কপি () ফাংশনের উত্স:

function deep_copy() {
    'use strict';   // required for undef test of 'this' below

    // Copyright (c) 2019, Leonid Titov, Mentions Highly Appreciated.

    var id_cnt = 1;
    var all_old_objects = {};
    var all_new_objects = {};
    var root_obj = this;

    if (root_obj === undefined) {
        console.log(`deep_copy() error: wrong call context`);
        return;
    }

    var new_obj = copy_obj(root_obj);

    for (var id in all_old_objects) {
        delete all_old_objects[id].__temp_id;
    }

    return new_obj;
    //

    function copy_obj(o) {
        var new_obj = {};
        if (o.__temp_id === undefined) {
            o.__temp_id = id_cnt;
            all_old_objects[id_cnt] = o;
            all_new_objects[id_cnt] = new_obj;
            id_cnt ++;

            for (var prop in o) {
                if (o[prop] instanceof Array) {
                    new_obj[prop] = copy_array(o[prop]);
                }
                else if (o[prop] instanceof Object) {
                    new_obj[prop] = copy_obj(o[prop]);
                }
                else if (prop === '__temp_id') {
                    continue;
                }
                else {
                    new_obj[prop] = o[prop];
                }
            }
        }
        else {
            new_obj = all_new_objects[o.__temp_id];
        }
        return new_obj;
    }
    function copy_array(a) {
        var new_array = [];
        if (a.__temp_id === undefined) {
            a.__temp_id = id_cnt;
            all_old_objects[id_cnt] = a;
            all_new_objects[id_cnt] = new_array;
            id_cnt ++;

            a.forEach((v,i) => {
                if (v instanceof Array) {
                    new_array[i] = copy_array(v);
                }
                else if (v instanceof Object) {
                    new_array[i] = copy_object(v);
                }
                else {
                    new_array[i] = v;
                }
            });
        }
        else {
            new_array = all_new_objects[a.__temp_id];
        }
        return new_array;
    }
}

চিয়ার্স @!

Question 11

এখানে ডিপক্লোন ফাংশন যা সমস্ত আদিম, অ্যারে, অবজেক্ট, ফাংশন ডেটা ধরণের পরিচালনা করে

function deepClone(obj){
	if(Array.isArray(obj)){
		var arr = [];
		for (var i = 0; i < obj.length; i++) {
			arr[i] = deepClone(obj[i]);
		}
		return arr;
	}

	if(typeof(obj) == "object"){
		var cloned = {};
		for(let key in obj){
			cloned[key] = deepClone(obj[key])
		}
		return cloned;	
	}
	return obj;
}

console.log( deepClone(1) )

console.log( deepClone('abc') )

console.log( deepClone([1,2]) )

console.log( deepClone({a: 'abc', b: 'def'}) )

console.log( deepClone({
  a: 'a',
  num: 123,
  func: function(){'hello'},
  arr: [[1,2,3,[4,5]], 'def'],
  obj: {
    one: {
      two: {
        three: 3
      }
    }
  }
}) )

স্নিপেট প্রসারিত করুন

Question 12

এখানে আমার গভীর অনুলিপি অ্যালগোরিদম।

const DeepClone = (obj) => {
     if(obj===null||typeof(obj)!=='object')return null;
    let newObj = { ...obj };

    for (let prop in obj) {
      if (
        typeof obj[prop] === "object" ||
        typeof obj[prop] === "function"
      ) {
        newObj[prop] = DeepClone(obj[prop]);
      }
    }

    return newObj;
  };