ES6 对象的扩展

1. 属性的简洁表示法

  • ES6允许直接写入变量和函数作为对象的属性和方法。
var foo = 'bar';
var baz = { foo };
baz // {f00:'bar'};

上面表明,ES6允许在对象中写属性名,不写属性值。

function f(x,y){
  return { x, y }
}
f(1, 2)  // { x:1, y: 2 }
  • 除了属性可以简写,方法也可以简写。
var  o = {
   method(){
   return 'hello';
  }
}
//等同于
var  o = {
   method:function(){
   return 'hello';
   }
}

2. 属性名表达式

我们知道js定义对象的属性有两种方法

var obj = {};
//方法一
obj.foo=  true;
//方法二
obj['foo'] = true;
  • 方法一是直接使用标识符作为属性名;
  • 方法二是使用表达式作为属性名,这是要将表达式放在方括号内;

但是,如果要使用字面量方式定义对象(使用大括号),ES5只能用方法一(标识符)定义属性;

var obj = {
   foo : true
}

ES6允许字面量定义对象时使用方法二(表达式

var str = "foo";
var obj = {
   [str] : true
}
//方法也可以
var obj = {
   [str](){
    return 2;
 }
}

3. 方法的name属性

函数的name属性返回函数名。对象的方法也是函数,也有name属性。

var person = { 
  sayName(){
     console.log(this.firstName)
    },
get firstName(){
    return "yujia"
    }
  }
person.sayName.name // 'sayName'
person.firstName.name //'get firstName'

4. Object.is()

Object.is()用来比较两个值是否严格相等,它和严格运算符("===")的行为基本一致。

Object.is('foo', 'foo');//true
Object.is({}, {});//false

Object.is()严格运算符差异有两个

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

5. Object.assign()

Object.assign()方法用来将原对象的所有可枚举属性复制到目标对象。
它至少需要两个对象作为参数,第一个是目标对象,后面的参数是源对象。

var target  = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2)//  
target  // { a:1 , b:2, c:3 };
  • 如果目标对象和源对象有同名属性,源对象的属性将覆盖目标属性。
  • Object.assign()不会复制不可枚举属性(enumerable=false)和继承的属性。

6. 对象的属性遍历

ES6一共有6种方法可以遍历对象的属性

1. for...in遍历对象自身的和继承的可枚举属性。
var obj = {a:1,b:2,c:3}
for(let i in obj){
    console.log(i)
}

遍历继承属性

function person(){
  this.name = 'yujia';
  this.age = 26;
}
person.prototype.sayName = function(){ 
    console.log(this.name)
 } 
var person1 = new person();
for(let i in person1){ 
   console.log(i)
}
//name
//age 
//sayName
2. Object.keys(obj)遍历自身可枚举的属性(不包含继承属性),返回属性组成的数组。
var obj = {a:1,b:2,c:3};
obj.__proto__.d = 4;
Object.keys(obj);
///["a", "b", "c"]
3. Object.getOwnPropertyNames()遍历自身所有属性(包含不可枚举属性),返回属性组成的数组。
var person = {name: "yujia", age: 26};
Object.defineProperty(person,'add',{
  value : 37,
  writable : true,
  enumerable : false,
  configurable : true
})
person.__proto__.sayName = ''
//for in  不可枚举 add
for(let i in person){console.log(i)}
//name
//age
//sayName 
Object.getOwnPropertyNames(person)
// ["name", "age", "add"]
4. Reflect.ownKeys(obj),返回一个对象自身的所有属性组成的数组(不包括继承属性)。
var person = {name: "yujia", age: 26};
person.__proto__.sayName = ''
Object.defineProperty(person,'add',{
  value : 37,
  writable : true,
  enumerable : false,
  configurable : true
})
person.__proto__.sayName = ''
Reflect.ownKeys(person) //["name", "age", "add"]

7. _proto_属性,Object.setPrototypeOf()Object.getPrototypeOf();

_proto_属性用来设置或读取当前对象的prototype(原型对象)

var obj = {
   method:function(){...}
}
obj._proto_ = someOtherObj;

但是不推荐使用,而是使用 Object.setPrototypeOf()(写操作)、 Object.getPrototypeOf()(读操作)、或 Object.create()(生成操作) 代替。

而现实上, _proto_调用的是Object.prototype._proto_,具体的实现如下;

Object.defineProperty(Object.prototype,"_proto_",{
   get(){
       let  _thisObj  = Object(this);
        return Object.getPrototypeOf(_thisObj);
       },
   set(){
        if(this === undefined||this === null){
              throw new TypeError();
        }
        if(!isObject(this)){
             return undefined;
        }
        if(!isObject(proto)){
             return undefined;
        }
       let status = Reflect.setPrototypeOf(this, proto);
     }
   })
function isObject(value){
  return  Object(value) == value;
  }

你可能感兴趣的:(ES6 对象的扩展)