js lograr el objeto mezclado con el clon con la versión completa del código de análisis

Prefacio:

        Soy un blanco puro, hay muchos lugares que no entienda los grandes ganado tan bien, si es incorrecto, por favor señalar las grandes ganado tratado! hermano agradecido.

        Este artículo es analizar sus nativos JS escribió diagrama de efecto carrusel Taobao sin fisuras

el mixta

Página, los siguientes requisitos

var obj1 = {
    x: 1,
    y: "a"
}

var obj2 = {
    x: "b",
    o: 6
}

Hay dos objetos de la página
que queremos estos dos objetos se mezclan en una
estructura siguiente se forma:

// 将obj2混合到obj1中
obj = { 
    x: "b",
    y: "a",
    o: 6
    }

Código de referencia:

    /**
     *  ES5之前的版本
     * 对象的混合
     * @param {Object} obj1 
     * @param {Object} obj2 
     */
    function mixin(obj1, obj2){
        // 第一步: 创建一个对象
        var newObj = {};
        // 第二步: 循环obj2中的对象
        for(var prop in obj2){
            // 第三步: 将obj2中的属性添加到新创建爱对象中
            newObj[prop] = obj2[prop];
        }
        // 第四步: 循环obj1中的对象
        for(var prop in obj1){
            // 第五步: 看看obj1中的属性在不在obj2中，如果不在就将他加入的新的对象中
            if(!(prop in obj2)){
                newObj[prop] = obj1[prop];
            }
        }
        // 最后返回这个新的对象
        return newObj;
    }


    /**
     * ES6版本
     * 对象的混合
     * @param {Object} obj1 
     * @param {Object} obj2 
     */
    // function mixin(obj1, obj2){
    //     return Object.assgin({},obj1,obj2);
    // }
 
  

Llamar a la página

        var obj = mixin(obj1, obj2);
        console.log(obj);

  

clonación de objetos

Página, los siguientes requisitos

        var obj = {
            x: "123",
            y: 456,
            objSon: {
                c: "a"
            }
        }

        var newObj = clone(obj);
        //  要求实现newObj中有obj的所有属性
        //  并且newObj.objSon !== obj.objSon;

Echemos un vistazo al código

        function clone(obj) {
            var newObj = {};
            for (var prop in obj) {
                newObj[prop] = obj[prop];
            }
        }

Echemos un vistazo a los efectos

Si obj es un número lo que sucederá?
var obj = 123;

¿Por qué es un objeto?
Debido a que un objeto que creamos en la función
si obj es una cadena que? var obj = "abcdefg";

Si obj es una matriz entonces, ¿qué va a pasar?
var obj = [12,35,65,87,1,3];

Él es una matriz de clonado de la pseudo
y atributo de longitud tampoco

imagen

Dada la variedad de situaciones que aparece sobre
el código que acabamos de escribir (asumiendo que es sólo un asunto ordinario, no un objeto es una matriz, la matriz en sí es una cosa objeto) no es suficiente para completar una función de la copia completa
Por lo tanto, tenemos que juez

        function clone(obj) {
            if (Array.isArray(obj)) {  // 如果他是一个数组
                return obj.slice();    // 复制数组
            } else if (typeof obj === "object") {  // 如果他是一个普通对象
                var newObj = {};       // 定义一个对象
                for (var prop in obj) {  // 循环obj
                    newObj[prop] = obj[prop];  // 添加属性
                }
                return newObj;         // 返回
            } else {                   // 函数、原始类型
                return obj;            // 直接返回
            }
        }

NewObj de impresión en la página

Fotos juicio newObj === obj

Ahora mira a esta clonado más optimizado
, pero no se ha completado
si obj propiedad es también un objeto?

        var obj = {
            x: "123",
            y: 456,
            subObj: {
                a: "abc"
            }
        }

newObj en sí no es igual a obj porque clon Bueno, crea un nuevo objeto
de propiedad, pero subObj dirección de su interior es el mismo
si le damos newObj.subObj.a === "XXX"; la asignación.
El dirigirá: obj.subObj.a cambiar también.
Así presentamos nuestro escrito de esta manera se llama [clon sin profundidad]
También hay un clon llamado [la profundidad de la clonación] es hacer tratamiento profundo en su propiedad
por lo que esta función requiere un parámetro para determinar si se necesita la profundidad de la clonación

        function clone(obj, deep) {
            if (Array.isArray(obj)) {  // 如果他是一个数组
                return obj.slice();    // 复制数组
            } else if (typeof obj === "object") {  // 如果他是一个普通对象
                var newObj = {};       // 定义一个对象
                for (var prop in obj) {  // 循环obj
                    if (deep){
                        // 如果是深度克隆的话，我们把这个属性的值再克隆一遍【递归】
                        newObj[prop] = this.clone(obj[prop], deep);
                    }else {
                        newObj[prop] = obj[prop];  // 添加属性
                    }
                }
                return newObj;         // 返回
            } else {                   // 函数、原始类型
                return obj;            // 直接返回 【递归的终止条件】
            }
        }

        // 再传入第二个参数  
        var newObj = clone(obj, true);

Foto newObj. subObj '===

Para un arsenal de clonación la profundidad

        function clone(obj, deep) {
            if (Array.isArray(obj)) {  // 如果他是一个数组
            if(deep){  // 深度克隆
                var newArr = [];  //定义一个空数组
                for(var i = 0; i< obj.length; i++){ // 循环obj的每一项
                    newArr[i].push(clone(obj[i],deep)); // pun数组
                } 
            }else {
                return obj.slice();    // 复制数组
            }
                
            } else if (typeof obj === "object") {  // 如果他是一个普通对象
                var newObj = {};       // 定义一个对象
                for (var prop in obj) {  // 循环obj
                    if (deep){
                        // 如果是深度克隆的话，我们把这个属性的值再克隆一遍【递归】
                        newObj[prop] = this.clone(obj[prop], deep);
                    }else {
                        newObj[prop] = obj[prop];  // 添加属性
                    }
                }
                return newObj;         // 返回
            } else {                   // 函数、原始类型
                return obj;            // 直接返回 【递归的终止条件】
            }
        }

imagen

Esto completa el tema de la clonación