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

adam1q84 发布于2019-08-21 17:05 / 3256人阅读

摘要：对象是无序属性的集合有两种创建对象的方式字面量构造函数定义个每一个类别的对象普通对象具有对象所有默认的内部行为特异对象具有某些与默认行为不符的内部行为标准对象内建对象对象属性的简写属性的名称和变量的名称一样的话，可以只写属性的名称分别把参数

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

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

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

普通对象ordinary(具有JS对象所有默认的内部行为)

特异对象exotic(具有某些与默认行为不符的内部行为)

标准对象standard

内建对象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的方法

云服务器 GPU云服务器 es6字符串扩展对象的扩展 js map添加对象对象扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89112.html

初入ES6-Array

摘要：用于将对象转为数组可遍历和类数组对象部署属性的对象和扩展运算符的区别是任何具有属性的都可以使用的方法是用原型该方法还有一个参数类似的新方法将字符串转化为数组，特别是大于的单个字符，避免分割成多个用来弥补构造函数的歧义三个空值只有一个参数其实 1,Array.from用于将对象转为数组（可遍历和类数组对象部署Iterator 属性的对象）和扩展运算符的区别是任何具有Length属性的都可...

马永翠 2019-08-21 16:53 评论0 收藏0
初入ES6-Proxy和Reflect

摘要：用于修改某些操作的默认行为和访问器属性的行为类似在对象的前面多一层代理，对象字面量中定义属性的特性方法，访问器属性此时属性被定义为访问器属性不一样的写法中是用代理的写法第一个参数是对象，第二个是要操作的方法对象也有两个属性，一个是目标对象， 1,Proxy用于修改某些操作的默认行为和访问器属性的行为类似,在对象的前面多一层代理， const obj = { ...

BakerJ 2019-08-21 16:53 评论0 收藏0
angular2初入眼帘之－搭个环境

angular2是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声，angular2在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...

everfight 2019-08-19 18:05 评论0 收藏0
初入ES6-Function

摘要：之前的函数声明及表达式函数的声明函数表达式也可以此时的只是这个匿名函数的名字，和变量没有关系构造函数这种方法会运行两次代码先实例后执行函数体数的默认值如果没有传入参数就使用默认值，利用的短路特性传入的参数为值会忽略判断是否传参，如果没 ES5之前的函数声明及表达式1,函数的声明 function fn(){ dosomething; }; 2,函数表达式 var fn = f...

zgbgx 2019-08-21 17:05 评论0 收藏0
初入ES6-let和const以及代码块

摘要：变量和常量的声明一般的声明，不在函数内就是全局变量，值可以是基本和引用值，可以随时修改和删除语法同一个作用域的声明，只要有同样的声明都会报错，只能修改值语法，和一样，但是不能更改值以上两个语法都不存在变量提升的效果直接使用的话，直接引用错误变量和常量的声明 var a = 34; //一般的声明，不在函数内就是全局变量，值可以是基本和引用值，可以随时修改和删除 ...

wwolf 2019-08-21 17:00 评论0 收藏0