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

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初入ES6-对象的扩展和SET,MAP脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

对象是无序属性的集合
有两种创建对象的方式


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

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

  1. 普通对象ordinary(具有JS对象所有默认的内部行为)
  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的区别是前者要外部赋值时候使用,后者都可以
}
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    //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 的指向

对象方法正式确定,添加[[homeObject]]指定放赋予的对象

SET
es5对象的限制,同名属性会覆盖,属性名称必须是字符串,
set是另外一种有序列表,包含相互独立的不重复的值,不会对存储的值进行类转换如果需要键名的话,和值是一样的

const set = new Set([1,2]);    //参数是有遍历接口的数据;
set.add(3)    //增加数据
set.has(3)    //判断是否包含某个值
set.delete(3)    //移除元素
set.clear()    //    清除元素
set.forEach((key,value,newSet)=>console.log(key,value,newSet))//默认有三个参数,值,键名,原数据
//使用扩展运算符转为数组类型
const arrr = [...set];
//weakSet传入的值必须是对象,构造函数没有参数,只有三个方法,add,has,delete,不可以遍历,也没有size属性

MAP
属性和值可以是任何数据类型,属性的判断是透过Object.is()方法判断的;

const map = new Map();
map.set('age',12);    //写入数据
map.get('age')        //读取数据 ,如果数据的不存在 undefined;
//和Set一样有has,delete,,clear,size的方法

脚本宝典总结

以上是脚本宝典为你收集整理的初入ES6-对象的扩展和SET,MAP全部内容,希望文章能够帮你解决初入ES6-对象的扩展和SET,MAP所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。