zoukankan      html  css  js  c++  java
  • Object.assign()

    Object.assign()属于ES6的语法,可以合并多个object,它可以接受多个对象,第一个是合并的目标对象,后边都是被合并的对象,如果在这个过程中出现同名的属性,后边的将会覆盖前边的同名属性:

    var target  = {a: 1}; //目标对象  
    var source1 = {b: 2}; //源对象
    var source2 = {c: 3}; //源对象
    var source3 = {c: 4}; //源对象
    Object.assign(target,source1,source2,source3);  
    //结果:{a: 1, b: 2, c: 4}  

    参数里目标对象如果不是对象的话,它会在内部转换为对象,如果碰到了null或undefined这种不能转换成对象的值的话,assign就会报错。

    参数里源对象无法转换为对象的话,会忽略这个源对象参数。

    assign不会合并不可枚举的属性,也不会拷贝继承属性:

    const v1 = 'abc';  
    const v2 = true;  
    const v3 = 10;  
      
    const obj = Object.assign({}, v1, v2, v3);   // { "0": "a", "1": "b", "2": "c" }  

    以上例子中第一个参数'abc'转换为对象后为{ "0": "a", "1": "b", "2": "c" }  ,v2和v3是不可枚举的,所以没有被合并进去。

    如果参数是数组,类型转换会将数组成员作为对象的值,将数组成员在数组中的位置作为对象的键:

    Object.assign([1, 2, 3], [4, 5]);  // [4, 5, 3]  

    上面例子中,[1, 2, 3]转为类似于{0: '1', 1: '2', 2: '3'}的对象,[4, 5]转为类似于{0: '4', 1: '5'}的对象,所以数组中的1和2被4和5覆盖了。

    assign只能将属性值进行复制,如果属性值是一个get(取值函数)的话,那么会先求值在复制。

    const source = {  
       get foo(){return 1}   //取值函数  
    };  
    const target = {};  
    
    Object.assign(target,source);  //{foo: 1}  此时foo的值是get函数的求值结果  

    assign合并对象,第一级属性深拷贝,以后级别属性浅拷贝:

    浅拷贝:
    let s ={name: {asd: '123'}} let d = Object.assign({}, s) d.name.asd = '123456789' console.log(d, s) // {name:{asd: "123456789"}} // {name:{asd: "123456789"}}
    深拷贝:
    let o ={name: {asd: '123'}} let p = Object.assign({}, o) p.name = '123456789' console.log(p, o) // {name: "123456789"} // {name: {asd: "123"}}
  • 相关阅读:
    NO.05--谈一谈Angular 和 Vue.js 的对比。
    NO.04--我的使用心得之使用vue绑定class名
    No.03---Vue学习之路之模块化组织
    NO.02---聊聊Vue提升
    NO.01---今天聊聊Vuex的简单入门
    hello word!------为什么开通博客以及自我介绍
    JavaScript 常用正则示例
    Newtonsoft.Json(Json.Net)学习笔记
    aspx后台传递Json到前台的两种接收方法
    MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子
  • 原文地址:https://www.cnblogs.com/xjy20170907/p/11213035.html
Copyright © 2011-2022 走看看