狭义的对象字面量形式是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♪(・ω・)ノ!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。