步遥——对象的扩展

对象的扩展

对象本身的数据结构的改变:
1:属性的简洁表示:允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简单

const foo = 'df'
const baz = {foo} //等同于{foo:foo}
baz // {foo: "df"}

2:方法也可以简写

const o = {
method(){return 'hello!'}   //等同于 method:function(){return 'hello!'}
}
o.method() // 'hello!'

3:属性名表达式
es5只有标识符定义属性,es6允许表达式做对象的属性名,即把表达式放在方括号内。

let propKey = 'foo'
let obj= {
[propKey]:true
}
obj  // {foo: true}

4:方法名也可以是表达式

let obj = {
  ['h' + 'eo']() {
    return 'hi';
  }};
obj.heo() // hi

如果属性名是对象,会被转为字符串[object Object]
对象的属性可以是字符串和symbol类型

5:对象方法的name属性
因为对象的方法名可以是字符串,symbol,方法也可以是get,set方法,所以name的值也有不同

普通的字符串,则返回对应的字符串
get,set方法的name需要在属性描述符的set,get属性上获取

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

symbol值的会返回symbol的描述

6:属性的可枚举和遍历
每个属性都可以通过Object.getOwnPropertyDescriptor获取到任意一个属性的可配置的属性:比如值,是否可枚举,是否可配置,是否可修改等

class的原型的方法都是不可枚举的,在循环时尽量不要使用for...in ,而使用Object.keys();

7:遍历属性的方法:

7.1:for...in // 循环遍历对象自身的和继承的可枚举属性,不含symbol
7.2:Object.keys() // 返回一个数组,包括对象自身的不含继承的所有可枚举属性的键名,不含symbol
7.3:Object.getOwnPropertyNames //返回一个数组,包含对象自身的所有属性不包含symbol,但是包含不可枚举属性的键名
7.4:Object.getOwnPropertySymbols // 返回一个数组,包含对象自身的所有symbol属性的键名
7.5:Reflect.ownKeys //返回一个数组,包含对象自身的不含继承的所有键名,不管键名是symbol或字符串,也不管是否可枚举。
遍历顺序:

  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列。

8:super关键字
指向当前对象的原型对象,并且只能用在对象的方法中。目前只有对象方法的简写法可以让js引擎确认,定义的是对象的方法:

let obj ={
foo:2
}

let obj1 ={
method(){  //对象方法的简写中可以使用super
return super.foo
}
}
obj1.method()//2

setPrototypeOf & getPrototypeOf 
Object.setPrototypeOf(obj,prototype) //将prototype设置为obj的原型
Object.getPrototypeOf(obj) // 返回obj的原型对象

8:对象的解构赋值:
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面

解构赋值要求等号右边是一个对象,undefined和null会报错
解构赋值必须是最后一个参数
解构赋值是浅拷贝
解构赋值不能复制继承自原型对象的属性

用处:扩展某个函数的参数,引入其他操作

9:扩展运算符
用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
扩展运算符后面不是对象,则会自动转为对象

扩展运算符后是数字,布尔,undefined,null,都会返回空对象

对象的扩展运算符等同于使用Object.assign()方法

let aClone = {...obj} //
let aClone1 = Object.assign({},obj)//同上只拷贝对象实例属性,像完整克隆一个对象,还拷贝对象原型的属性,可以采用下面的写法

const aClone2 = Object.assign(Object.create(Object.getPrototyOf(obj)),obj) // 将原型和对象合并

如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。 这用来修改现有对象部分的属性就很方便了,新的值会覆盖前面的属性
与数组的扩展运算符一样,对象的扩展运算符后面可以跟表达式

用处:合并对象

10:链判断运算符

const  firstName = message.body.user.firstName;

es5:
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

es6:
const firstName = message?.body?.user?.firstName || 'default';

判断方法是否存在并执行

iterator.return?.()
obj1.method?.() // 2
obj1.aaa?.() // undefined

链判断语法:
* obj?.prop // 对象属性
* obj?.[expr] // 同上
* func?.(...args) // 函数或对象方法的调用
判断数组是否有值

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

链判断特点:
短路机制
delete运算符,失败则不删除
如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响
链判断运算符的左侧不能是 super
链判断不能用来赋值
右侧不得为十进制数值

12:Null判断运算符 ??

左侧只有等于null或undefined的时候,才会返回右侧的值,如果为‘’ 或false的时候,还返回‘’或false

用处:
就是跟链判断运算符?.配合使用,为null或undefined的值设置默认值。

如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。

lhs && middle ?? rhs //报错
(lhs && middle) ?? rhs // 不报错,必须使用括号表明优先级
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容

  • 属性的简洁表示法 我们知道对象是由键值对组成的,在 ES6 中允许在对象的大括号内直接写入变量和函数,此时属性名是...
    暖A暖阅读 233评论 0 1
  • 一、属性的简介表示法 ES6允许直接写入变量和函数作为对象的属性和方法。允许在对象中只写属性名,不写属性值。这时,...
    了凡和纤风阅读 333评论 0 0
  • 1.什么是对象 对象是可以拥有属性和方法的集合。万物皆对象 == 万物皆可看作对象 2.ES6的扩展 (1)属性和...
    古灵精怪秦小刀阅读 503评论 0 0
  • 1. 属性的间接表示法 ES6 允许直接写入变量和函数 除属性外 方法也可以简写 2. 属性名表达式 ES6 允许...
    MrZhou_b216阅读 217评论 0 0
  • 渐变的面目拼图要我怎么拼? 我是疲乏了还是投降了? 不是不允许自己坠落, 我没有滴水不进的保护膜。 就是害怕变得面...
    闷热当乘凉阅读 4,227评论 0 13