html assign无效,Object.assign的一些用法

Object.assign的一些用法

2020/11/12 20:19:03　　字体：大 中 小　浏览 1289　我要评论

需要定制网站程序、公众号程序、微信小程序可以联系：565449214或者加微信13961347334(备注：需要技术)

或者在处理一些技术问题时，有什么不懂的地方，随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论

用法1：替换数组的值

let a = [1,2,3],b = [4,5]

console.log( Object.assign(a,b)); // 后面的值覆盖前面的值,[4,5,3]

用法2：为对象添加属性

下面是es5的写法：this.xxx =xxx

//    es5的写法

class Test{

constructor(x,y){

this.x =x

this.y = y

}

sum(){

return this.x +　this.y

}

}

let t = new Test(1,2)

console.log(t.sum());

用Object.assign的写法

// Object.assign的写法

class Test2{

constructor(x,y){

Object.assign(this,{x,y})

}

sum2(){

return this.x + this.y

}

}

let t2 = new Test2(1,2)

console.log(t2.sum2());

用法3 深度克隆对象

//    用法3 深度克隆对象

let clone = (orignObj) => {

let originProto = Object.getPrototypeOf(orignObj)

return Object.assign(Object.create(originProto), orignObj)

}

let obj3 = { name: 'zs', age: 12 }

console.log(clone(obj3));

用法4：合并对象属性

下面这种写法，合并后，原来的两个对象都已经改变

// example1

let obj = {name:'zs'} ,obj2 = {name:'zs',age:12}

let merge = (target, ...v) => Object.assign(target, ...v)

console.log(merge(obj,obj2));// {name:'zs',age:12}

console.log(obj,obj2); // 合并后，两个对象都已经改变，值都是 {name:'zs',age:12}

如果不想改变原来的对象，可以用下面这个写法

// example2 合并后，返回一个新对象，不更改原有对象的属性

let merge2 = (...v) => Object.assign({}, ...v)

console.log(merge2(obj, obj2));// {name:'zs',age:12}

console.log(obj); //  原来的对象保持原样  {name:'zs'}

console.log(obj2); //  原来的对象保持原样  {name:'zs',age:12}

//合并对象，还可以用展开操作符

let obj5 = {name:'zs'},obj6 = {age:12}

let newOjb = {...obj5,...obj6}

console.log(newOjb);

用法5.为默认对象新增属性

const DEFAULTS = { name: 'zs', age: 13 } // 默认对象

let createObjWithDefault = (opt) => Object.assign({}, DEFAULTS, opt)

console.log(createObjWithDefault({ 'addr': 'gz' }));

正在加载评论……

呢 称：

表 情：

内 容：

评论内容：不能超过 1000 字，需审核，请自觉遵守互联网相关政策法规。

验证码：

深山工作室网友评论声明，请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款：

一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家、社会、集体和公民的合法权益；

二、不得发布国家法律、法规明令禁止的内容；互相尊重，对自己在本站的言论和行为负责；

三、本站对您所发布内容拥有处置权。