简介
Object.assign()是JavaScript中的一个内置方法用于一个或多个源对象属性复制到目标对象中
语法如下
Object.assign(target, ...sources);
其中:
- target: 必须, 目标对象, 既要将源对象的属性复制到的对象
- sources: 必须, 一个或多个源对象, 既要从中复制属性的对象
多个源对象可以通过逗号分隔或作为一个数组传递
该方法将返回目标对象, 其中包含源对象的属性, 如果目标对象中的属性与源对象的属性相同, 则源对象中的属性将覆盖到目标对象中的属性
使用
let p2 = {
name: '佐助',
age: 35,
skill:{
name:'横扫',
damage: 45
}
}
let p2_1 = Object.assign({},p2)
console.log('p2_1', p2_1); //{ name: '佐助', age: 35, skill: { name: '横扫', damage: 45 } }
console.log('p2_1 == p2', p2_1 == p2); // false
console.log('p2_1.skill == p2.skill', p2_1.skill == p2.skill); // true
需要注意的是
- 该方法只会复制源对象中的一层属性
- 方法会修改目标对象本身, 并将修改后的目标对象返回
- 这个方法可以赋值可遍历的对象的属性
let p2 = {
name: '佐助',
age: 35,
skill:{
name:'横扫',
damage: 45
}
}
let p3 = {
name: '女王',
skill: {
name: '打击',
}
}
// 只会复制源对象中的一层属性
let p2mix3 = Object.assign({},p2, p3)
console.log(p2mix3); //{ name: '女王', age: 35, skill: { name: '打击' } }
// 会对目标对象进行修改
Object.assign(p2, p3);
console.log('p2', p2); //p2 { name: '女王', age: 35, skill: { name: '打击' } }
console.log(Object.assign({name:'kaka'}, '卡卡西')); //{ '0': '卡', '1': '卡', '2': '西', name: 'kaka' }
方法的参数可以不为对象 (在实际应用中大概率是不会遇到)
- 假如目标参数与源参数都为字符串的话会报错, 虽然他们都是可遍历的, 但js中字符串是一个只读的(不可改变)
console.log(Object.assign(true,false,123,456,123)) // false
console.log(Object.assign(true,false,123,456,123, '发了寄快递'))//Boolean {true, 0: '发', 1: '了', 2: '寄', 3: '快', 4: '递'}
console.log(Object.assign('ka','kk')) //TypeError: Cannot assign to read only property '0' of object '[object String]'
使用js模拟实现Object.assign()方法
function assign_simulation(target, ...sources){
if(target == null){
throw new TypeError('Cannot convert undefined or null to object')
}
const to = Object(target) //将target转换成对象
for(let source of sources){
if(source != null){
for (let key in source){
if(Object.prototype.hasOwnProperty.call(source,key)){ //这里来判断这个属性是对象自身的,而不是原型链上的
to[key] = source[key] //将源对象身上的属性复制到目标对象上
}
}
}
}
return to; //返回目标对象
}
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const mergedObject = assign_simulation({},target, source);
console.log(mergedObject); // { a: 1, b: 3, c: 4 }