ES6之对象的扩展(上)

2024年1月12日 126次阅读 来源: babe

狭义的对象字面量形式是JavaScript中我最喜欢的一种结构，因为其灵活。今天准备介绍ES6中对象的扩展相关的知识点，由于煲剧晚了，先写一半，剩下的下次再介绍。

主要知识点:

  • 对象属性的简写
  • 动态 · 属性名
  • Object.is(value1,value2)方法
  • Object.assign(target,source1,source2…)

1.对象属性的简写 — 设置对象属性时可省略冒号 ‘:’, 直接用一个变量代替

let user = 'babe';
let obj = {user};
obj // {user: "babe"}  
//-- 一开始用的时候觉得特别惊奇 转化成:{变量名:变量值} 记住变量名是静态(死)的(string)，值是动态(活)的

//想到应该怎么用了么?没错函数返回值的时候，返回多个数据时
//此时需要注意的是变量命名的时候要契合返回的属性名
function parseData(data){

    //假装有这么个函数 用于解析一个复杂的data 
    //最终解析出列数据、行数据、settings等

    let columns = fn(data);
    let rows = fn2(data);
    let settings = fn3(data);

    return {columns,rows,settings};
    // {columns,rows,settings} <-完全等同-> {columns:columns,rows:rows,settings:settings}
}

//另外一个集中导出的时候，也就是变量名与属性名完全一致的情况下可以简写
//一个公共包，都是一些处理方法，对方法进行导出
//util.ts
function toThousands(){}
function toTenThousandUnit(){}
function parseXml(){}
...

//在文件最后统一进行导出
export {
    toThousands,
    toTenThousandUnit,            
    parseXml
}
//阮老师的书上说了，方法也可以简写，这个没有什么特别的感觉
//直观感受就是增加了一种代码书写方式
let user = {
    name:'babe',
    hello(){
        console.log(this.name);
    }
}
//等价于:
let user = {
    name:'babe',
    hello:function(){
        console.log(this.name);
    }
}

2.动态 · 属性名 –意思就是说使用字面量方式定义对象时，对象属性可以是动态的

let key = 'user';
let obj = {
    [key]:'babe'  // [key] -- 这种方式确实很惊艳，对吧!
};
obj // {user: "babe"}


//这个也不仅限于属性名，对象中的方法名也是可以使用[变量名]的形式的
let obj = {
    username:'babe'
    ['get'+'username'](){
        return this.username;
    }
}
obj.getusername(); // babe

3.Object.is()

用于比较两个对象是否相等： 此方法是为了配合其余的扩展接口而设定的，应该说是元比较接口。如:Array.prototype.find()/findIndex()
(规则:NaN与NaN相等、+0与-0不相等、其余跟js的===操作符处理结果一致)

Object.is('babe','babe');
// true

Object.is(NaN,NaN);
// true

Object.is({a:1},{a:1});
// false

[19,NaN,23].findIndex(x => Object.is(NaN,x));
// 1

4.Object.assign(target,source1,source2…)

此方法用于将源对象source1、source2、…合并到target对象中，顺序为从右往左，属性不同的时候合并，相同时覆盖，从右往左依次覆盖与合并

//定义三个源数据
let source1 = {a:1};
let source2 = {a:2,b:{age:27}};
let source3 = {c:2};

let result = Object.assign({},source1,source2,source3);
result // {a: 2, b: {age:27}, c: 2}

//然而，我们修改source2的b属性的age的时候，result的b的age也会被改掉，也就是说值为引用类型的属性合并过来的只是引用地址。需要特别注意哦
source2.b.age = 26;
result // {a: 2, b: {age:26}, c: 2}

//Object.assign() 只传一个参数进去的时候，基本类型会转成对应的包装类型，引用类型原样返回
//null 和undefined就会报错(他俩难兄难弟，走哪都报错)
Object.assign('babe')
// String {"babe"}

Object.assign(10)
// Number {10}

Object.assign(true)
// Boolean {true}

Object.assign({})
// {}

Object.assign([])
// []

Object.assign(undefined)
// Uncaught TypeError: Cannot convert undefined or null to object
用途:
    i.一般用来拷贝对象，以防污染源数据 -- 这个很常用，因为大多时候数据就是一维的，浅拷贝也不碍事了
        let temp = Object.assign({},source);

    ii.合并多个对象，这个场景比较少
        let combineObj = Object.assign(source1,source2,...);

    //其实一个知识点有多少种用法都是假的，其实就是这个知识点的使用规则是什么，写逻辑的时候能想到这样写就可以了(不仅要考虑代码的简洁性、还要考虑性能哈)

对象的扩展前半段先写到这里了，如果bug请指正Thanks♪(･ω･)ﾉ!

    原文作者：babe
    原文地址: https://segmentfault.com/a/1190000014817971
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞