ES6入门之对象的扩展

RiverLi 发布于2019-05-23 11:58 / 2206人阅读

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。

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基础教程

GPU云服务器云服务器 es6字符串扩展对象的扩展 ES6入门机器学习入门之

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6942.html

ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都会转换数据类型，...

zhou_you 2019-05-22 19:25 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

dackel 2019-08-02 16:15 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

graf 2019-08-23 17:10 评论0 收藏0