Vue中Object.assign()的使用详解

news/2024/7/10 3:02:42 标签: object.assign, vue

  • 1.Object.assign()对象的拷贝
  • 2.Object.assign()对象的深拷贝
  • 3.对象的合并
  • 4.合并具有相同属性的对象
  • 5.继承属性和不可枚举属性是不能拷贝的
  • 6. 原始类型会被包装为对象
  • 7.异常打断后续拷贝任务

1.Object.assign()对象的拷贝

Object.assign()
用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, …sources) 【target:目标对象】,【souce:源对象(可多个)】
举个栗子:

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

注意:
1.如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
2.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标
对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如
果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到
原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

2.Object.assign()对象的深拷贝

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
最后一次赋值的时候,b是值是对象的引用,只要修改任意一个,其他的也会受影响

// Deep Clone (深拷贝)
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1)); 
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

3.对象的合并

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
其实就是对象的拷贝,o1就是目标对象,后面的是源对象,后面的属性等会拷贝到目标对象

4.合并具有相同属性的对象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.属性被后续参数中具有相同属性的其他对象覆盖。
2.目标对象的属性与源对象的属性相同,源的会覆盖目标的属性

5.继承属性和不可枚举属性是不能拷贝的

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

6. 原始类型会被包装为对象

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装,null 和 undefined 会被忽略。
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

7.异常打断后续拷贝任务

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,第三个源对象更是不会被拷贝到的。

http://www.niftyadmin.cn/n/1728617.html

相关文章

vue中等号“=”赋值和Object.assign()拷贝的区别

总结: 目标对象源对象 1. 相当于引用,“你变我也变” Object.assign() 1.当源对象中属性是对象时, “属性:你变我不变,属性对象中的值:你变我也变” 2.当源对象中属性不是对象时,“你变我不变” JSON.pars…

自适应滤波器_自适应噪声对消系统——不知道应用到耳机是什么效果

在信号与系统视频上看到这样一个系统。该系统存在两个输入:原始输入和参考输入。原始输入为受噪声污染的信号,x(n)s(n)v0(n),参考输入为噪声源v1(n)。当噪声成分v0(n)与信号s(n)不相关、与噪声源v1(n)相关时,自适应滤波器AF(Adaptive Filter)…

vue节点中的ref属性

<!-- ref 属性 被用来给元素或子组件注册引用信息&#xff0c;引用信息将会注册在父组件的$refs对象上&#xff0c;如果在普通的dom元素上使用&#xff0c;引用指向的就是dom元素&#xff1b;如果用在子组件上&#xff0c;引用就指向组件实例重要说明&#xff1a;ref本身是作…

需要额外端口信息_实战:浅谈信息搜集中的自动化数据分析

文&#xff5c;腾讯安全平台部 彦修一、WHAT现今很多信息搜集类工具或者文章基本停留在信息搜集的前期阶段&#xff0c;很多文章或者工具都在着重于拓宽信息搜集的渠道&#xff0c;从搜索引擎、被动DNS到爆破字典的丰富性等等&#xff0c;少有提到在获得这些信息之后是否需要处…

lambda List去重

1、结果 public class Test4 {public static void main(String[] args) {List<Integer> list Lists.newArrayList();list.add(1);list.add(2);list.add(3);list.add(3);list.add(1);list.add(1);list list.stream().distinct().collect(Collectors.toList());list.str…

JSONArray转成List集合,List转成JSONArray

引入jar <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.75</version> </dependency> JSONArray转成List集合 List<PfCms> cmsList JSONArray.parseArray(jsonArray,…

vuecli4浏览器控制台source没有源码显示,解决办法

在项目中vue.config.js文件中配置 productionSourceMap: true就可看到源码

python核心语法练习题_《python核心教程2》第六章 练习

6–3.排序(a) 输入一串数字,从大到小排列之.(b) 跟 a 一样,不过要用字典序从大到小排列1 nums []2 numbers input(‘输入数字:‘)3 for i innumbers:4 nums.append(int(i))5 print(sorted(nums))6–4.算术. 更新上一章里面你的得分测试练习方案,把测试得分放到一个列表中去.你…