• 技术文章 >web前端 >前端问答

    object.assign()怎么用

    青灯夜游青灯夜游2023-01-06 16:34:50原创302

    object.assign()方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象;语法“Object.assign(target, ...sources)”,参数“target”是指目标对象,即接收源对象属性的对象,也是修改后的返回值,参数“sources”是指源对象,包含将被合并的属性。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    Object.assign() 的用法

    该方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象。

    Object.assign(target, ...sources)

    target:目标对象,接收源对象属性的对象,也是修改后的返回值。

    sources:源对象,包含将被合并的属性。

    一、对象的拷贝

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

    注意:
    1、源对象属性与目标对象属性不同,则会被拷贝到目标对象中;
    2、如果目标对象和源对象有相同的属性,目标对象的属性值会被源对象的属性值覆盖掉;
    3、如果有多个源对象有相同的属性,那么目标对象的属性将会被最后一个源对象属性覆盖。

    二、继承属性和不可枚举属性不能拷贝

    const obj1 = Object.create({foo: 1}, { // foo 是个继承属性。
        bar: {
            value: 2  // bar 是个不可枚举属性。
        },
        baz: {
            value: 3,
            enumerable: true  // baz 是个自身可枚举属性。
        }
    });
    const obj= Object.assign({}, obj1);
    console.log(obj); // { baz: 3 }
    //创建对象时,如果没有设置enumerable的值,默认为false(不可枚举属性),设置为true,则为可枚举属性

    注意:Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象,继承的和不可枚举的属性不会拷贝。

    三、对象的深拷贝

    Object.assign()拷贝是浅拷贝,它拷贝的是属性值,假如源对象的属性值是一个对象 obj,那么拷贝的则是这个对象值的指针(也就是地址);这个时候修改obj 的值,则目标对象会受到影响。
    想要避免这种影响我们需要对对象进行深拷贝:

    let obj1 = { a: 1, b: {c: 2 }};
    let obj2 = { d: 2 };
    let obj = Object.assign(obj2,JSON.parse(JSON.stringify(obj1)));
    console.log(obj); // { d: 2, a:1, b:{ c:2 }}
    obj1.b.c = 4;
    console.log(obj); // { d: 2, a:1, b:{ c:2 }}
    // 对象obj1.b.c 值的变化则不会再影响到目标对象 obj 的值。

    注意:深拷贝只能解决引用类型的值拷贝,对于继承和不可枚举属性依然不可以拷贝。

    四、异常会终止拷贝

    const target = Object.defineProperty({}, "foo", {
        value: 1,
        writable: false
    }); // target 的 foo 属性是个只读属性。
    
    Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
    // TypeError: "foo" is read-only
    // 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。
    console.log(target.bar);  // 2,说明第一个源对象拷贝成功了。
    console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。
    console.log(target.foo);  // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
    console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
    console.log(target.baz);  // undefined,第三个源对象更是不会被拷贝到的。

    五、原始类型将会被包装成对象

    原始类型会被包装,null 和 undefined 会被忽略。

    const obj1 = 'aaa';
    const obj2 = false;
    const obj3 = true;
    const obj4 = 10;
    const obj= Object.assign(obj1,obj2,obj3,obj4);
    console.log(obj); // { 0:'a', 1:'a', 2:'a'}

    注意:只有字符串的包装对象才可能有自身可枚举属性。

    【推荐学习:javascript视频教程

    以上就是object.assign()怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript
    上一篇:react 怎么实现删除功能 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 浅析JavaScript中的程序控制流和函数• JavaScript进阶学习之初识类、函数进阶、如何改变this指向• JavaScript中的回调函数详细解析• javascript如何将字符串转为数组• 一文搞懂JavaScript中的this指向问题• JavaScript计算属性与监视(侦听)属性的使用
    1/1

    PHP中文网