Object.assign()

目录

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())深拷贝方法

你可能感兴趣的:(js语法及应用案例,javascript,前端)