zoukankan      html  css  js  c++  java
  • Object.assgin基本用法

    含义:Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

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

    Object.assgin方法的第一个参数是目标对象,后面的参数都是源对象。

    注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

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

    如果只有一个参数,Object.assign会直接返回该参数。

    1 const obj = {a: 1};
    2 Object.assign(obj) === obj // true

    由于undefined和null 无法转成对象,所以如果她们作为参数,就会报错。

    Object.assign(undefined) // 报错
    Object.assign(null) // 报错

    如果非对象参数出现在源对象的位置(即数值、字符串、布尔值)不在首参数,也不会报错。

    但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

    1 const v1 = 'abc';
    2 const v2 = true;
    3 const v3 = 10;
    4 
    5 const obj = Object.assign({}, v1, v2, v3);
    6 console.log(obj); // { "0": "a", "1": "b", "2": "c" }

    上面代码中,v1、v2、v3分别是字符串、布尔值、和数值,结果只有字符串入目标对象(以字符数组的形式),

    数值和布尔值都会被忽略、这是因为只有字符串的包装对象,会产生可枚举属性

    1 Object(true) // {[[PrimitiveValue]]: true}
    2 Object(10)  //  {[[PrimitiveValue]]: 10}
    3 Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

    上面代码中,布尔值、数值、字符串分别转成对应的包装对象,可以看到他们的原始值都在包装对象的内部属性

    [[PrimitiveValue]] 上面,这个属性是不会被Object.assign拷贝的。只有字符串的包装对象,会产生可枚举的实义属性

    ,那些属性则会被拷贝

    Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false

    1 Object.assign({b: 'c'},
    2   Object.defineProperty({}, 'invisible', {
    3     enumerable: false,
    4     value: 'hello'
    5   })
    6 )
    7 // { b: 'c' }

    上面代码中,Object.assign要拷贝的对象只有一个不可枚举属性invisible,这个属性并没有被拷贝进去

    属性名为Symbol值的属性,也会被Object.assign拷贝。

    1 Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
    2 // { a: 'b', Symbol(c): 'd' }

    以下需要特别注意

    浅拷贝

    object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,

    那么目标对象拷贝得到的是这个对象的引用。

    1 const obj1 = {a: {b: 1}};
    2 const obj2 = Object.assign({}, obj1);
    3 
    4 obj1.a.b = 2;
    5 obj2.a.b // 2

    上面代码中,源对象obj1的a属性的值是一个对象,Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

    同名属性的替换

    对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

    1 const target = { a: { b: 'c', d: 'e' } }
    2 const source = { a: { b: 'hello' } }
    3 Object.assign(target, source)
    4 // { a: { b: 'hello' } }

    上面代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的,需要特别小心。

    一些函数库提供 Object.assign的定制版本(比如 Lodash 的_.defaultsDeep方法),可以得到深拷贝的合并。

    数组的处理

    object.assign可以用来处理数组,但是会把数组视为对象。

    1 Object.assign([1, 2, 3], [4, 5])
    2 // [4, 5, 3]

    常见用途

    为对象添加属性

    1 class Point {
    2   constructor(x, y) {
    3     Object.assign(this, {x, y});
    4   }
    5 }

    上面方法通过Object.assign方法,将x属性和y属性添加到Point类的对象实例

    为对象添加方法

     1 Object.assign(SomeClass.prototype, {
     2   someMethod(arg1, arg2) {
     3     ···
     4   },
     5   anotherMethod() {
     6     ···
     7   }
     8 });
     9 
    10 // 等同于下面的写法
    11 SomeClass.prototype.someMethod = function (arg1, arg2) {
    12   ···
    13 };
    14 SomeClass.prototype.anotherMethod = function () {
    15   ···
    16 };

    上面代码使用了对象属性的简洁表示法,直接将两个函数放在大括号中,再使用assign方法添加到SomeClass.prototype之中。

    合并多个对象

    将多个对象合并到某个对象

    1 const merge = (target, ...sources) => Object.assign(target, ...sources);

    如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

    1 const merge = (...sources) => Object.assign({}, ...sources);

    为属性指定默认值

     1 const DEFAULTS = {
     2   logLevel: 0,
     3   outputFormat: 'html'
     4 };
     5 
     6 function processContent(options) {
     7   options = Object.assign({}, DEFAULTS, options);
     8   console.log(options);
     9   // ...
    10 }

    上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTSoptions合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。

    注意,由于存在浅拷贝的问题,DEFAULTS对象和options对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,DEFAULTS对象的该属性很可能不起作用

  • 相关阅读:
    Digital Video Stabilization and Rolling Shutter Correction using Gyroscope 论文笔记
    Distortion-Free Wide-Angle Portraits on Camera Phones 论文笔记
    Panorama Stitching on Mobile
    Natural Image Stitching with the Global Similarity Prior 论文笔记 (三)
    Natural Image Stitching with the Global Similarity Prior 论文笔记(二)
    Natural Image Stitching with the Global Similarity Prior 论文笔记(一)
    ADCensus Stereo Matching 笔记
    Efficient Large-Scale Stereo Matching论文解析
    Setting up caffe on Ubuntu
    Kubernetes配置Secret访问Harbor私有镜像仓库
  • 原文地址:https://www.cnblogs.com/0428mm/p/15401361.html
Copyright © 2011-2022 走看看