JavaScript ES6对象简写

ES5 写法
function obj(q,w,e,r,t,y){

    //es5
    let obj = {
        q:q,
        w:w,
        e:e,
        r:r,
        t:t,
        y:y,
        ho:function(){
            console.log('我是ho方法')
        }
    }

    return obj
}
console.log(obj(1,2,3,4,5,6));  //输出 { q: 1, w: 2, e: 3, r: 4, t: 5, y: 6, ho: [Function: ho] }

obj(1,2,3,4,5,6).ho(); //输出 我是ho方法

console.log(obj(1,2,3,4,5,6).q); //输出 1
ES6 写法
###### 应用场景 可以用在与后台对接接口的时候 后台需要对象形式的数据 我们只需要在传入参数的形参与后台的字段一样就可以愉快是减少了代码量
function obj(q,w,e,r,t,y){

    //es6
    let obj = {
        q,w,e,r,t,y,[q+y]:'p',ho(){
            console.log('我是ho方法')
        }
    }

    return obj
}
console.log(obj(1,2,3,4,5,6));  //输出 { q: 1, w: 2, e: 3, r: 4, t: 5, y: 6, ho: [Function: ho] }

obj(1,2,3,4,5,6).ho(); //输出 我是ho方法

console.log(obj(1,2,3,4,5,6).q); //输出 1

Object.assign()

Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

var target = { a: 1 }; 
var source1 = { b: 2 };
var source2 = { c: 3 };
 Object.assign(target, source1, source2); target // {a:1, b:2, c:3}
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
  1. Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

常见用途

class Point {
  constructor(x, y) {
    Object.assign(this, { x, y });
  }
}

let Max = (...num) => Math.max(...num);
let Min = (...num) => Math.min(...num);

let Nath = new Point(Max, Min);


console.log(Nath.x(1, 2, 3, 34)); // 34
console.log(Nath.y(1, 2, 3, 34)); //1

上面方法通过Object.assign方法,将x属性和y属性添加到Point类的对象实例。

为对象添加方法
let SomeClass = function () {};

 Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    return arguments;
  },
  anotherMethod() {
    return arguments;
  },
});
合并多个对象
const merge = (target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并

const merge = (...sources) => Object.assign({}, ...sources);
console.log(merge({ name: 1 }, { sex: 2 })); // { name: 1, sex: 2 }
为属性添加默认值的二种写法

,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

第一种写法

const ObjDefault = (options) => {
  const Default = { name: "默认呢称", sex: "保密" };
  return Object.assign({}, Default, options);
};
console.log(ObjDefault()); //{ name: '默认呢称', sex: '保密' }
console.log(ObjDefault({ name: "自信", sex: 99 })); //{ name: '自信', sex: 99 }

第二种写法 使用对象展开
先把默认值展开,再把后面的新值展开,这样才能覆盖旧的值,如果新值先展开,就不会覆盖掉

const ObjDefault = (options) => {
  const Default = { name: "默认呢称", sex: "保密" };
  return {...Default,...options};
};
console.log(ObjDefault()); //{ name: '默认呢称', sex: '保密' }
console.log(ObjDefault({ name: "自信", sex: 99 })); //{ name: '自信', sex: 99 }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值