ES6入门之对象的扩展

栏目: JavaScript · 发布时间: 5年前

内容简介:在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。在ES6中允许在对象内直接写变量,这时候属性名为变量名,属性值就是变量值在JavaScript中属性名的表达式的方法有两种,一种 直接用标识符作为属性名,第二种用表达式作为属性名。第二种写的时候表达式要放在方括号之内
ES6入门之对象的扩展

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入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

ES6入门之函数的扩展

ES6入门之数组的扩展

Git教程

前端Git基础教程


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程精粹

编程精粹

Steve Maguire / 人民邮电出版社 / 2009.2 / 45.00元

编写高质量的、没有bug的程序,是每位程序员所追求的目标。但随着软件规模越来越大,功能日趋复杂,这一目标变得越来越困难。 本书揭示了微软公司应对质量挑战、开发出世界级代码的技术内幕,作者在自己不断探索、实践和思考的基础上,系统总结了多年来指导微软各团队的经验,将其凝聚为许多切实可行的编程实践指导,可谓字字珠玑。正因如此,本书被公认为与《代码大全》齐名的编程技术名著,曾于1993年荣获有软件开......一起来看看 《编程精粹》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具