1.属性的简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

function f(x, y) {
return {x, y};
} // 等同于 function f(x, y) {
return {x: x, y: y};
} f(, ) // Object {x: 1, y: 2}
var o = {
method() {
return "Hello!";
}
}; // 等同于 var o = {
method: function() {
return "Hello!";
}
};
module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
getItem: getItem,
setItem: setItem,
clear: clear
};

2.Object.is()

ES6 提出“Same-value equality”(同值相等)算法。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,

与严格比较运算符(===)的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
+0 === -0 //true
NaN === NaN // false Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

3.Object.assign()

Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object.assign(target, source1, source2);

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

如果该参数不是对象,则会先转成对象,然后返回。

typeof Object.assign(2) // "object"
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false

注意点

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

常见用途

(1)为对象添加属性

class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}

(2)克隆对象

function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}

(3)为属性指定默认值

const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
}; function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
console.log(options);
// ...
}

注意,由于存在浅拷贝的问题,DEFAULTS对象和options对象的所有属性的值,最好都是简单类型,不要指向另一个对象。

4.属性的可枚举性和遍历

可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

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

描述对象的enumerable属性,称为”可枚举性“,如果该属性为false,就表示某些操作会忽略当前属性。

目前,有四个操作会忽略enumerablefalse的属性。

  • for...in循环:只遍历对象自身的和继承的可枚举的属性。
  • Object.keys():返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify():只串行化对象自身的可枚举的属性。
  • Object.assign(): 忽略enumerablefalse的属性,只拷贝对象自身的可枚举的属性。

属性的遍历

ES6 一共有5种方法可以遍历对象的属性。

(1)for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

var a ={'b':,'cc':'dd'}
for(let temp in a){
console.log(temp)
}
//2 b
// cc

(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.Object.getOwnPropertyDescriptors()

前面说过,Object.getOwnPropertyDescriptor方法会返回某个对象属性的描述对象(descriptor)。

ES2017 引入了Object.getOwnPropertyDescriptors方法,返回指定对象所有自身属性(非继承属性)的描述对象。

const obj = {
foo: ,
get bar() { return 'abc' }
}; Object.getOwnPropertyDescriptors(obj)
// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: bar],
// set: undefined,
// enumerable: true,
// configurable: true } }

该方法的引入目的,主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。

Object.getOwnPropertyDescriptors方法的一个用处,是配合Object.create方法,将对象属性克隆到一个新对象。这属于浅拷贝

const clone = Object.create(Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj));

 

6.__proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

__proto__属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。目前,所有浏览器(包括 IE11)都部署了这个属性。

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto); proto.y = 20;
proto.z = 40; obj.x //
obj.y //
obj.z //

Object.getPrototypeOf()

function Rectangle() {
// ...
} var rec = new Rectangle(); Object.getPrototypeOf(rec) === Rectangle.prototype
// true Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

7.Object.keys(),Object.values(),Object.entries()

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 }; for (let key of keys(obj)) {
console.log(key); // 'a', 'b', 'c'
} for (let value of values(obj)) {
console.log(value); // 1, 2, 3
} for (let [key, value] of entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values只返回对象自身的可遍历属性

Object.entries的基本用途是遍历对象的属性。

Object.entries方法的另一个用处是,将对象转为真正的Map结构。

var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

8.Null 传导运算符

编程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在。

比如,要读取message.body.user.firstName,安全的写法是写成下面这样。

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

这样的层层判断非常麻烦,因此现在有一个提案,引入了“Null 传导运算符”(null propagation operator)?.,简化上面的写法。

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

“Null 传导运算符”有四种用法。

  • obj?.prop // 读取对象属性
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法的调用
  • new C?.(...args) // 构造函数的调用

9.Object.defineProperty()

语法:

Object.defineProperty(obj, prop, descriptor)

参数说明:

obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
Object.defineProperty(obj,"newKey",{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false,
get:function (){
//当获取值的时候触发的函数
return initValue;
},
set:function (value){
//当设置值的时候触发的函数,设置的新值通过参数value拿到
initValue = value;
}
});

ES6之主要知识点(七)对象的更多相关文章

  1. es6的一些知识点

    es6的一些知识点 前言:es6(ECMAscript2015)标准 let.const.var的一些区别 let.const 块级作用域.全局作用域.函数作用域 var 全局作用域.函数作用域 变量 ...

  2. ES6复习干货知识点汇总

    一.问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优 ...

  3. ES6之6种遍历对象属性的方法

    ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...

  4. ES6学习笔记(七)对象的新增方法

    1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...

  5. ES6学习笔记(七)-对象扩展

    可直接访问有道云笔记分享链接查看es6所有学习笔记 http://note.youdao.com/noteshare?id=b24b739560e864d40ffaab4af790f885

  6. ES6/ES2015常用知识点和概念

    越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...

  7. ES6之主要知识点(八)Symbol

    防止属性名的冲突.这就是 ES6 引入Symbol的原因. 它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(Boolean).字符串(String). ...

  8. ES6 - Note3:数组、对象与函数的扩展

    一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...

  9. ES6之Spread Operater拷贝对象

    译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...

随机推荐

  1. PHP算法之分割平衡字符串

    在一个「平衡字符串」中,'L' 和 'R' 字符的数量是相同的. 给出一个平衡字符串 s,请你将它分割成尽可能多的平衡字符串. 返回可以通过分割得到的平衡字符串的最大数量. 示例 1: 输入:s = ...

  2. Python re标准库

    re模块包含对正则表达式的支持. 一.什么是正则表达式 正则表达式是可以匹配文本片段的模式.最简单的正则表达是就是普通字符串,可以匹配其自身.你可以用这种匹配行为搜索文本中的模式,或者用计算后的值替换 ...

  3. CSIC_716_20191028【爬小破站】

    1.爬取小破站的弹幕 2.展示爬取内容 打开网页,用教的方法找到cid 和header import requests from bs4 import BeautufulSoup import pan ...

  4. thinkphp 获取内容

    如果需要获取渲染模板的输出内容而不是直接输出,可以使用fetch方法. fetch方法的用法和display基本一致(只是不需要指定输出编码和输出类型): 大理石平台规格 fetch('模板文件') ...

  5. 0917CSP-S模拟测试赛后总结

    机房搬家后的首战,便是失利. 依旧是挂掉了.这次状态有大问题. 然而状态的问题归根结底还是实力不行. 大约一个小时左右我拿到了T1的部分分.赛时判断了一下大概是高分. (不过赛后发现确实不算什么太高的 ...

  6. Invalid argument value:无效参数值。原因是:把Session值user0当做username作为参数了。 而实际上此时username是user0的成员变量。参数应该是user0.getUsername();然后发现别人的List得加泛型,我的怎么不用加,运行报错,上网收了错误原因,因为导包错误,不小心导错包了,改为util.List包对了。

  7. Python3 多线程编程 - 学习笔记

    线程 什么是线程 特点 线程与进程的关系 Python3中的多线程 全局解释器锁(GIL) GIL是啥? GIL对Python程序有啥影响? 改善GIL产生的问题 Python3关于多线程的模块 多线 ...

  8. <python基础>封装,继承,多态,重写,重载

    什么是封装? 所谓的面向对象就是将我们的程序模块化,对象化,把具体事物的特性属性和通过这些属性来实现一些动作的具体方法放到一个类里面,这就是封装.封装是我们所说的面相对象编程的特征之一.除此之外还有继 ...

  9. C#の单例模式

    版本一: /// <summary>/// A simple singleton class implements./// </summary>public sealed cl ...

  10. js字符实体 转义字符串

    HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,> ...