摘要:如果只传入了一个参数,则该方法会直接返回该参数。如果传入的参数不是对象,原始类型会被包装为对象。和无法被转为对象,所以如果把它们两个作为目标对象则会报错。注意首先基本数据类型会被包装成对象,和会被忽略。后续的内容,敬请期待。
前言
过去的一个多月新接手了一个公司的老项目,在实现新需求的同时还需要对有些地方进行重构,故而导致了没时间更新文章。最近趁着周末更新一篇关于Object.assign使用的文章。
简介Object.assign()方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象,它将返回目标对象。这里有两点需要注意:1、该方法复制的是可枚举的属性的值,不可枚举的属性不会处理。2、它返回的是一个对象。
语法Object.assign(target,...sources)基本用法 合并对象
const target = { a: 1 } const source1 = { b: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) console.log(target) // {a: 1, b: 2, c: 3}
注意:如果目标对象与源对象的属性具有相同的键,或者多个源对象的属性具有相同的键,则后面对象的属性会覆盖前面对象的属性。
const target = { a: 1, b: 1 } const source1 = { b: 2, c: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) console.log(target) // {a: 1, b: 2, c: 3}
如果只传入了一个参数,则该方法会直接返回该参数。
const target = { a: 1 } Object.assign(target) console.log(target) // {a: 1} console.log(Object.assign(target) === target) // true
如果传入的参数不是对象,原始类型会被包装为对象。
const target = Object.assign(1) console.log(target) // Number {1} typeof target // "object"
null和undefined无法被转为对象,所以如果把它们两个作为目标对象则会报错。
const target = Object.assign(null) const tar = Object.assign(undefined) // Cannot convert undefined or null to object
如果null和undefined作为源对象,则不会报错,因为基本数据类型被包装,null和undefined会被忽略。
const target = Object.assign({a:1}, null) const tar = Object.assign({a:1}, undefined) // {a:1} const target1 = Object.assign(1, null) // Number {1}
如果null和undefined作为源对象中的属性值,则它们不会被忽略
const target = Object.assign({ a: 1 }, { b: null }, { c: undefined }) console.log(target) // {a: 1, b: null, c: undefined}拷贝
复制一个对象
const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1}
拷贝symbol类型的属性
const target = Object.assign({}, { a: 1 }, { [Symbol("foo")]: 2 }) console.log(target) // {a: 1, Symbol(foo): 2}
拷贝的属性是有限制的,继承属性和不可枚举属性无法被拷贝。
const obj = Object.defineProperty({}, "a", { enumerable: false, value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2}
现在把a属性变成可枚举的属性。
const obj = Object.defineProperty({}, "a", { enumerable: true, value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2, a: 1}
接下来再看看基本数据类型的可枚举性。
注意:首先基本数据类型会被包装成对象,null和undefined会被忽略。其次只有字符串的包装对象才可能有自身可枚举属性。
const v1 = "abc" const v2 = true const v3 = 10 const v4 = Symbol("foo") const target = Object.assign({}, v1, null, v2, undefined, v3, v4) console.log(target) // {0: "a", 1: "b", 2: "c"}
拷贝一个数组。该方法会把数组视为对象,同时在拷贝的时候通过位置来进行覆盖。
const target = Object.assign([1,2,3],[4,5]) console.log(target) // [4, 5, 3]深浅拷贝
Object.assgin()实现的是浅拷贝。如果源对象中的某个属性的值也是对象,那么目标对象拷贝得到的是这个对象的引用,一旦这个对象发生改变,那么拷贝后的目标对象也做相应的改变。
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}} obj1.b.c = 3 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":3}} console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":3}}
至于深浅拷贝的区别以及如何实现的问题,会在之后的文章中详细说明。
常见用途 为对象添加属性class Person { constructor(x, y) { Object.assign(this, {x, y}) } }为对象添加方法
Object.assign(someClass.prototype, { foo(x, y){ .... } })合并多个对象
Object.assign(target, ...sources)复制一个对象
const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1}为属性指定默认值
const DEFAULT_VALUE = { name: "Joe", age: "27" } function foo(options) { return Object.assign({}, DEFAULT_VALUE, options) }浏览器兼容性 最后
感谢各位能够耐心的读完,如有错误欢迎指正,让我们一起进步。后续的内容,敬请期待。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102912.html
showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等,行为和(===)基本一致。 在ES5中判断两个值是否相等,只能用(==)相等运算符和(===)严格相等运算符,但是这两货都有缺点,前者 两边的值都会转换数据类型,...
showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等,行为和(===)基本一致。 在ES5中判断两个值是否相等,只能用(==)相等运算符和(===)严格相等运算符,但是这两货都有缺点,前者 两边的值都...
摘要:循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组,包含对象自身的所有属性的键名。目前,只有对象方法的简写法可以让引擎确认,定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法 在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。...
摘要:属性的简洁表示法在中允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组,包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法 在ES6中 允许直接写入变量...
阅读 1903·2021-11-09 09:46
阅读 2486·2019-08-30 15:52
阅读 2445·2019-08-30 15:47
阅读 1319·2019-08-29 17:11
阅读 1745·2019-08-29 15:24
阅读 3500·2019-08-29 14:02
阅读 2441·2019-08-29 13:27
阅读 1198·2019-08-29 12:32