ES6對象的擴展

来源:https://www.cnblogs.com/IwishIcould/archive/2022/11/24/16923833.html
-Advertisement-
Play Games

對象中可以直接寫變數 ES6 允許在大括弧裡面,直接寫入變數和函數,作為對象的屬性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo,value值是 foo變數對應的值 // 輸出的是 {foo: "bar"} console.log(obj ...


對象中可以直接寫變數

ES6 允許在大括弧裡面,直接寫入變數和函數,作為對象的屬性和方法。
const foo = 'bar';
const obj = {foo}; //key值就是foo,value值是 foo變數對應的值
// 輸出的是 {foo: "bar"}
console.log(obj)

對象中可以直接寫函數-省略了function 聲明
const obj = {
    method() {
        return "Hello!";
    }
};
// 等價於下麵的寫法。
const obj = {
    method: function() {
        return "Hello!";
    }
};

//輸出 Hello
console.log(obj.method())

屬性名錶達式

JavaScript 定義對象的屬性,有兩種方法。
// 方法一
let obj={}
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
console.log(obj)

屬性的可枚舉性

對象的每個屬性都有一個描述對象(Descriptor)用來控制該屬性的行為。
Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述對象。
感覺這個方法在實際中很少使用。
let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
輸出的值:
{
  configurable: true
  enumerable: true
  value: 123      //這個屬性的值
  writable: true  //這個屬性可以修好
}
其中描述對象的enumerable屬性,稱為“可枚舉性”。
如果該屬性為false,就表示某些操作會忽略當前屬性。

目前,有四個操作會忽略 enumerable 為 false 的屬性。

目前,有四個操作會忽略enumerable為false的屬性。
for...in迴圈:只遍歷對象自身的和繼承的可枚舉的屬性。  es5
Object.keys():返回對象自身的所有可枚舉的屬性的鍵名。es5
JSON.stringify():只串列化對象自身的可枚舉的屬性。  es5
Object.assign(): 忽略enumerable為false的屬性,只拷貝對象自身的可枚舉的屬性。可以進行淺拷貝。 es6
其中,只有for...in會返回繼承的屬性,其他三個方法都會忽略繼承的屬性,只處理對象自身的屬性。

引入“可枚舉”(enumerable)的目的

實際上,引入“可枚舉”(enumerable)這個概念的最初目的:就是讓某些屬性可以規避掉for...in操作。
不然所有內部屬性和方法都會被遍歷到。這樣影響性能。
比如,對象原型的toString方法,以及數組的length屬性,就通過“可枚舉性”,從而避免被for...in遍歷到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面代碼中,toString和length屬性的enumerable都是false。
因此for...in不會遍歷到這兩個繼承自原型的屬性

另外,ES6 規定,所有 Class 的原型的方法都是不可枚舉的。
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

屬性的遍歷

ES6 一共有 5 種方法可以遍歷對象的屬性。
(1)for...in
for...in迴圈遍歷對象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)。

(2)Object.keys(obj)
Object.keys返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名。

(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一個數組,包含對象自身的所有屬性(不含 Symbol 屬性,但是包括不可枚舉屬性)的鍵名。

(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一個數組,包含對象自身的所有 Symbol 屬性的鍵名。

(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一個數組,包含對象自身的(不含繼承的)所有鍵名,不管鍵名是 Symbol 或字元串,也不管是否可枚舉

對象的解構賦值

解構賦值:對象的解構賦值用於從一個對象中取值,
相當於將目標對象自身的所有可遍歷的(enumerable)、但尚未被讀取的屬性,分配到指定的對象上面。
所有的鍵和它們的值,都會拷貝到新對象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

對象的解構賦值的-4個註意點
第一個:
由於解構賦值要求等號右邊是一個對象,所以如果等號右邊是undefined或null,就會報錯,因為它們無法轉為對象。
let { ...z } = null; // 運行時錯誤
let { ...z } = undefined; // 運行時錯誤

let { ...a } = {}; //不會報錯
console.log(a) //輸出的是對象 {}

第二個:
// 解構賦值必須是最後一個參數,否則會報錯。
let { ...x, y, z } = {name:'張',age:12,num:1900, sex:'男'}; // 句法錯誤:因為不是最後一個值
console.log(x) //會報錯

第三個:
註意,解構賦值的拷貝是淺拷貝。
即如果一個鍵的值是複合類型的值(數組、對象、函數)、
那麼解構賦值拷貝的是這個值的引用,而不是這個值的副本。
下麵特別說明:解構賦值的拷貝是淺拷貝

第四個:
擴展運算符的解構賦值,不能複製繼承自原型對象的屬性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

解構賦值的拷貝是淺拷貝

Let oldObj={
  code: 500,
  isAxiosError: true,
  request:  {
    onreadystatechange: null,
    readyState: 4,
    timeout: 30000,
    withCredentials: false,
    upload: XMLHttpRequestUpload,
  },
  response: undefined
}
//淺拷貝
let {...newObj } = oldObj
// 更改了新對象的值,
newObj.code=200
console.log('oldObj.code', oldObj.code) //輸出 500
console.log('newObj.code', newObj.code) //輸出 200

// 下麵證明是淺拷貝
newObj.request.readyState=2
//更改新對象後,原始對象的值也跟著修改了。
console.log('oldObj.request.readyState', oldObj.request.readyState) //輸出 2
console.log('newObj.request.readyState', newObj.request.readyState) //輸出 2
說明瞭是淺拷貝

擴展運算符擴展函數的參數

函數wrapperFunction在baseFunction的基礎上進行了擴展,
能夠接受多餘的參數,並且保留原始函數的行為。
這一種經常是用在封裝一個方法。這個方法的參數是未知的。
這個時候就可以考慮使用擴展運算符 如下:
function Aa(a,b,...obj){
  console.log('a',a)
  console.log('b',b)
  // 竟然是一個數組 [{name: "詹桑", age: 10, sex: "男"}]
  console.log('obj',obj)
}
Aa('123','345',{name:'詹桑', age:10, sex:'男'})

擴展運算符--用於對象

對象的擴展運算符(...)用於取出對象的所有可遍歷屬性,拷貝到當前對象之中。
let obj = { a: 3, b: 4 };
let newObj = { ...obj };
newObj // { a: 3, b: 4 }

擴展運算符--用於數組

由於數組是特殊的對象,所以對象的擴展運算符也可以用於數組。
let oldArrr = { ...['a', 'b', 'c'] };
oldArrr
// {0: "a", 1: "b", 2: "c"}

擴展運算符--用於類

對象的擴展運算符,只會返回參數對象自身的、可枚舉的屬性,這一點要特別小心。
尤其是用於類的實例對象時。
class C {
  p = 12;
  m() {}
}

let c = new C();
let clone = { ...c };

clone.p; // ok
clone.m(); // 報錯

c是C類的實例對象,對其進行擴展運算時,只會返回c自身的屬性c.p。
而不會返回c的方法c.m(),因為這個方法定義在C的原型對象上

對象的擴展運算符等同於使用 Object.assign()方法

let aClone = { ...a };
// 等同於
let aClone = Object.assign({}, a);


擴展運算符可以用於合併兩個對象。
let ab = { ...a, ...b };
// 等同於
let ab = Object.assign({}, a, b);

遇見問題,這是你成長的機會,如果你能夠解決,這就是收穫。

作者:晚來南風晚相識
出處:https://www.cnblogs.com/IwishIcould/

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關註博主,在此感謝!

萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段聲明,在文章頁面明顯位置給出原文連接
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。

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

-Advertisement-
Play Games
更多相關文章
  • 在進行對接數據時,經常會遇到對接的是介面數據。 關於在對接介面類型的數據,數據返回的為json數組形式的數據,需要講數組先解析出來,主要是通過 jsonpath 表達式 。 jsonpath 表達式 : 1、JSONPath是xpath在json的應用2、JSONPath 是參照xpath表達式來解 ...
  • 在實際使用時,必不可少地需要將多個文檔甚至是多個集合彙總到一起計算、分析,MongoDB 提供了原生聚合框架支持這樣的計算、分析。 ...
  • 一、創建表的完整語法 1、創建表的語法 create table 表名( ​ 欄位名1 欄位類型(數字) 約束條件, ​ 欄位名2 欄位類型(數字) 約束條件, ​ 欄位名3 欄位類型(數字) 約束條件,...) 2、創建表的條件 create table: 創建表的關鍵字 表名:表的名字 欄位名: ...
  • 一、SQL與NoSQL ​ 資料庫服務端可以服務多種類型的客戶端 ​ 客戶端可以是自己開發的,也可以是python代碼編寫的,也可以是其他編程語言編寫的 SQL 操作關係型數據的語言 NoSQL 操作非關係型數據的語言 須知: ​ 1、SQL有時又也指代關係型資料庫 ​ 2、NoSQL有時候也指代非 ...
  • 一、MySQL簡介 ​ MySQL是一種關係型資料庫管理系統,關係資料庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。 二、安裝與下載 1、下載流程 1、訪問官方(www.mysql.com) 2、點擊‘DOWNLOADS’,進入下載界面 3、下拉,找到‘ ...
  • 關於 uniapp 獲取已安裝應用列表 uniapp 中返回的數據問題 獲取所有安裝的app 判斷是否是系統應用 獲取詳細app信息 遇到的問題 參考文檔 uniapp 中返回的數據問題 在uniapp中有時候放回的數據是 一個對象裡面(如下麵所示這種)根本不知大怎麼處理,查閱資料也沒相關資料,只能 ...
  • Android開發之線程間通信 當我們的軟體啟動的時候,電腦會分配進程給到我們運行的程式,在進程中包含多個線程用於提高軟體運行速度。 在android網路請求中,我們知道在日常開發中不能在子線程中跟新ui,否則報錯Only the original thread that created a vi ...
  • 現如今, AR技術不斷發展,人們不再滿足於運用鍵盤、滑鼠等簡單器械來實現傳統的人機交互模式。隨著用戶接觸機器的多樣化,繁瑣的操作不但對一些用戶有門檻,而且還增加其學習成本;如果能用自然且符合日常生活習慣的人機交互模式,不僅更好上手,也能讓開發者們在應用內開發更多玩法。比如在視頻直播或者拍照過程中,一 ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...