Apakah kegunaan tugasan dalam es6

Dalam ES6, tugasan digunakan untuk menggabungkan objek Ia boleh menyalin semua sifat terhitung objek sumber ke objek sasaran jika objek sasaran dan objek sumber mempunyai nama yang sama, atau objek berbilang sumber nama yang sama. , maka atribut kemudian akan menimpa atribut sebelumnya dan sintaksnya ialah "Object.assign(...)"

Persekitaran operasi bagi tutorial ini: sistem windows10, ECMAScript Versi 6.0, komputer Dell G3.

Apakah kegunaan tugasan dalam es6

Kaedah Object.assign digunakan untuk menggabungkan objek, menyalin semua atribut yang boleh dikira (kunci:nilai) objek sumber (sumber) ke Objek sasaran (sasaran)

Contohnya:

        const target = { a : 1 };
        const  source1 = { b: 2 };
        const  source2 = { c: 3 };
Object.assign(target,source1,source2)      // target { a:1, b:2, c:3 }

Nota: Jika objek sasaran dan objek sumber mempunyai atribut dengan nama yang sama, atau objek berbilang sumber mempunyai atribut yang sama nama, atribut kemudian akan menimpa sifat sebelumnya.

Contohnya:

    const target  = {a:1,b:1};
    const source1 = { b: 2,c:2};
    const source2 = {c:3};
 Object.assign(target,source1,source2); // target {a:1,b:2,c:3}

Jika hanya terdapat satu parameter, Object.assign akan terus mengembalikan parameter Jika parameter itu bukan objek, objek akan dipindahkan dahulu dan kemudian dikembalikan. Disebabkan null dan undefined Tidak boleh ditukar kepada objek, jadi ralat akan dilaporkan jika ia digunakan sebagai parameter. Jika parameter bukan objek muncul dalam kedudukan objek sumber (bermakna ia bukan parameter pertama), maka peraturan pemprosesan adalah berbeza. Pertama, parameter ini akan ditukar menjadi objek Jika null atau undefined muncul, selagi ia bukan parameter pertama, tiada ralat akan dilaporkan.

Contohnya:

   const obj = {a:1},
   Object.assign(obj)  === obj   // true   
   typeof  Object.assign(2)    // object
   Object.assign(undefined)  // 报错
   Object.assign(null)   // 报错
   Object.assign(obj,undefined)

Jenis nilai lain (iaitu nilai angka, rentetan dan nilai Boolean) tiada dalam parameter pertama dan tiada ralat akan dilaporkan, tetapi rentetan akan disalin dalam bentuk tatasusunan Masukkan objek sasaran, nilai lain tidak akan memberi kesan.

    const v1 = 'abc';
    const v2 = true;
    const v3 = 10;
    const objCurrent = Object.assign({},v1,v2,v3);  // {0:'a',1:'b',2:'c'}; 
    // 上面代码中,v1,v2,v3分别是字符串、布尔值、数值，结果只有字符串符合目标对象（以字符串数组的形式），数值与布尔值都会被忽略。这是因为只有字符串的包装对象，会产生枚举属性。
Object.assign()的深浅拷贝问题
    const obj1 = {a: 1};
    const obj2 = {b: 2};
    const obj3 = {c: 3};
    const obj = Object.assign(obj1,obj2,obj3);
    console.log(obj);   //  {a:1,b:2,c:3}
    console.log(obj1);   //   {a:1,b:2,c:3}  原始对象也被改变啦
    const v1 ={a:1},
    const currentObj = Object.assign(JSON.parse(JSON.stringify(v1)),{e:2})
    console.log(currentObj)  // {a:1,e:2}
    console.log(v1) // {a:1} 并没有发生变化

Apabila objek hanya mempunyai atribut peringkat pertama dan tiada atribut peringkat kedua, kaedah ini adalah salinan dalam Walau bagaimanapun, apabila terdapat objek dalam objek, kaedah ini adalah salinan cetek selepas atribut peringkat kedua.

Gunakan rekursi untuk melaksanakan salinan dalam

    // _deep 深度拷贝的方法
    function  _deep(source){
        let  target;
        if (typeof source === 'object'){
            // 判断目标值是数组还是对象
            target = Array.isArray(source) ? []: {}
            for (let key in source) {
                // 指示对象自身属性中是否含有指定的属性
                if(source.hasOwnProperty[key]){
                      // 如果属性不是对象则赋值，负责递归
                      if(typeof source[key] !== 'object'){
                            target[key] = source[key]
                      }else {
                            target[key] = _deep(source[key])
                      }
                }
            }
        } else {
           target = source
        }
        // 返回目标值
        return  target 
    }

Gunakan js untuk melaksanakan salinan dalam

    function _deepJs(_data){
        return JSON.parse(JSON.stringify(_data));
    }

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web】

Atas ialah kandungan terperinci Apakah kegunaan tugasan dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!