目录
1、Object.assign()是什么?
2、Object.assign()用法:
3、Object.assign()用法示例:
3.1 目标对象和源对象无重名属性 : 直接合并
3.2 目标对象和源对象有重名属性 : 后面的覆盖前面的
3.3 有多个源对象: 源对象往target上合并,同时遇到属性相同,后者覆盖前者
3.4 Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上,继承属性和不可枚举属性是不能拷贝的:布尔值和数值属性都是不可枚举的
3.5 碰到...拓展运算符
4、注意事项:
1、Object.assign()是什么?
ES6文档:Object.assign() 用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象(target)。
Object.assign()是对象的静态方法,主要用于对象合并。Object.assign()拷贝是浅拷贝,它拷贝的是属性值
2、Object.assign()用法:
Object.assign(target, ...sources) // 参数:target--->目标对象 // source--->源对象 // 返回值:target,目标对象
3、Object.assign()用法示例:
3.1 目标对象和源对象无重名属性 : 直接合并
var target = {name:'xx', age:20} var source = {class: '3班'} var result = Object.assign(target,source) console.log(result); // {name: 'xx', age: 20, class: '3班'} console.log(target); // {name: 'xx', age: 20, class: '3班'} console.log(source); // {name: 'xx', age: 20, class: '3班'} console.log(target===result); // true // 如果只想把多个属性合并一起,不想改变原来对象属性,用一个空对象作为target对象 var target = {name:'xx', age:20} var source = {class: '3班'} var result = Object.assign({}, target,source) console.log(result); // {name: 'xx', age: 20, class: '3班'} console.log(target); // {name:'xx', age:20} console.log(source); // {class: '3班'} console.log(target===result); // false
3.2 目标对象和源对象有重名属性 : 后面的覆盖前面的
var target = {name:'xx', age:20} var source = {class: '3班', age:23} var result = Object.assign(target,source) console.log(result); // {name: 'xx', age: 23, class: '3班'} console.log(target); // {name: 'xx', age: 23, class: '3班'} console.log(source); // {name: 'xx', age: 23, class: '3班'} console.log(target===result); // true // 如果只想把多个属性合并一起,不想改变原来对象属性,用一个空对象作为target对象 var target = {name:'xx', age:20} var source = {class: '3班', age:23} var result = Object.assign({}, target,source) console.log(result); // {name: 'xx', age: 23, class: '3班'} console.log(target); // {name:'xx', age:20} console.log(source); // {class: '3班', age:23} console.log(target===result); // false
3.3 有多个源对象: 源对象往target上合并,同时遇到属性相同,后者覆盖前者
var target = {name:'xx', age:20} var source = {class: '3班', age:23} var sou = {friend: 'yy', sport: 'running'} var result = Object.assign(target, source, sou) console.log(result); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'} console.log(target); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'} console.log(source); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'} console.log(target===result); // true var target = {name:'xx', age:20} var source = {class: '3班', age:23} var sou = {friend: 'yy', class: '4班'} var result = Object.assign(target, source, sou) console.log(result); // {name: 'xx', age: 23, class: '4班', friend: 'yy'} console.log(target); // {name: 'xx', age: 23, class: '4班', friend: 'yy'} console.log(source); // {name: 'xx', age: 23, class: '4班', friend: 'yy'} console.log(target===result); // true
3.4 Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上,继承属性和不可枚举属性是不能拷贝的:布尔值和数值属性都是不可枚举的
var s = "abc"; var so = true; var sou = 10; var result = Object.assign({}, s, so, sou) console.log(result); // {0: 'a', 1: 'b', 2: 'c'} console.log(s); // 'abc' console.log(so); // true console.log(so); // 10 var s = "abc"; var so = true; var sou = 10; var result = Object.assign(s, so, sou) console.log(result); // {'abc'} console.log(s); // 'abc' console.log(so); // true console.log(so); // 10
3.5 碰到...拓展运算符
let obj ={ a:1, b:2, } let obj2={ c:3, a:4, b:5, } let obj3={ ...obj, // 后面的合并前面的 c:3, a:4, b:5 } console.log(obj3);//{ a: 4, b: 5, c: 3 } let obj4={ c:3, a:4, b:5, ...obj // 后面的合并前面的 } console.log(obj4);//{ c: 3, a: 1, b: 2 } console.log(obj2 === obj)//false
4、注意事项:
4.1 目前IE浏览器不兼容Object.assign()
4.2 异常会终止拷贝
4.3 Object.assign()拷贝是浅拷贝,它拷贝的是属性值,假如源对象的属性值是一个对象 obj,那么拷贝的则是这个对象值的指针(也就是地址);这个时候修改obj 的值,则目标对象会受到影响。
var tar = {a:1, b: {c:2}} var sou = {d:3} var result = Object.assign(sou, tar) console.log(result); // {d:3,a:1, b: {c:2}} tar.b.c = 4 console.log(result); // {d:3,a:1, b: {c:4}} var tar = {a:1, b: {c:2}} var sou = {d:3} var result = Object.assign(sou, JSON.parse(JSON.stringify(tar))) console.log(result); // {d:3,a:1, b: {c:2}} tar.b.c = 4 console.log(result); // {d:3,a:1, b: {c:2}} // JSON.parse(JSON.stringify())深拷贝方法