ES6 對象擴展

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/25/12570865.html

//ES5 對象 const getInfo=(id=1)=>{ //ajax... const name="cyy"; const age=18; return { name:name, age:age, say:function(){ console.log(this.name+this.age ...


    //ES5 對象
    const getInfo=(id=1)=>{
        //ajax...
        
        const name="cyy";
        const age=18;

        return {
            name:name,
            age:age,
            say:function(){
                console.log(this.name+this.age);
            }
        }
    }
    const cyy=getInfo();

    //ES6 對象的簡潔表示法
    const getInfo2=(id=1)=>{
        //ajax...
        
        const name="cyy";
        const age=18;

        return {
            name,//會去找同名變數
            age,
            say(){//方法可以省略冒號
                console.log(this.name+this.age);
            }
        }
    }
    const cyy2=getInfo2();    

 

 

屬性名錶達式

const cyy={
    name:"cyy",
    age:18,
    "#^":"不規範的屬性名要用單引號或者雙引號"
}

 

 

//ES6
const key="#^";
const cyy2={
    name:"cyy2",
    age:18,
    [key]:"ES6使用[]"
}

 

 

[ ]里可以有表達式

//ES6
const cyy2={
    name:"cyy2",
    age:18,
    ["aa"+"bb"+"cc"]:"ES6使用[]"
}

 

 

[ ] 里可以有模板字元串

//ES6
const key="str";
const cyy2={
    name:"cyy2",
    age:18,
    [`${ key } 123`]:"ES6使用[]"
}

 

 

擴展運算符(擴展運算符及新方法)

//複製對象
const obj1={
    a:1,
    b:2
}
let cobj1={...obj1};

 

 

使用擴展運算符複製對象屬於淺拷貝(拷貝引用地址),而不是深拷貝(拷貝所有數據)

//擴展運算符拷貝,拷貝的是引用地址
const obj1={
    a:1,
    b:2,
    c:{
        d:11,
        f:22
    }
}
let cobj1={...obj1};
console.log(cobj1.c.d);//11
cobj1.c.d=111;
console.log(cobj1.c.d);//111
console.log(obj1.c.d);//111

 

 

合併對象

//合併對象,屬性相同時後面的會覆蓋前面的
const obj1={
    a:1,
    b:2,
    c:{
        d:11,
        f:22
    }
}

const obj2={
    a:3,
    g:4
}

const nobj={
    ...obj1,
    ...obj2
}

 

 

合併對象也是淺拷貝,拷貝的是引用地址:

//合併對象
const obj1={
    a:1,
    b:2,
    c:{
        d:11,
        f:22
    }
}

const obj2={
    a:3,
    g:4
}

const nobj={
    ...obj1,
    ...obj2
}

//淺拷貝
nobj.c.d=111;
console.log(obj1.c.d);

 

 

新的方法:Object.is()

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

console.log(NaN==NaN);//false
console.log(Object.is(NaN,NaN));//true

 

Object.assign() 賦值或合併對象

屬性相同時後面的會覆蓋前面的

也是屬於淺拷貝

//對象合併,相同屬性後面的覆蓋前面的
let obj=Object.assign({a:1},{b:2,c:3},{c:4});//{a: 1, b: 2, c: 4}
console.log(obj);

let obj1={
    a:1,
    b:{
        b1:11,
        b2:22
    }
}
let obj2={
    c:3,
    d:4
}
let obj3=Object.assign({},obj1,obj2);
console.log(obj3);//{a: 1, b: {…}, c: 3, d: 4}
//淺拷貝
obj3.b.b1=111;
console.log(obj1.b.b1);//111

 

Object.keys()

Object.values()

Object.entries()

let obj={
    a:1,
    b:{
        b1:11,
        b2:22
    }
}

//獲取對象的屬性名組成的數值
console.log(Object.keys(obj));//["a", "b"]
//獲取對象的屬性值組成的數值
console.log(Object.values(obj));//[1, {…}]
//獲取對象的屬性名和屬性值作為鍵值對,組成的數值
console.log(Object.entries(obj));//[Array(2), Array(2)]

 

 

for of 遍歷對象

let obj={
    a:1,
    b:{
        b1:11,
        b2:22
    }
}

//for of 遍歷得到每一個屬性名
for(let key of Object.keys(obj)){
    console.log(key);
}

//for of 遍歷,結構賦值得到每一個屬性名和屬性值
for(let [k,v] of Object.entries(obj)){
    console.log(k,v);
}

 

 

Rest 解構賦值不會拷貝繼承自原型對象的屬性

let obj1={a:1};
let obj2={b:2};
obj2.__proto__=obj1;
let obj3={...obj2};

 

 

__proto__

對象的原型,建議實際開發中儘量不要用到

const obj={a:1};

 

 

Object.setPrototypeOf 修改對象的原型,性能比較低,不建議使用

const obj1={a:1};
const obj2={b:2};
const obj=Object.create(obj1);//以obj1為原型創建obj
console.log(obj.__proto__);//obj的原型
Object.setPrototypeOf(obj,obj2);//將obj的原型改為obj2
console.log(obj.__proto__);//obj的原型

 

 

Object.getPrototypeOf() 獲取對象的原型

const obj1={a:1};
const obj=Object.create(obj1);//以obj1為原型創建obj
console.log(obj.__proto__);//obj的原型
console.log(Object.getPrototypeOf(obj));//obj的原型
console.log(obj.__proto__===Object.getPrototypeOf(obj));//true

 

 

super 關鍵字,可以訪問到對象的原型,訪問到原型對象上的屬性和方法

使用this也是可以訪問到原型上的屬性的。在本代碼中,效果類似於super。

const obj1={myname:"cyy"};
const obj={
    say(){
        console.log(this.myname);
    }
}
Object.setPrototypeOf(obj,obj1);//修改obj的原型為obj1
obj.say();


const cobj1={name:"cyy"};
const cobj={
    say(){
        console.log(`${ super.name }`);//通過super訪問原型對象
    }
}
Object.setPrototypeOf(cobj,cobj1);//修改obj的原型為obj1
cobj.say();

 

 

只有對象的簡寫方式,可以用super;箭頭函數或者原來的語法,都不可以

//對象簡寫,可以用super
const cobj1={name:"cyy"};
const cobj={
    say(){
        console.log(`${ super.name }`);
    }
}
Object.setPrototypeOf(cobj,cobj1);
cobj.say();//cyy

//ES5,不能用super
const nobj1={name:"cyy"};
const nobj={
    say:function(){
        console.log(`${ super.name }`);
    }
}
Object.setPrototypeOf(nobj,nobj1);
nobj.say();//報錯


//箭頭函數,不能用super
const vobj1={name:"cyy"};
const vobj={
    say:()=>{
        console.log(`${ super.name }`);
    }
}
Object.setPrototypeOf(vobj,vobj1);
vobj.say();//報錯

 


您的分享是我們最大的動力!

更多相關文章
  • 7.關於pyinstaller打包生成exe的方法 安裝pip 、 pyinstaller 在pycharm 的Terminal視窗中輸入 註:輸入參數的含義 F 表示生成單個可執行文件 w 表示去掉控制台視窗,這在GUI界面時非常有用。不過如果是命令行程式的話那就把這個選項刪除吧! p 表示你自己 ...
  • 經常提到資料庫的事務,那你知道資料庫還有事務隔離的說法嗎,事務隔離還有隔離級別,那什麼是事務隔離,隔離級別又是什麼呢?本文就幫大家梳理一下。 MySQL 事務 本文所說的 MySQL 事務都是指在 InnoDB 引擎下,MyISAM 引擎是不支持事務的。 資料庫事務指的是一組數據操作,事務內的操作要 ...
  • 不適配深色模式 直接在info新加一個欄位 設置值為 適配深色模式 適配深色模式info裡面的那個欄位就不用添加了 但是需要在每個 裡面增加下麵的這個方法 在這個方法里去判斷和更改當前界面所有元素的顏色 我專門做了一個單例,把應用程式中的所有顏色都單獨保存起來 還有兩個方法,分別是把所有的顏色改成與 ...
  • 1.win10安裝ubuntu 18.04或Ubuntu發行版 搜索:Microsoft Store >搜索:Ubuntu //下載即可 >下載完之後安裝,啟動即可. 搜索:ubuntu啟動即可. 註意:源最好不要替換 2.安裝所需的庫 安裝emacs的cscope + autocomplete需要 ...
  • 本文旨在成為iOS動畫的入門讀物,目的是詳盡地介紹不同的實現方法。 鑒於該主題的廣泛性,我們將在相當高的層次上簡潔地涵蓋每個部分。這樣做的目的是通過一組選項來教育讀者將動畫添加到他/她的iOS應用程式中。 在我們開始討論與IOS相關的主題之前,讓我們先簡單地看一看動畫的速度。 60 Fps動畫 通常 ...
  • 商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。 For commercial use, please contact the author for authorization. For non commercial use, please indicate the source. 協議(Lice ...
  • 結合擴展運算符使用 function foo(a,b,c){ console.log(a,b,c); } foo(...[1,2,3]);//將數組展開,一一對應 用法: const arr=["cyy",18,["html","css"]]; function info(name,age,hobb ...
一周排行
  • 一、引言 按照專用隊列解釋: MachineName\Private$\QueueName,只針對於本機的程式才可以調用的隊列,有些情況下為了安全起見定義為私有隊列。所以剛開始的時候認為,要想訪問遠程消息隊列,只能使用公共隊列。但是後來發現,公共隊列依賴Domain Controller(域控),在 ...
  • 本文只對api介面,header請求參數進行簡單驗證,起到拋磚引玉使用,需要深入驗證,請自行擴展 項目目錄結構如圖 中間件類 using ApiMiddleware.Common.DataEnityModel; using ApiMiddleware.Common.DbContext; using ...
  • 前言:由於公司占時沒有運維,出於微服務的需要,Apollo只能先裝在windows 阿裡雲上跑起來,由於環境及網路等問題,在安裝過程中遇到很多坑,算是一個個坑填完後,最終實現。 一. java jdk環境 java jdk 1.8下載地址: https://www.oracle.com/java/t ...
  • 前言 nuget 是 .net 的常用包管理器,目前已經內置到 Visual Studio 2012 以後的版本。大多數 .net 包都托管在 nuget.org,包括 .net core 框架基礎包,得益於 .net core 的模塊化設計,很多非核心包都可以進行一定程度的獨立升級。 製作並上傳 ...
  • 簡單的介紹一下集合,通俗來講就是用來保管多個數據的方案。比如說我們是一個公司的倉庫管理,公司有一堆貨物需要管理,有同類的,有不同類的,總而言之就是很多、很亂。我們對照集合的概念對倉庫進行管理的話,那麼 數組就是將一堆貨整整齊齊的碼在倉庫的某個地方,普通列表也是如此;Set就是在倉庫里有這麼一個貨架, ...
  • 中間件分類 ASP.NET Core 中間件的配置方法可以分為以上三種,對應的Helper方法分別是:Run(), Use(), Map()。 Run(),使用Run調用中間件的時候,會直接返回一個響應,所以後續的中間件將不會被執行了。 Use(),它會對請求做一些工作或處理,例如添加一些請求的上下 ...
  • 字元串的常用操作 很好理解 字元串可以用 ' + ' 連接,或者乘一個常數重覆輸出字元串 字元串的索引操作 通過一對中括弧可以找到字元串中的某個字元 可以通過正負數雙向操作噢 用一個中括弧來實現 為什麼沒有-0??去清醒腦子想想 -0 和 0 有差嗎? 還有一個切片操作 就像切菜那樣簡單,同樣是中括 ...
  • title: Java基礎語法(3) 運算符 blog: "CSDN" data: "Java學習路線及視頻" 1.算術運算符 算術運算符的註意問題 如果對負數取模,可以把模數負號忽略不記,如:5% 2=1。 但被模數是負數則不可忽略。此外,取模運算的結果不一定總是整數。 對於除號“/”,它的整數除 ...
  • 下麵是互相轉換的代碼: 有想要瞭解更多關於python知識的請在下方評論或私信小編 ...
  • 引言 構建分散式系統並不容易。然而,人們日常所使用的應用大多基於分散式系統,在短時間內依賴於分散式系統的現狀並不會改變。ApacheZooKeeper旨在減輕構建健壯的分散式系統的任務。ZooKeeper基於 分散式計算的核心概念而設計,主要目的是給開發人員提供一套容易理解和開發的介面,從而簡化分佈 ...
x