1.属性的简洁表示法

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

// 等同于
const baz = {foo: foo};

ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。

let birth ='2000/01/01';
const Person={name:'张三',
 //等同于birth: birth birth,
 // 等同于hello: function ()... hello(){ console.log('我的名字是', this.name); }
};

2.属性名的表达式

let propKey = 'foo';
let obj = {[propKey]: true,
['a' + 'bc']: 123
};
let lastWord = 'last word';
const a = {'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

ES6 允许字面量定义对象时,用(表达式)作为对象的属性名,即把表达式放在方括号内。

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

const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {[keyA]: 'valueA',
[keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}

3.属性的遍历

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 键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

4.对象的扩展运算符

(1)解构赋值

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

上面代码中,变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(ab),将它们连同值一起拷贝过来。

由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefinednull,就会报错,因为它们无法转为对象。

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

解构赋值必须是最后一个参数,否则会报错。

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

解构赋值的一个用处,是扩展某个函数的参数,引入其他操作。

function baseFunction({ a, b }) { // ...
}
function wrapperFunction({ x, y, ...restConfig }) { // 使用 x 和 y 参数进行操作
  // 其余参数传给原始函数
 return baseFunction(restConfig);
}

(2)扩展运算符

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。

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

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

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

这用来修改现有对象部分的属性就很方便了。

let newVersion = {...previousVersion,
name: 'New Name' // Override the name property
};

上面代码中,newVersion对象自定义了name属性,其他属性全部复制自previousVersion对象。

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

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

转载于:https://www.cnblogs.com/NatChen/p/10795164.html

ES6学习笔记(对象)相关推荐

  1. ES6学习笔记(五):轻松了解ES6的内置扩展对象

    前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...

  2. es6学习笔记-顶层对象_v1.0_byKL

    es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...

  3. es6学习笔记-字符串的扩展_v1.0_byKL

    es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...

  4. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  5. ES6学习笔记04:Set与Map

    ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...

  6. ES6学习笔记03:变量的解构赋值

    ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...

  7. ES6学习笔记01:Symbol数据类型

    ES6学习笔记01:Symbol数据类型 1.Symbol定义 浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...

  8. ES6学习笔记二arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  9. # es6 学习笔记

    es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...

  10. ES6学习笔记02:let 与 const

    ES6学习笔记02:let 与 const 用var声明的变量会造成全局污染,于是就产生了新的声明方式. 1.let 用let声明变量,必须先声明后使用. 在for循环头里用let定义循环变量i,那么 ...

最新文章

  1. CVPR 2020 Oral | 人脸识别Loss新突破: 旷视提出Circle Loss,革新深度特征学习范式...
  2. 19_Android中图片处理原理篇,关于人脸识别网站,图片加载到内存,图片缩放,图片翻转倒置,网上撕衣服游戏案例编写...
  3. 【搜遍互联网,集百家之长】环境配置从入门到放弃之Mac环境下,安装XAMPP,给phpstorm安装Xdebug调试工具...
  4. 如何制作chm格式的帮助文件
  5. php通过ip查询经纬度,php 获取客户端IP地址经纬度所在城市
  6. 吴恩达《Machine Learning》精炼笔记 2:梯度下降与正规方程
  7. 揭秘熊猫TV HEVC直播
  8. C++多线程编程(入门实例)
  9. mysql忘记命令后半部分_Mysql 5 易忘的命令
  10. PCB生成光绘文件教程 (Z)
  11. R语言 支持向量机分类预测
  12. mtk2502和nrf52832哪个好_蓝牙芯片NRF51822与NRF52832的性能对比
  13. Ubuntu最佳字体推荐
  14. 星域cdn概念股票_星域CDN获市场认可 获得牌照并扩大经营
  15. 新浪云部署javaweb项目
  16. dw 用html修改文字样式,Dreamweaver中插入文本以及文本格式设置方法?
  17. linux 开启ssdp服务,无法网络发现,Windows Server 2012如何启用SSDP Discovery服务
  18. unity ios 应用名称多语言本地化
  19. 科大迅飞语音听写(流式版)WebAPI,Web前端、H5调用 语音识别,语音搜索,语音听写
  20. centos英文版下如何安装中文语言包

热门文章

  1. Visual Studio 2008 可扩展性开发(八):关于用户界面的种种(上)
  2. 「leetcode」35.搜索插入位置:每次遇到二分法,都是一看就会,一写就废
  3. Ps提示“脚本错误-50出现一般Photoshop错误,如何解决?
  4. Charles for Mac(抓包工具)
  5. 苹果Mac Finder 替代工具:Path Finder
  6. 苹果Mac 软件出现「意外退出」及「打不开」解决方法
  7. 一些没啥意思的出题想法记录
  8. android studio开启multiDexEnabled后依然出现超出方法数的问题
  9. mysql 5.5多实例部署
  10. 总线接口与计算机通信(三)UART起止式异步通用串行数据总线