ES6實用方法Object.assign、defineProperty、Symbol

文章目錄

          • 1.合并對象 - Object.assign()
            • 介紹
            • 進階
            • 注意
            • 用途
          • 2.定義對象 - Object.defineProperty(obj, prop, descriptor)
          • 3.新數據類型- Symbol
            • 定義
            • 應用

1.合并對象 - Object.assign()
介紹
  • assign方法可以將多個對象(字典),語法:Object.assign(srcObj,obj1,obj2…)
  • 對于重復的鍵將會被覆蓋(尤其注意對象被覆蓋),對于可枚舉(迭代)參數(被合并對象)若不是對象則自動轉換成對象合并(如string,[]),對于不可枚舉參數(undefined,null)會自動跳過。
  • 若源對象(第一個參數)不可枚舉則會報錯
let srcObj= { a: 'a',b:'b',obj:{title:"我要被覆蓋了"} },
obj1 = { b: 2 }, 
obj2 = { c: 3 },
str3 = "字符串",
num4 = 5;
obj = {newTitle:"我是新的title"} // 1.合并、重復覆蓋、自動轉換成對象合并、自動跳過舉例:
console.log(Object.assign(srcObj, obj1 , obj2, str3, num4,obj));
// {a:'a',b:'2',c:3,0: "字",1: "符",2: "串",obj:{newTitle:"我是新的title"}}// 2.報錯
Object.assign(null, obj1 , obj2 )) 
進階
  • 當聲明一個對象時,它的enumerable屬性默認是true,我們也可以顯示的將它設為false,所以說對象不一定都是可迭代的(眼見不一定為實),但可以通過’.'取到。
  • 若拷貝類型是Symbol 類型也會被拷貝。Symbol :和int、float等一樣是數據類型,只不過他是隱藏類型,直接訪問是取不到的
// 1.跳過不可迭代的對象
var unEnumer = Object.defineProperty({}, "k", {enumerable: false,value: "hello"}), // {k:"hello"}// 這樣定義對象,任何值都能作為鍵(被視為字符串)enumer = Object.defineProperty({}, null,{enumerable: true,value: "hello"}) // {"null":"hello"}
console.log(Object.assign( { b: "c" },unEnumer ,enumer ));
// {b: "c",null: "hello"}// 2.合并Symbol 類型,既可以當鍵也可以當值console.log(Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' },{'e':Symbol('f')}))
// {a: "b", e: Symbol(f), Symbol(c): "d"}
注意
  • 拷貝后的數據間的影響關系
  • 拷貝對象是數組則按照字典處理,數組很好理解成字典,如[‘a’,‘b’,‘c’],實際上會自動分配鍵,等價于{0:‘a’,1:‘b’,2:‘c’},所以處理規則同字典一樣。
  • 對取值函數與賦值函數的處理
// 1.影響關系
var obj1 = { a: 1 },obj2={b:{c:1}};
var obj = Object.assign({}, obj1,obj2);
obj1.a = 2 // 不影響
obj2.b.c = 3 // 影響
console.log(obj,obj1,obj2) // {a: 1,b: {c: 3}}// 2.處理數組
console.log(Object.assign([1, 2, 3], [4, 5])) // 合并完還是數組 [4, 5, 3]
console.log(Object.assign({0:1,3:3}, [4, 5])) // 合并完是對象 {0: 4, 1: 5, 3: 3}
console.log(Object.assign( [4, 5],{0:1,3:3})) // 合并完還是數組 [1, 5, empty, 3]  empty?// 3.對取值函數處理和賦值函數處理
var obj1={get foo(){return "a"}},
obj2={foo:()=>{return "a"}}
console.log(obj1) // foo: "a",obj1.foo得到的是函數執行結果,計算屬性原理?
console.log(obj2) // foo: ? foo(),obj2.foo得到的是函數地址
console.log(Object.assign({},{get obj1(){return "a"}},{obj2:()=>{return "a"}})) // {obj1: "a",obj2: ? obj2()}
用途
  • 為對象添加屬性,方法
  • 克隆對象,結合新語法合并多個對象
  • 為屬性指定默認值
// 1.為對象同時添加(更新)多個屬性、方法
var obj = {title:"標題",dateStamp:"2020/5/22"},
newProp = {get dateStamp(){ return Date.now()},text:"新屬性",fun1(){return "新方法"}};
console.log(Object.assign(obj, newProp)) // {title: "標題", dateStamp: 1590119249783, text: "新屬性", fun1: ?}// 2.克隆
var obj = {};
var obj1 = { a: 1 };
Object.defineProperty(obj1, "k", {enumerable: true,// value: "hello",get() {console.log("獲取obj1的k值");} // 當使用了getter或setter方法,不允許使用writable和value這兩個屬性?   });
console.log(Object.assign(obj, obj1)); // 獲取obj1的k值 {a: 1, k: undefined}
console.log(Object.assign(obj, obj1).k); // 獲取obj1的k值 undefined
console.log(obj1.k); // 獲取obj1的k值 undefined
// 采用這種方法克隆,只能克隆原始對象自身的值,不能克隆它繼承的值(什么意思?)// 3.為對象指定默認值和屬性
const defaultVal = {title: "未定義",time: "0"};
var obj = {},
obj1 = {};
Object.defineProperty(obj1, "title", {enumerable: true,// value: "hello",get() {console.log("獲取obj的title值");return "標題"}
});
// 注意順序,先默認值,再配置屬性,obj在最后
console.log(Object.assign({}, defaultVal,obj1,obj));
2.定義對象 - Object.defineProperty(obj, prop, descriptor)

定義屬性:Object.defineProperty(obj, prop, descriptor)

屬性在創建對象時就定義好了,所有特性的默認值都為true;而當使用defineProperty添加的屬性,特性的默認值都為false。當使用了getter或setter方法,不允許使用writable和value這兩個屬性?

obj ,待修改的對象
prop ,帶修改的屬性名稱
descriptor ,待修改屬性的相關描述

configurable ,屬性是否可配置。可配置的含義包括:是否可以刪除屬性( delete ),是否可以修改屬性的 writable 、 enumerable 、 configurable 屬性。 改為false之后,不能刪除修改(不可逆)。默認true

enumerable ,屬性是否可枚舉。可枚舉的含義包括:是否可以通過 for…in 遍歷到,是否可以通過 Object.keys() 方法獲取屬性名稱,是改為false,for in時不會被遍歷,但使用 "."依然可訪問。默認true

writable ,是否為可寫,改為false,當前屬性變為只讀。。默認true

value ,屬性的默認值。

set ,屬性的重寫器(暫且這么叫)。一旦屬性被重新賦值,此方法被自動調用。

get ,屬性的讀取器(暫且這么叫)。一旦屬性被訪問讀取,此方法被自動調用。

3.新數據類型- Symbol

Symbol是由ES6規范引入的一項新特性,它的功能類似于一種標識唯一性的ID。

定義
    let s1 = Symbol();let s2 = Symbol("another symbol"); // 傳入描述信息 可以是任何可以被轉型成字符串的值,如:字符串、數字、對象、數組等let s3 = Symbol();console.log(s1,s2,s3)console.log(typeof s1); // 'symbol'console.log(s1===s2,s1===s3); // false - 每個Symbol實例都是唯一的。
應用
  • 由于Symbol類型的key是不能通過Object.keys()或者for…in來枚舉的,它未被包含在對象自身的屬性名集合(property names)之中,所以可以把一些不需要對外操作和訪問的屬性使用Symbol來定義,作為對象的鍵(唯一);
  • 因為這個特性,當使用JSON.stringify()將對象轉換成JSON字符串的時候,Symbol屬性也會被排除在外
  • 定義常量不用再去想值的內容了
  • 安全性高
  • 多模塊共享唯一
	const NAME = Symbol("it`s const key");const AGE = Symbol("it`s const key");let obj = {[NAME]: "默認名稱"};obj[AGE] = "賦值年齡";// 訪問console.log(obj[NAME],obj[AGE]) // 默認名稱, 賦值年齡// 獲取所有1console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]// 獲取所有2console.log(Reflect.ownKeys(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]// 定義常量不用再去想值的內容了const id = Symbol(); // id - 唯一// 注冊全局Symbol,實現多模塊共享唯一Symbollet s1 = Symbol.for("global_symbol_1"); //注冊一個全局Symbollet s2 = Symbol.for("global_symbol_1"); //獲取全局Symbol,注意描述一直才行let s3 = Symbol.for("global_symbol_3");console.log(s1 === s2); // trueconsole.log(s1 === s3); // false

未完待續…

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/278707.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/278707.shtml
英文地址,請注明出處:http://en.pswp.cn/news/278707.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Enable Authentication on MongoDB

1、Connect to the server using the mongo shell mongo mongodb://localhost:270172、Create the user administrator Change to the admin database: use admindb.createUser({user: "Admin",pwd: "Admin123",roles: [ { role: "userAdminAnyDataba…

windows驅動程序編寫_如何在Windows中回滾驅動程序

windows驅動程序編寫Updating a driver on your PC doesn’t always work out well. Sometimes, they introduce bugs or simply don’t run as well as the version they replaced. Luckily, Windows makes it easy to roll back to a previous driver in Windows 10. Here’s…

運行tomcat報Exception in thread ContainerBackgroundProcessor[StandardEngine[Catalina]]

解決方法1: 手動設置MaxPermSize大小,如果是linux系統,修改TOMCAT_HOME/bin/catalina.sh,如果是windows系統,修改TOMCAT_HOME/bin/catalina.bat, 在“echo "Using CATALINA_BASE: $CATALINA_BASE&q…

new子類會先運行父類的構造函數

發現子類構造函數運行時,先運行了父類的構造函數。為什么呢? 原因:子類的所有構造函數中的第一行,其實都有一條隱身的語句super(); super(): 表示父類的構造函數,并會調用于參數相對應的父類中的構造函數。而super():是在調用父類…

在Windows 7中的Windows Media Player 12中快速預覽歌曲

Do you ever wish you could quickly preview a song without having to play it? Today we look at a quick and easy way to do that in Windows Media Player 12. 您是否曾經希望無需播放就可以快速預覽歌曲? 今天,我們探討一種在Windows Media Play…

Vue.js中的8種組件間的通信方式;3個組件實例是前6種通信的實例,組件直接復制粘貼即可看到運行結果

文章目錄一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex實例以element ui為例。例子從上往下逐漸變復雜(后面例子沒有刪前面的無用代碼,有時間重新…

不可思議的混合模式 background-blend-mode

本文接前文:不可思議的混合模式 mix-blend-mode 。由于 mix-blend-mode 這個屬性的強大,很多應用場景和動效的制作不斷完善和被發掘出來,遂另起一文繼續介紹一些使用 mix-blend-mode 制作的酷炫動畫。 CSS3 新增了一個很有意思的屬性 -- mix-…

adb錯誤 - INSTALL_FAILED_NO_MATCHING_ABIS

#背景 換組啦,去了UC國際瀏覽器,被擁抱變化了。還在熟悉階段,嘗試了下adb,然后就碰到了這個INSTALL_FAILED_NO_MATCHING_ABIS的坑。。。 #解決方法 INSTALL_FAILED_NO_MATCHING_ABIS is when you are trying to install an app th…

如何更改從Outlook發送的電子郵件中的“答復”地址

If you’re sending an email on behalf of someone else, you might want people to reply to that person instead of you. Microsoft Outlook gives you the option to choose a different default Reply address to cover this situation. 如果您要代表其他人發送電子郵件&…

visio自定義圖形填充

選中圖形,最上面一欄:開發工具-操作(-組合-連接)-拆分

Ansible 詳解2-Playbook使用

aaa轉載于:https://www.cnblogs.com/Presley-lpc/p/10107491.html

Angular2官網項目 (4)--路由

行動計劃 把AppComponent變成應用程序的“殼”,它只處理導航 把現在由AppComponent關注的英雄們移到一個獨立的GeneralComponent中 添加路由 創建一個新的DashboardComponent組件 把儀表盤加入導航結構中 路由是導航的另一個名字。路由器就是從一個視圖導航到另…

在Windows 7或Vista資源管理器中禁用縮略圖預覽

If you want to speed up browsing around in explorer, you might think about disabling thumbnail previews in folders. 如果要加快在資源管理器中的瀏覽速度,可以考慮禁用文件夾中的縮略圖預覽。 Note that this works in Windows 7 or Vista 請注意&#xf…

rimraf 秒刪?node_modules

//第一次需要安裝刪除指令 npm install rimraf -g //進入對應目錄后卸載node依賴庫在這里插入代碼片 rimraf node_modules

[Halcon] 算子學習_Calibration_Calibration Object

find_caltab find_marks_and_pose   輸出參數StartPose是標定板的位姿  通過pose_to_hom_mat3d轉化為Hom矩陣可得到下面的關系 3D_Point_Coord_in_Cam Hom_Mat(StartPose) * 3D_Point_Coord_in_Cam ; 轉載于:https://www.cnblogs.com/LoveBuzz/p/10109202.html

mysql 表數據轉儲_在MySQL中僅將表結構轉儲到文件中

mysql 表數據轉儲For this exercise, we will use the mysqldump utility the same as if we were backing up the entire database. 在本練習中,我們將像備份整個數據庫一樣使用mysqldump實用程序。 Syntax: 句法: mysqldump -d -h localhost -u root -…

lenos快速開發腳手架

2019獨角獸企業重金招聘Python工程師標準>>> lenos一款快速開發模塊化腳手架, lenos(p為spring boot版本擴展名)一款快速開發模塊化腳手架,采用spring bootspringSpringMvcmybatisshiroswaggerehcachequartzfreemarkerlayui技術開發&#xff…

把angular(vue等)項目部署在局域網上

在cmd中輸入 ipconfig , 復制自己電腦的ipv4地址在啟動項目的時候加上 --host 192.167.8.100 (本機地址)在同一局域網下(wifi)其他設備訪問此地址端口號即可訪問此項目

luogu P2257 YY的GCD

嘟嘟嘟 感覺這幾道數論題都差不多,但這到明顯是前幾道的升級版。 推了一大頓只能得60分,不得不看題解。 各位看這老哥的題解吧 我就是推到他用\(T\)換掉\(kd\)之前,然后枚舉\(T\)的。這個轉換確實想不出來啊。 還有最后一句,最終的…

20.4. myisamchk — MyISAM Table-Maintenance Utility

先停止mysqld,在--datadir目錄運行 myisamchk */*.MYI >/dev/null #檢查哪些表需要修復修復用以下命令一個個修復: myisamchk -r table.MYI更省事的做法: myisamchk -r /var/lib/mysql/*.MYImyisamchk可用crontab定時最佳化tab…