初入ES6-對象的擴展和SET，MAP

adam1q84 發布于2019-08-21 17:05 / 3257人閱讀

摘要：對象是無序屬性的集合有兩種創建對象的方式字面量構造函數定義個每一個類別的對象普通對象具有對象所有默認的內部行為特異對象具有某些與默認行為不符的內部行為標準對象內建對象對象屬性的簡寫屬性的名稱和變量的名稱一樣的話，可以只寫屬性的名稱分別把參數

對象是無序屬性的集合
有兩種創建對象的方式

//字面量
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添加對象對象擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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