Js使用Object.assign()对象的复制、合并、封装等操作

时间: 2018-01-02阅读: 5077标签: 复制

OObject.assign()方法可将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象。 其中对象的继承属性和不可枚举属性是不能拷贝的。


对象的复制

var obj= { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); //{ a: 1 }

说明:assign复制的是属性值,不能复制源对象中具有引用其它对象的属性值,所以不能使用它来实现深拷贝。实现深拷贝请参考:js中深拷贝和浅拷贝的区别及原理

在官方文档中写得一个Polyfill ,代码加了点注释如下:

if (!Object.assign) {
    // 定义assign方法
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) { // assign方法的第一个参数
      'use strict';
      // 第一个参数为空,则抛错
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      // 遍历剩余所有参数
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        // 参数为空,则跳过,继续下一个
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        // 获取改参数的所有key值,并遍历
        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          // 如果不为空且可枚举,则直接浅拷贝赋值
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

从上面代码可以看出Object.assign()只对顶层属性做了赋值,没有继续做递归把所有下一层的属性做深拷贝。


对象的合并和封装

var obj1 = { a: 1,};
var obj2 = { b: 2, c: 2 };
var obj3 = { c: 3 };
var obj = Object.assign({}, obj1, obj2, obj3,null,undefined,"abc",{[Symbol("sbl")]:4});
console.log(obj); //输出{0: "a", 1: "b", 2: "c", a: 1, b: 2, c: 3}
VM1253:5 {0: "a", 1: "b", 2: "c", a: 1, b: 2, c: 3, Symbol(sbl): 4}

说明:1.对象的属性被后续参数中具有相同属性的其他对象覆盖;2.null、undefined会被忽略;3.字符串会被封装成单字符的可枚举属性数组。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/299

原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)

在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。纯js实现复制文本并提示复制成功(干货)适用所有浏览器

Vue中结合clipboard实现复制功能

首先现在Vue中引入clipboard,在需要使用的组件中import 引入clipboard.不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象

程序员_代码神注释鉴赏大全(可复制粘贴)

程序员个性注释,让你的代码飞起来。一时兴起就收集了以下神注释,希望能为广大ITer带来快乐,以下是收集了以下神注释,希望能为广大程序员们带来快乐,缓解你们工作中的压力

网页不让用户复制方法总汇,设置html禁止选择,保护源码,js禁止复制文字

这篇文章主要讲解:右键复制失效方法、菜单-文件-另存为-失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果

原生Js实现复制(Copy)的方法总结,execCommand和clipboardData的使用

原生Js实现复制(Copy)的两种方法,一种是利用 clipboardData,另外一种则是用 execCommand(),今天将统一讲解一下关于他们的使用方法。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全