ES6 — 对象扩展

来源:互联网 发布:网络用语sai是什么意思 编辑:程序博客网 时间:2024/04/30 13:02

今天来总结一下es6的对象扩展,最近一直在看es6, 感觉es6真的很好用,不过也看到过网上一些反面语言,可能因人而异,es6 的发展前景让我们拭目以待。

一、对象属性和方法

1.简写

// 属性简写var a = "first";var b = {a};console.log(b)  // {a:"first"}//方法简写var obj = {  method (){    retrun "hello world";  }} //等同于var obj = {  method: function (){    retrun "hello world";  }} 

2.属性名表达式

let propName = "value";let obj = {  [propName]:true,  ["one"+"child"]:1323}obj[propName]  // trueobj[onechild]  // 1323

重点内容
① 如果属性名表达式不能与简洁表示法同时使用。否则会报错
② 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串,如果有多个属性名对象会产生覆盖。

二、Object.is()方法和 Object.assign() 方法

1.Object.is() 用于比较两个值是否严格相等。

在ES5 中严格相等有比较运算符(===),但是全等号有两问题:
-0 === +0 // true
NaN === NaN // false

而Object.is() 解决了上边两个问题,其他的行为和=== 行为一致。

Object.is({},{}); // falseObject.is(+0,-0); // falseObject.is(NaN,NaN); // true

2.Object.assign() 方法用于合并对象
Object.assign() 用于合并对象,有利于我们去封装函数。它的使用方法和jq 的 $.extend() 方法类似

  let objOne = {a:1};  let objTwo = {b:2};  let objThree = {b:4,c:5};  let obj = Object.assign(objOne,objTwo,objThree);  console.log(obj) // {a:1,b:4,c:5}

由结果可以看出,合并后的对象,如果出现同名属性,后边的会覆盖前边的。

重点内容
①如果只有一个参数,Object.assign() 会直接返回该参数

Object.assign({a:"new"}) //{a:"new"}

②如果该参数不是对象,会将该参数转化为对象,

typeof Object.assign(0) // "object"

③undefined 和 null 作为首参数会报错,不为首参时也不会报错

Object.assign(undefined) // 报错 Cannot convert undefined or null to objectObject.assign({},undefined) // 空对象 {}

④字符串会以数组形式拷贝到目标对象,而数值和布尔值等不会产生效果

   var one = 'one';   var num = 10;   var bool = true;   var last = Object.assign({},bool,num,one)   console.log(last) // {0: "o", 1: "n", 2: "e"}   console.log(last[1]) // n

⑤Object.assign 只拷贝源对象的自身属性(不会拷贝继承属性),也不会拷贝不可枚举的属性。

var persion = {};Object.defineProperties(persion,{  name:{    enumerable:true,    value:"name"  },  age:{    enumerable:false,    value:"age"  }})Object.assign({a:"a"},persion); // {a: "a", name: "name"}

⑥属性为 Symbol 值得属性,也会被其拷贝。

* 用途 *
①为对象添加属性
②为对象添加方法
③克隆对象
④合并多个对象
⑤为属性指定默认值

三、属性的遍历

(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 或字符串,也不管是否可枚举。

遍历排序是这样的:数字属性>字符串属性>Symbol值属性

四、__proto__ 属性 和Object.setPrototypeOf(), Object.getPrototypeOf()

ES6 为我们提供了__proto__ 属性。不过目前还是建议使用Object.setPrototypeOf(), Object.getPrototypeOf()

1.Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

 let objFirst = {a:"a"} let objLast = {b:"b",c:"c"} Object.setPrototypeOf(objFirst,objLast); console.log(objFirst.b) // b console.log(objFirst.b === objLast.b) // true

上边的代码相当于:

function(objFirst,objLast){  objFirst.__proto__ = objLast;  return objFirst;}

2.Object.getPrototypeOf()

该方法用于读取一个对象的原型对象

function newOne(){}var newObj = new newOne();console.log(Object.getPrototypeOf(newObj) === newOne.prototype);
原创粉丝点击