ES6入门之对象的扩展

2019-05-22 admin

1. 属性的简洁表示法

在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。

const f = 'a'
const b = {f}
b  // {f: 'a'}

等同于
const b = {f: f}

在ES6中允许在对象内直接写变量,这时候属性名为变量名,属性值就是变量值

function u(x, y){
    return {x, y}
}

// ====

function u(x, y){
    return {x: x, y: y }
}

u(1, 2)   // {x:1, y: 2}

或者一下写法:

function o() {
    const x = 1;
    const x = 2;
    return {x, y}
}
o() // {x:1, y:2}

2. 属性名表达式

在JavaScript中属性名的表达式的方法有两种,一种 直接用标识符作为属性名,第二种用表达式作为属性名。第二种写的时候表达式要放在方括号之内

//一
obj.foo = true

//二
obj['a' + 'bc'] = 123

//三
let t = 'm'

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

表达式还可以用来定义方法名(注意:属性名表达式不能和简洁表示法同时使用)


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

obj.hello() // hi

如果属性名表达式是一个对象,则默认情况下会自动将对象转为字符串[object Object]

const ka = {a: 1}
const kb = {b: 2}

const myObj = {
    [ka]: 'va',
    [kb]: 'vc'
}

myObj // Object {[object Object]: 'vc'}

3. 方法的 name 属性

函数的name 属性,返回函数名,对象方法也是函数,因此也由name 属性

const p = {
    n() {
        console.log('h')
    }
}

p.n.name // n

特殊情况 getter 和 setter 属性是在 get 和 set上面

const obj = {
    get foo() {},
    set fod() {}
}

obj.foo.name // undefined

const d = Object.getOwnPropertyDescriptor(obj, 'foo')

d.get.name // get foo
d.set.name // set fod

特殊情况 bind创造的函数 name 属性返回 bound 加上原有函数的名字


var do = function(){

}
do.bind().name // bound do

特殊情况 Function构造函数创造的函数,name 返回 anonymous

(new Function()).name // anonymous

如果对象的方法是一个Symbol 那么name 返回这个 Symbol的描述

const k = Symbol('描述')
k.name // "[描述]"

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

可枚举性

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

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

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

有四个操作会忽略 enumerate 为 false 的属性

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

ES6中 所有class 的原型的方法都是不可枚举的

属性的遍历

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 或字符串,也不管是否可枚举。 1)for..in

以上五种方法遍历对象的键名,都遵循同样的属性遍历的次序股则

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

5. super关键字

this的关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字 super,指向当前对象的原型对象

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

// 报错
const obj = {
  foo: super.foo
}

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

上面三种super的用法都会报错,因为对于 JavaScript 引擎来说,这里的super都没有用在对象的方法之中。第一种写法是super用在属性里面,第二种和第三种写法是super用在一个函数里面,然后赋值给foo属性。目前,只有对象方法的简写法可以让 JavaScript 引擎确认,定义的是对象的方法。

欢迎关注 公众号【小夭同学】

欢迎关注 公众号【小夭同学】

ES6入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

ES6入门之函数的扩展

ES6入门之对象的新增方法

Git教程

前端Git基础教程

[转载]原文链接:https://segmentfault.com/a/1190000019259001

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65469.html

文章标题:ES6入门之对象的扩展

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部