初入ES6-对象的扩展和SET,MAP

Posted xinshijue6080

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初入ES6-对象的扩展和SET,MAP相关的知识,希望对你有一定的参考价值。

 

//字面量
var obj = {
    name : ‘obama‘,
    age :77
}
//构造函数
var obj = new Object();
obj.name = ‘obama‘

ES6定义个每一个类别的对象

  1. 普通对象ordinary(具有JSd对象所有默认的内部行为)
  2. 特异对象exotic(具有某些与默认行为不符的内部行为)
  3. 标准对象standard
  4. 内建对象buildin

对象属性的简写
属性的名称和变量的名称一样的话,可以只写属性的名称

function Obj(name,age){
    return {
        name : name,    //分别把参数的值赋予对象的属性,并且是同名的属性名称
        age:age
    }
}
//简写的属性
function Obj(name ,age){        //简写的方法属性名称和参数的名称是一样的,,可以混在一起的写
    return {
        name,
        age,
    }
}
Obj(‘obama‘,77)    //{name: "obama",age:77}

可计算的属性名称

//对象属性的名称可以是标识符,或者是字符串,读取属性的方法使用点号或者方括号(内部都是字符串)
var obj = {
    a:‘obama‘,
    "a b c d" : 34,    //此时不能用点号读取属性
    [‘hello‘]:‘world‘    //此时的方括号里面的字符串是可以计算的,必须用方括号
    //es5和es6的区别是前者要外部赋值时候使用,后者都可以4代差
}
obj.a //obama;
obj[‘a b c d‘]    //34

重复的属性名称
不会报错,直接取值最后的属性

‘use strict‘
var obj = {
    age : 23,
    age :34
}
//es6最终会age = 34;

自有属性的枚举顺序 对需要遍历的方法
数字属性在前面按照顺序排列,其他的字符串属性和Symbol按照加入的顺序排列

//ES5之前并没有定义如何排序的,但是ES6开始定义如何返回的顺序

var obj ={
    a:2,
    2:34,
    d:23,
    1:23,
    f:2
}
Object.keys(obj)    //["1", "2", "a", "d", "f"]

对象方法的简写
可以省略function关键字,直接名称方法

var obj = {
    name : ‘obama‘,
    behavor:function(){
        alert(‘i am presdent of Amercia‘)
    }
 }
var obj = {
    name :‘bush‘,
    behavor(){
         alert(‘i am presdent of Amercia‘)    //简写的语法,此方法有个name的属性即使括号前的名称
    }    

}

扩展的ES6方法
1,Object.is()比较两个变量的大小对比===

NaN === NaN www.bajieyy.org   //false
Object.is(NaN,NaN)    //false;
-0 === +0   //true
Object.is(-0,+0)    //false;
//除以上的区别其他都是类似的

2,Object.assign()接受任意多的对象参数,同名的属性后面会覆盖前面的同名属性,深拷贝一个对象

function mixin(rec,sup){
    Object.keys(sup).forEach(function(key){
            rec[key] = sup[key];        //此处是浅拷贝
       });
       retrun rec;
}
var rec = {};
var obj1 = {name : ‘obama‘};
var obj2 = {age : 34};
var obj3 = {name : ‘bush‘,beha(){console.log(‘this is presdent‘)}};
Object.assign(rec,obj1,obj2,obj3)
//{name: "bush", age: 34, beha: ?}深度拷贝

扩展的原型

var str = new String(‘this is string‘);
var obj = { name : ‘obma‘};
var test = Object.create(str);
str.isPrototypeOf(test)    //true
test.__proto__ = obj;    //强制的赋值
obj.isPrototypeOf(test)    //true
Object.getPrototypeOf(test)    //str

//ES6新的方法
test.setPrototype(obj)
obj.isPrototypeOf(test)    //true

super原型的指针只存在简写的方法中

 
var a  = {
   aa(){return ‘a‘}
};
var b = {
    aa(){return ‘b‘}
};
var c = {
    c(){
        return Object.getPrototypeOf(this).aa.call(this)+‘this is c‘    //通原型的方法调用
    }
}
var c = {
    c(){
        return super.aa()+‘this is here‘;        //有function关键字会报错
    }
}
Object.setPrototypeOf(c,b);
var d = Object.create(c)    //报错,this的指向有问题,调用栈超出;使用super避免了this 的指向

以上是关于初入ES6-对象的扩展和SET,MAP的主要内容,如果未能解决你的问题,请参考以下文章

es6数组的扩展

ES6 set和map数据结构对对象数组去重简单实现

ES6 Set 和 Map

ES6---扩展运算符和rest‘...’(三点运算符),在数组函数set/map等中的应用

ES6 数组的扩展

es6中的Set和Map