ES6-9 對象密封4種方式、assign、取值函數的拷貝

一 對象密封

1 Object.preventExtensions 禁止對象拓展,仍可刪除

  • 嚴格模式下報錯
const origin = {a: 1
}
const fixed = Object.preventExtensions(origin)
console.log(origin === fixed) // true
console.log(Object.isExtensible(origin)) // false 不可拓展
origin.b = 100
console.log(origin) // 不變

2 Object.defineProperty

const obj = {}
obj.b = 1 // 屬性描述符全是true
console.log(Object.getOwnPropertyDescriptor(obj, 'b'))
Object.defineProperty(obj, 'c', {value: 100 // 屬性描述符全是false
})
console.log(Object.getOwnPropertyDescriptor(obj, 'c'))

3 Object.seal 對象密封 禁止拓展+不可刪除,仍可修改

  • 嚴格模式下報錯
const origin = {a: 1
}
const fixed = Object.seal(origin)
console.log(origin === fixed) // true
console.log(Object.isSealed(origin)) // true 密封的
console.log(Object.isExtensible(origin)) // false 不可拓展
delete origin.a 
console.log(origin) // 不變,不可刪除
origin.a = 100
console.log(origin) // 不可刪除, 仍可修改

4. Object.freeze - 凍結的 不可增刪改

const origin = {a: 1
}
const fixed = Object.freeze(origin)
console.log(origin === fixed) // true
console.log(Object.isFrozen(origin)) // true 凍結的
console.log(Object.isSealed(origin)) // true 密封的
console.log(Object.isExtensible(origin)) // false 不可拓展
origin.a = 100
console.log(origin) // 不可修改

二 Object.is

console.log(NaN === NaN) // false
console.log(+0 === -0) // true 
console.log(Object.is(NaN, NaN)) // true 和全等不同的
console.log(Object.is(+0, -0)) // false 和全等不同的
console.log(Object.is({}, {})) // false

三 Object.assign(tar, …sources) 合并對象

const tar = {}
const obj = {a: 1}
const copy = Object.assign(tar, obj)
console.log(copy === tar) // true
// 直接使用tar
  • 屬性覆蓋:取后寫的

  • 當tar是不能轉為對象的原始值null/undefined時,報錯
    在這里插入圖片描述
    在這里插入圖片描述

  • source能轉成對象,且屬性的可枚舉性為真,則可以合并得到新的對象
    在這里插入圖片描述

  • source為數組時
    在這里插入圖片描述

  • Object.assign拷貝的是可枚舉屬性,繼承屬性和不可枚舉屬性不可拷貝
    在這里插入圖片描述

const obj = Object.create({ foo: 1 }, {bar: {value: 2 // 只可讀},baz: {value: 3,enumerable: true}
})
console.log(obj)
console.log(Object.getOwnPropertyDescriptor(obj, 'bar'))
console.log(Object.getOwnPropertyDescriptor(obj, 'foo')) // 拿不到繼承屬性的屬性描述符
const copy = Object.assign({}, obj)
console.log(copy)
console.log(Object.assign(obj, { extra: 100 }))

Object.assign是淺拷貝

  • 在嵌套的對象里要尤其注意
    在這里插入圖片描述

嵌套對象,同名屬性會被后者替換

console.log(Object.assign([1,2,3],[4,5]))
// {0: 4, 1: 5, 2: 3}

含getter

在這里插入圖片描述
在這里插入圖片描述

含setter

在這里插入圖片描述
在這里插入圖片描述

const obj1 = {set a(val) {this._a = val}
}
obj1.a = 100
const obj2 = Object.assign({}, obj1)
console.log(obj2)

擴充原型上的方法、屬性

function Person() { }
Object.assign(Person.prototype, {name: 'hh',eat() { }
})
console.log(Person.prototype)

設置默認項

const DEFAULT = {url: {host: 'www.baidu.com',port: 80}
}
function test(opt) {opt = Object.assign({}, DEFAULT, opt)console.log(opt)
}
test({url: { port: 8080 }
})
test()

在這里插入圖片描述

四 Symbol 原始類型

  • 可以看成永遠不會重復的字符串
const a = Symbol('1')
const b = Symbol('1')
console.log(a) // Symbol(1)
console.log(b) // Symbol(1)
console.log(a === b) // false
console.log(a == b) // false

五Object.defineProperties/getOwnPropertyDescriptors

  • 獲取多個描述/定義多個屬性
const obj1 = {}
Object.defineProperty(obj1, 'a', {value: 'a'
})Object.defineProperties(obj1, {b: {value: 'b'},c: {value: 'c'},
})
console.log(Object.getOwnPropertyDescriptor(obj1, 'a'))
console.log(Object.getOwnPropertyDescriptor(obj1, 'b'))
console.log(Object.getOwnPropertyDescriptor(obj1, 'c'))
console.log(Object.getOwnPropertyDescriptors(obj1))

在這里插入圖片描述

  • 解決Object.assign不能拷貝setter/getter的問題
const source = {set foo(val) {this.a = val}
}
console.log(source)
const tar = {}
Object.defineProperties(tar, Object.getOwnPropertyDescriptors(source))
console.log(tar)
console.log(Object.getOwnPropertyDescriptors(tar))
tar.foo = 100
console.log(tar)

在這里插入圖片描述

  • 拷貝
const source = {a: 100,set foo(val) {this.a = val}
}
const clone = Object.create(Object.getPrototypeOf(source), Object.getOwnPropertyDescriptors(source))
console.log(clone)
clone.foo = 101
console.log(clone)

在這里插入圖片描述

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

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

相關文章

MySQL入門命令

我主要是在維護OpenStack云平臺的時候會涉及MySQL數據庫的操作,這里就跟大家分享一下常用的簡單命令,也為自己做個小練習。 1.登錄MySQL數據庫 mysql -h localhost -u root -p 123456 其中,-h:mysql服務器的IP地址或主機名&#x…

【模板】分塊

題意簡述 已知一個數列,你需要進行下面兩種操作: 1.將某區間每一個數加上x 2.求出某區間每一個數的和 題解思路 對于一個長度為n的序列,我們可以講其中的元素分為\( \sqrt{n} \) 個連續的子序列,每塊的長度自然就為\( \sqrt{n} \)…

javascript --- 使用ajax與服務器進行通信

Ajax: (Asynchronous JavaScript and XML,異步JavaScript與XML技術)是一種有效利用JavaScript和DOM的操作. 與傳統HTTP請求的區別: Ajax允許只更新頁面的一部分,因此減少了響應中傳輸的數據量 Ajax的API: Ajax與服務器進行通信,可以使用JavaScript中原生的XMLHttpRequest對象…

ES6-10 super、4種遍歷方式、原型、symbol遍歷

由于現代 JavaScript 引擎優化屬性訪問所帶來的特性的關系,更改對象的 [[Prototype]]即__proto__在各個瀏覽器和 JavaScript 引擎上都是一個很慢的操作。 一 Object原型方法 1 Object.setPrototypeOf(obj, proto) 用該方法而不是直接修改__proto__返回值是設置好原…

IntelliJ IDEA使用

1:下載 ideaIU-2017.2.exe,JetbrainsCrack-2.6.2.jar(補丁) 2:安裝ideaIU-2017.2.exe,將補丁放在D:\java\intellij\IntelliJ IDEA 2017.2\bin 目錄下 3:在安裝的idea下面的bin目錄下面有2個文件 : 一個是id…

js中如何刪除json對象的某一個選項

我有一個這樣一個對象,getData, 但是我不想要每一項的id,那怎么去刪除呢(使用delete)? getData.map((item) >{delete item["id"];});console.log(getData);轉載于:https://www.cnblogs.com/mmykdbc/p/8386407.html

ES6-11 Symbol、iterator、forOf、typeArray

…剩余運算符 const obj1 {a: 1,b: 2 } const obj2 {a: 100,b: 2,c: 300 } const obj {...obj1,...obj2 } console.log(obj) // 和Object.assign(obj, obj1, obj2)結果相同[Symbol.hasInstance] Symbol構造函數上的屬性,默認調用了方法 iterator迭代器 對數…

node --- 游走在客戶端和服務器間的http

本篇文章,講述了一個很簡單的上傳圖片(/start)到本地服務器,然后路由跳轉到/upload. 寫這個程序的目的是為了幫助理解HTTP的一些基本概念及node對于http api的實現以及程序的設計模式. IP: 計算機之間的通信 TCP: 應用程序之間的通信 HTTP: 基于TCP實現的應用層協議,設計之初是…

BigDecimal踩過的大坑

通常Java中涉及金錢相關的計算為了保持精度,會采用BigDecimal來實現,但是BigDecimal中創建BigDecimal類對象的時候,如果使用直接new的話,必須是String類型的參數,否則會導致創建出來的對象不是你想要的,比如…

redis配置環境變量

直接上圖不解釋 redis安裝路徑,我的電腦右擊屬性 窗口R鍵,輸入cmd回車,輸入redis-server.exe 回車 再開一個命令窗口,窗口R鍵,輸入cmd回車,輸入 redis-cli.exe -h 127.0.0.1 -p 6379 回車 轉載于:https:/…

對轉義字符的思考

ASCII碼 計算機存儲文字時用的是二進制,ASCII碼就是一張對照表,什么字符對應什么碼,將二進制碼存儲下來0-127位表示基礎的ASCII碼0-31,和127表示非打印控制字符(如換行、回車、響鈴、文頭、文尾)32-126表示…

進程總結

進程總結 進程: 正在進行的一個過程或者說一個任務 進程是計算機中資源分配的最小單位 多進程之間的數據是隔離的 多進程是用來解決高計算型的程序用的 啟動進程的開銷比較大,其開啟數量和cpu的個數相關,正常在cpu的個數1-2倍之間 進程越多&a…

debian如何安裝Let's Encrypt

如果python默認版本不是2,刪除 /usr/bin/python 添加軟引用 in -s /usr/bin/python2 /usr/bin/python 第一步,卸載virtualenv apt-get purge python-virtualenv python3-virtualenv virtualenv 如果pip沒有就安裝pip apt-get install python-pip pip …

算法 --- 判斷某個值是否在二叉搜索樹中

function funA(root, k) {if(root null) {return false} else {if(k root.val) {return true } else {if( k < root.val) {return funA(root.left, k)} else {return funA(root.right, k)}}} }

ES6-12 array/數值拓展、ArrayOf、ArrayFrom

要使用…須有迭代器接口 數組方法 構造器上的方法 Array.of()聲明數組 替代new Array()的方式聲明數組new Array()不傳參數返回空數組&#xff0c;只傳1個參數時&#xff0c;代表數組長度&#xff0c;內容用empty填充&#xff0c;傳多個參數&#xff0c;則代表數組內容&…

React01

目錄 React-day01 入門知識React介紹官網React開發環境初始化 SPA腳手架初始化項目&#xff08;方便&#xff0c;穩定&#xff09;*通過webpack進行初始化配置鏡像地址開發工具配置元素渲染組件及組件狀態函數定義組件(無狀態)類定義組件(有狀態)*組合組件Props屬性*State狀態*…

算法 --- 反轉數組

幾個注意點: 1.輸出的時候,也要做數字超出處理 2.js中可以使用 str -0 將字符串類型轉換成數字類型 ( 注意不是 0) 3.可以使用 num ‘’ 將數字類型轉換成字符串類型 4.使用str.split(’’) 可以將字符串轉換成數組 5.使用arr.join(’’) 可以將數組轉換成字符串 6.JS中2的31次…

ES6-13 正則方法、修飾符yus、UTF_16編碼方式

修飾符 m multiLine 對于str中含\n的情況g globali ignoreCase 元字符 反斜杠加轉義 元字符含義簡寫\w匹配字母、數字、下劃線。等價于’[A-Za-z0-9_]’。word\W匹配非字母、數字、下劃線。等價于 ‘[^A-Za-z0-9_]’。\s匹配任何空白字符&#xff0c;包括空格、制表符、換頁…

svn文件大小類型限制,提交必須加多少字的說明

#!/bin/shREPOS"$1" TXN"$2" #此處更改大小限制&#xff0c;這里是5M MAX_SIZE5242880 #此處增加限制文件后綴名 FILTER\.(zip|rar|o|obj|tar|gz)$SVNLOOK/usr/bin/svnlookLOGMSG$SVNLOOK log -t "$TXN" "$REPOS" | wc -cif [ "$…

cmd窗口快速定位到具體文件夾方法

在用Python進行機器實戰時&#xff0c;打開cmd窗口后&#xff0c;總是到定位到kNN.py所在文件夾才能Python&#xff08;否則import kNN失敗&#xff09;&#xff0c;每次都要輸入地址非常麻煩 這里介紹一個cmd窗口快速定位到具體文件夾方法&#xff1a; 按住Shift鍵右擊鼠標打開…