zoukankan      html  css  js  c++  java
  • ES6新增对象的assign方法

    assign:

      ES6拓展的assign是用于复制对象的,和jQuery、undescore中的extend方法类似

      使用方式:Object.assign(obj, obj1, obj2)

        obj: 被复制的目标对象 从第二个参数开始,都是复制的对象 返回值是目标对象obj

        注意:后面对象中的同名属性会覆盖前面对象中的属性

      assign方法实现的是一个浅复制

      •   浅复制:值类型是直接复制,而引用类型是改变指向,没有真正的复制
           
          
             

      •   深复制:值类型是直接复制,引用类型也是直接复制,并不是改变指向(函数除外)
          

      简单实现深复制: JSON.parse(JSON.stringify()),但是转换json字符串的时候,会过滤掉函数

      jQuery 中的 extend 方法第一个参数传递 true 的时候就是深复制,默认不写为false

     

      实现浅复制:

    Object.myAssign = function(target) {
            // 遍历arguments
            for (let i = 0; i < arguments.length; i++) {
                // 缓存arguments[i]
                let obj = arguments[i];
                // 使用for in
                for (let key in obj) {
                    target[key] = obj[key];
                }
            }
            // 返回target
            return target;
        }
        let result = Object.myAssign(obj, obj1, obj2);
        console.log(result);

      实现深复制:

    Object.myAssign = function(target) {
            // 遍历arguments
            for (let i = 0; i < arguments.length; i++) {
                // 缓存arguments[i]
                let obj = arguments[i];
                // 使用for in
                for (let key in obj) {
                    // 判断是否是数组
                    if (Array.isArray(obj[key])) {
                        // 递归处理
                        target[key] = Object.myAssign([], obj[key])
                    } else if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
                        // 判断是否是对象
                        target[key] = Object.myAssign({}, obj[key])
                    } else {
                        // 普通处理
                        target[key] = obj[key];
                    }
                }
            }
            // 返回target
            return target;
        }
        // 深复制
        let result = Object.myAssign(obj, obj1, obj2);
        obj.name = 'aaa';
        console.log(obj.name === obj1.name);
        // 只是改变指针
        obj.colors.push('pink');
        console.log(obj.colors === obj2.colors);
  • 相关阅读:
    呵呵,今天偶然看到了我最早期的商业网站作品
    轻量级的Ajax解决方案——DynAjax:直接在客户端调用C#类的方法
    RegexDesigner.NET 正则表达式开源工具
    Asp.net页面的生命周期之通俗理解
    我设计的公司网站主页 截图
    没想到裴勇俊留了一头长发。
    一个very好的Javascript ajax库,jQuery!
    JQuery资源收集
    收藏:悟透JavaScript
    VS2008 F5不能调试情况一例
  • 原文地址:https://www.cnblogs.com/yess/p/14695881.html
Copyright © 2011-2022 走看看