专栏首页coding个人笔记ES6之对象的扩展

ES6之对象的扩展

JavaScript的世界,万物皆对象,ES6对对象有一些很大的升级。

属性简介表示:

允许直接写入变量和函数,属性名为变量名,属性值为变量值:

var a = 1;var b = 2;

console.log({a, b})//{a: 1, b: 2}

方法简写应该就不用多说了:

getData(){
}

使用exports的时候我们就经常用:

var a = function(){}
var b = function(){}
module.exports = { 
  a: a, 
  b: b
}

等同于:

module.exports = {a, b}

属性名:

对象使用字面量方式定义属性只有一种方法:

var obj = { 
  a: 1
}

ES6支持表达式作为对象的属性名:

var a = 'test';
var obj = { 
  [a]: 1
}
console.log(obj);//{test: 1}

函数name属性在函数扩展说过了,对象的函数现在也有name属性。

属性可枚举和遍历:

对象有一个描述对象,通过Object.getOwnPropertyDescriptor方法可以获取:

var obj = { 
  a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
//{value: 1, writable: true, enumerable: true, configurable: true}
enumberable是可枚举属性,如果是false,某些操作就会忽略当前的属性:
var obj = { 
  a: 1, 
  b: 2
}
Object.defineProperty(obj, 'a', { 
  enumerable: false
})
for(let val in obj){ 
 console.log(val);//b
}

目前有四个方法会把不可枚举的忽略:

for...in循环、Object.keys()、JSON.stringify()、Object.assign()这四个方法都会不遍历不可枚举的属性。前三个是ES5的,最后一个是ES6的。

可枚举属性就是为了让某些属性可以不被枚举,比如length、toString等,我们是希望不被循环出来的。ES6的Class原型的方法都是不可枚举的。

遍历对象属性键名有五种方法:

For in不含symbol

Object.keys()返回数组,不包含symbol

Object.getOwnPropertyNames()返回数组,不可枚举的也包括,不包括symbol

Object.getOwnPropertySymbols()返回数组,所有symbol的键名。

Reflect.ownKeys()返回数组,包括所有的键名,不管可枚举不可枚举。

super关键字,这边说一下,JavaScript引擎现在只能识别对象方法的简写定义的是对象方法:

var obj = { 
  test() { 
  }
}

super关键字只能用在对象方法中,指向当前对象的原型对象,但只是当前对象,this的指向是不变的:

var proto = { 
  a: 'a', 
   b: 'a'
};
var obj = { 
  a: 'b', 
  b: 'b', 
   test() { 
     console.log(this.b);//b 
     return super.a; 
  }
};
Object.setPrototypeOf(obj, proto);
console.log(obj.test()); // "a"

扩展运算符和结构赋值,之前有说过,这边就分享几个点:

解构赋值是浅拷贝

扩展运算符的解构不能复制原型的属性

var o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...newObj } = o;
console.log(newObj);//{z: 3}

ES6对对象新增了很多方法:

Object.is()跟严格相等(===)一样,多加了两个不同,+0不等于-0和NAN等于NAN。

console.log(+0 === -0); //true
console.log(NaN === NaN); // false
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

Object.assign,我觉得这个方法不用多介绍,就是合并对象到第一个参数。需要注意的是,参数放后面的,如果属性相同,会被后面的覆盖。

Undefined和null当做首参数会报错,不是对象的会转成对象返回,非对象的参数不在第一个,不能转成对象就会跳过。布尔值和数字也会跳过。且只会拷贝可枚举的自身属性。

assign方法是浅拷贝,函数是无法复制的。

ES2017引入Object.getOwnPropertyDescriptors(),返回所有对象属性的描述:

const obj = { 
  foo: 'world', 
  find() { 
    return super.foo; 
  }
};
console.log(Object.getOwnPropertyDescriptors(obj));
find: 
 configurable: true 
 enumerable: true 
 value: ƒ find() 
 writable: truefoo: 
 configurable: true 
 enumerable: true 
 value: "world" 
 writable: true

ES2015的Object.getOwnPropertyDescriptor()是获取某一个。

Object.setPrototypeOf()(写操作)

Object.getPrototypeOf()(读操作)

Object.create()(生成操作)

这三个方法都是对原型的操作,比如set就是改变原型的指向:

var proto = {};
var obj = { a: 1 };
Object.setPrototypeOf(obj, proto);
proto.b = 20;
console.log(obj.b);//20

Obj的原型指向了proto。

ES5的Object.keys(),ES2017的Object.values(),Object.entries(),这三个方法都是返回数组,一个是键值,一个是属性值,一个是键值对。包含可枚举且不是symbol的自身属性。

Object.fromEntries()是Object.entries()的逆操作,把键值对的数组变成对象:

console.log(Object.fromEntries([    ['a', 'a'],    ['b', 'b']]));

//{a: "a", b: "b"}

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我理解的作用域

    JavaScript开发中,作用域算是难点和一大核心,作用域的理解很深,我可能会另外再写一些,先写一下目前为止理解到的层次。

    wade
  • Underscore链式调用

    回归今天分享的主题,underscore,这个函数库在业界内很出名,但是本人却从来没用过,估计只有那些算法写的多的才会用吧。underscore兼容了低版本浏览...

    wade
  • 数据类型判断Object.prototype.toString.call

    越学习越觉得基础的不牢固,不懂的,摸棱两可的,学了忘了的,在从入门到放弃的路上一直走着。今天分享一下数据类型判断的方法。

    wade
  • 前端面试拔高题

    对象是 JS 中基本类型之一,而且和原型链、数组等知识息息相关。不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题。

    李才哥
  • JS深拷贝方法

    薛定喵君
  • linux 查找文件

    week
  • CTPN论文翻译——中文版

    文章作者:Tyan 博客:noahsnail.com | CSDN | 简书

    Tyan
  • [WCF的Binding模型]之三:信道监听器(Channel Listener)

    信道管理器是信道的创建者,一般来说信道栈的中每个信道对应着一个信道管理器。基于不同的消息处理的功能,将我们需要将相应的信道按照一定的顺序能组织起来构成一个信道栈...

    蒋金楠
  • 使用monit搭建一个监控系统

    马哥linux运维 | 最专业的linux培训机构 ---- 上周用monit搭建或者说定制了一个监控系统,来监控服务器发生事情。当然了主要是监控异常,因为我...

    小小科
  • 从0到1用java再造tcpip协议栈:ICMP协议的原理和实现

    绝大多数TCPIP传输协议基于IP寻址协议,然后建造在IP之上的TCP和UDP两种协议用于控制数据包的传输。问题在于这些协议只关注数据传输,在传输过程中如果出现...

    望月从良

扫码关注云+社区

领取腾讯云代金券