对象的扩展

文章目录

  • 对象的扩展
    • 属性的简洁表示法
    • 属性名表达式
    • 方法的name属性
    • 属性的可枚举性和遍历
      • 可枚举性
      • 属性的遍历
    • super关键字
    • 对象的扩展运算符
      • 解构赋值
      • 扩展运算符
    • AggregateError错误对象

对象的扩展

属性的简洁表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

function f(x, y) {
  return {x, y};
}
f(1, 2) // Object {x: 1, y: 2}

除了属性,方法也可以简写。

const o = {
  method() {
    return "Hello!";
  }
};

简洁写法在打印对象时也很有用。

let user = {
  name: 'test'
};

let foo = {
  bar: 'baz'
};
console.log({user, foo})
// {user: {name: "test"}, foo: {bar: "baz"}}

注意,简写的对象方法不能用作构造函数,会报错。

const obj = {
  f() {
    this.foo = 'bar';
  }
};

new obj.f() // 报错

上面代码中,f是一个简写的对象方法,所以obj.f不能当作构造函数使用。

属性名表达式

ES6之前使用字面量方式定义对象(大括号),只能用如下方法。

var obj = {
  foo: true,
  abc: 123
};

但是定义对象的属性有两种方法。

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

ES6允许字面量定义对象时使用方法二作为对象的属性名。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

表达式还可以用于定义方法名。

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

注意,属性名表达式与简洁表示法,不能同时使用,会报错。

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

上面代码中,[keyA][keyB]得到的都是[object Object],所以[keyB]会把[keyA]覆盖掉,而myObject最后只有一个[object Object]属性。

方法的name属性

函数的name属性,返回函数名。对象方法也是函数,因此也有name的属性。
如果对象的方法使用了取值函数(getter)和存值函数(setter),则name属性不是在该方法上面,而是该方法的属性的描述对象的getset属性上面,返回值是方法名前加上getset

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"

有两种特殊情况:bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous

(new Function()).name // "anonymous"

var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""

上面代码中,key1对应的 Symbol 值有描述,key2没有。

属性的可枚举性和遍历

可枚举性

Object.getOwnPropertyDescriptor可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

enumerable为可枚举性,如果该属性为false,就表示某些操作会忽略当前属性。
目前,有四个操作会忽略enumerablefalse属性。

  • for...in循环:只遍历对象自身的和继承的可枚举的属性。
  • Object.keys():返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify():只串行化对象自身的可枚举的属性。
  • Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。
    前三个是ES5就有的,最后一个Object.assign()是ES6新增的。只有for...in会返回继承的属性,其他三个都会忽略继承属性。
    实际上,引入“可枚举”(enumerable)这个属性的最初目的,就是让某些属性可以规避掉for...in操作,不然所以内部属性和方法都会被遍历到。比如,对象原型的toString()方法,以及数组里的length属性,就通过“可枚举性”,从而避免被for...in遍历到。
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面代码中,因为这俩属性都是false,因此for...in不会遍历到这两个继承自原型的属性。
另外,ES6规定,所有Class的原型的方法都是不可枚举的。

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

总的来说,操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in循环,而用Object.keys()代替。

属性的遍历

  1. for…in
    循环遍历对象自身和继承的可枚举属性,不含Symbol属性。
  2. Object.keys(Obj)
    返回数组,包括对象自身的不含继承的所有可枚举属性,不含Symbol属性的键名。
  3. Object.getOwnPropertyNames(obj)
    返回一个数组,包含对象自身的所有属性,不含Symbol属性,但是包括不可枚举属性的键名。
  4. Object.getOwnPropertySymbols(obj)
    返回一个数组,包含对象自身的所有Symbol属性的键名。
  5. Reflect.ownKeys(obj)
    返回一个数组,包含对象自身的,不含继承的所有键名。不管是否Symbol,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

  1. 遍历所有数值键,按数值升序排列。
  2. 遍历所有字符串键,按加入时间升序排序。
  3. 遍历所有Symbol键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

个人PS
在实际应用中,如果后台返回数据为对象(非数组),如{2021: {id: 1}, 2019: {id: 2}, 2020: {id: 3}},而此时我们需遍历显示该对象。我们期望的是按照返回顺序显示,但实际情况大相径庭。此时如果想要按照某种顺序显示,只能前端进行数据排列再展示。

super关键字

我们知道,this关键字总是指向函数所在的当前对象,ES6新增类似关键字super,指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

// 报错,在属性里
const obj = {
  foo: super.foo
}

// 报错,在函数里
const obj = {
  foo: () => super.foo
}

// 报错,在函数里
const obj = {
  foo: function () {
    return super.foo
  }
}

JavaScript 引擎内部,super.foo等同于Object.getPrototypeOf(this).foo(属性)或Object.getPrototypeOf(this).foo.call(this)(方法)。

对象的扩展运算符

解构赋值

注意事项:
1、解构赋值要求等号右边是一个对象,所以如果等号右边是undefinednull,会报错,因为它们无法转为对象。
2、解构赋值必须是最后一个参数,否则会报错。
3、解构赋值是浅拷贝,即如果一个key的value是复合类型的值(数组对象函数),那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
4、扩展运算符的解构赋值只会复制自身的属性,而不会复制原型对象的属性。

let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

let { x, ...y, ...z } = someObject; // 句法错误

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

const o = Object.create({ x: 1, y: 2 });
o.z = 3;

let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3

扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}

{...{}, a: 1}
// { a: 1 }

// 等同于 {...Object(1)}
{...1} // {}

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

扩展运算符可以合并两个对象。

let ab = { ...a, ...b };

下面代码中,axy属性,拷贝到新对象后,会被覆盖。

let aWithOverrides = { ...a, x: 1, y: 2 };

如果把自定义属性放在扩展运算符前面,就变成了设置新对象的默认属性值。

let aWithDefaults = { x: 1, y: 2, ...a };

与数组的扩展运算符一样,对象的扩展运算符后面可以跟表达式。

const obj = {
  ...(x > 1 ? {a: 1} : {}),
  b: 2,
};

扩展运算符的参数对象之中,如果有取值函数get,这个函数是会直接执行的。

let a = {
  get x() {
    throw new Error('not throw yet');
  }
}

let aWithXGetter = { ...a }; // get自动执行,导致报错

AggregateError错误对象

ES12为了配合新增的Promise.any(),引入了一个新的错误对象AggregateError
AggregateError 在一个错误对象里面,封装了多个错误。如果某个单一操作,同时引发了多个错误,,需要同时抛出这些错误,那么就可以抛出一个 AggregateError 错误对象,把各种错误都放在这个对象里面。
AggregateError 本身是一个构造函数,用来生成 AggregateError 实例对象。

AggregateError(errors[, message])
  • errors:数组,每个成员都是一个错误对象。该参数必选。
  • message:字符串,表示抛出时的提示信息。该参数可选。
    AggregateError的实例对象有三个属性。
    name:错误名称,默认为“AggregateError”。
    message:错误的提示信息。
    errors:数组,每个成员都是一个错误对象。

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表:零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时,为空表。 在比较复杂的线性表中,一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言,按照其应用领域,可以粗略地分成三类。 有的语言是多面手,在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类,比如说 C,Java, Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后,该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情,很多情况下,他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言,首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图: 上码: 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况,重点关注在中国市场扮演重要角色的全球及本土铪生产商,呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外,针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…