ES6之对象新操作
-
属性的简洁表示.
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo}
上面的代码中,变量 foo 直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。
-
属性名表达式
JavaScript 定义对象的属性,有两种方法。
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
-
方法的name属性
函数的
name
属性,返回函数名
。对象方法也是函数,因此也有 name 属性。 -
属性的可枚举性
对象的每个属性都有一个
描述对象
(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor
方法可以获取该属性的描述对象。 -
super关键字
我们知道,
this
关键字总是指向函数所在的当前对象
,ES6 又新增了另一个类似的关键字super
,指向当前对象的原型对象
。注意:super 关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。
-
对象的扩展运算符
对象的
扩展运算符
( ... )用于取出参数对象的所有可遍历
属性,拷贝到当前对象之中。例如:let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
注意:
如果扩展运算符后面不是对象,则会自动将其转为对象。扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。例如:{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}let ab = { ...a, ...b };
// 等同于 let ab = Object.assign({}, a, b); -
链式判断运算符
背景:在实际编程中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在如下所示,可是这样的层层判断非常麻烦,因此 ES2020 引入了“链判断运算符”(optional chaining operator) ?. ,简化下面的写法。
const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';改进之后,为下面所示:
const firstName = message?.body?.user?.firstName || 'default';
上面代码使用了 ?. 运算符,直接在链式调用的时候判断,左侧的对象是否为 null 或 undefined 。如果是的,就不再往下运算,而是返回 undefined 。
下面是判断对象方法是否存在,如果存在就立即执行的例子。
例子:iterator.return?.()
-
Null判断运算符
读取对象属性的时候,如果某个属性的值是 null 或 undefined ,有时候需要为它们指定默认值。常见做法是通过 || 运算符指定默认值。
例如:const headerText = response.settings.headerText || 'Hello, world!';但是在这种做法是错误的,因为开发者的原意是,只要属性的值为 null 或 undefined ,默认值就会生效,但是属性的值如果为空字符串或 false 或 0 ,默认值也会生效。
为此,ES2020引入一个新的 Null 判断运算符 ?? 。它的行为类似 || ,但是只有运算符左侧的值为 null 或 undefined 时,才会返回右侧的值。
例如:const animationDuration = response.settings.animationDuration ?? 300;这一行
代码中,默认值只有在属性值为 null 或 undefined 时,才会生效。这个运算符的一个目的,就是跟链判断运算符 ?. 配合使用,为 null 或 undefined 的值设置默认值。
例如:const animationDuration = response.settings?.animationDuration ?? 300;上面代码中, response.settings 如果是 null 或 undefined ,就会返回默认值300。
注意:现在的规则是,如果多个逻辑运算符比如 || &&等一起使用,必须用括号表明优先级,否则会报错。
-
Object.assign()方法
语法:Object.assign(target, …sources);
特点:浅拷贝、对象属性的合并。若目标和源有同名的,则后面的会覆盖前面同名的属性值。
应用场合:
(1)合并多个对象;
/////////////////// 输出结果为: {name: "shu", age: 12, sex: "男"}
(2)克隆对象(浅);
Object.assign({}, originObj); // 将原始对象复制给空对象
(3)为对象添加多个方法。
-
对象的方法扩展
Object.values():返回一个给定对象所有可枚举属性值的数组
Object.keys():返回对象的键名
Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组,方便map()方法遍历 -
ES6 一共有
5 种
方法可以遍历对象的属性。(1)for...in
for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
(2)Object.keys(obj)
Object.keys 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols 返回一个数组,包含对象自身的所有 Symbol 属性的键名。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys 返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上的 5 种方法遍历对象的
键名
,都遵守同样的属性遍历的次序规则。首先遍历所有数值键,按照数值升序排列。
其次遍历所有字符串键,按照加入时间升序排列。
最后遍历所有 Symbol 键,按照加入时间升序排列。
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
本文来自博客园,作者:122www,转载请注明原文链接:https://www.cnblogs.com/131362wsc/p/17098799.html