ES6(6)、新版对象

1、如何定义一个对象

ES6之前:

var a=new Object()   
var a={}  

这两种定义对象是有原型链存在,并可以使用原型链上方法如toString()

ES6新增另外一种:

var b=Object.create()

b.toString()  //报错:b.toString is not a function

这种方法定义对象,是不存在原型的,里面就真的啥方法都没有,空空如也。

2、对象如何获取变量key

ES6之前:

var name='a'
var object={}
object[name]=1
console.log(object)  //{a:1}

ES6修改成:

var name='a'
var object={[name]:1}  //直接一步到位
console.log(object)  //{a:1}
3、对象属性定义

ES6之前:

var o = {
  a: a,
  b: b,
  c: c
};

var o={
  sayHi:function(){}
}

ES6修改成:

var o = {a, b, c}; //key和valuet同名可以进行缩写

var o={
  sayHi(){}  //省略了function
}
4、ES6对象新增了getter和setter方法
var o={
  _age:18,   //加下划线防止名字相同
  get age(){return o._age},  //获取
  set age(value){if(value<100){o._age=value}else{o._age=100}}   //设置
}
33.png

调用o.age就相当调用了getter方法,调用o.age=1000就相当调用了setter方法。ES6使得对象属性可以自行定义获取和设置。

5、对象的浅拷贝(两个地址不一样的对象)

ES6之前:

var obj1={a:1,b:2,c:3}
var obj2={}
for(let key in obj1){
   obj2[key]=obj1[key]
}
console.log(obj2)   //{a: 1, b: 2, c: 3}

注意:这种不是浅拷贝,修改obj2会导致obj1也会变

var obj1={a:1,b:2,c:3}
obj2= obj1   //这不是浅拷贝,而是引用同一个地址的对象

ES6新增:
(1)、Object.assign()方法

var obj1={a:1,b:2,c:3}
var obj2=Object.assign({},obj1)  //将后面对象拷贝到前面的空对象
console.log(obj2)   //{a: 1, b: 2, c: 3}

(2)、用剩余参数方法

var obj1={a:1,b:2,c:3}
var obj2={...obj1}
console.log(obj2)   //{a: 1, b: 2, c: 3}
6、对象的原型
var  a={}

a.__proto__===Object.prototype   //打印出true,说明Object.prototype 是a的原型

如何修改对象原型

var b={
   sayHi(){
   console.log('hi')
  }
}
a=Object.create(b)  //修改原型方法,不推荐用__proto__

a.__proto__===b  //打印出true,说明 b 是a的原型

如何找出对象原型

a.__proto__    //不推荐方法

Object.getPrototypeOf(a)   //ES6推荐方法
7、属性修饰符

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

Object.defineProperty,用到时候查看一下MDN即可

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 创建一个对象 可以通new Object() 和Object.create()方法,或者使用字面量标记(初始化标记...
    学的会的前端阅读 746评论 0 3
  • 原本想稍微整理一下 ES 新特性,没想到花了相当多的时间,本文也巨长,依然推荐使用 简悦[https://gith...
    401阅读 1,909评论 0 5
  • Symbol 1.ES5的对象属性名都是字符串,容易造成命名冲突,ES6引入Symbol机制,以保证每个属性名都是...
    98b8dc01512b阅读 274评论 0 0
  • 面向对象补充: JavaScript 通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法...
    满天繁星_28c5阅读 209评论 0 1
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,113评论 8 25