點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號(hào)

回復(fù)算法，加入前端編程面試算法每日一題群

本文內(nèi)容：

1. 介紹對(duì)象的兩種類型
2. 創(chuàng)建對(duì)象并添加屬性
3. 訪問(wèn)對(duì)象屬性
4. 刪除對(duì)象屬性
5. 作為函數(shù)參數(shù)
6. 枚舉對(duì)象的屬性
7. 數(shù)據(jù)類型檢測(cè)
8. Object常用的API

一、JavaScript對(duì)象有兩種類型

1. Native：在ECMAScript標(biāo)準(zhǔn)中定義和描述，包括JavaScript內(nèi)置對(duì)象（數(shù)組，日期對(duì)象等）和用戶自定義對(duì)象；
2. Host：在主機(jī)環(huán)境（如瀏覽器）中實(shí)現(xiàn)并提供給開(kāi)發(fā)者使用，比如Windows對(duì)象和所有的DOM對(duì)象；

二、創(chuàng)建對(duì)象并添加成員

最簡(jiǎn)單的方法（即Object Literal，對(duì)象字面變量），之后便可以向它添加屬性。

字面量：字面量表示如何表達(dá)這個(gè)值，一般除去表達(dá)式，給變量賦值時(shí)，等號(hào)右邊都可以認(rèn)為是字面量。

// 1. 創(chuàng)建空對(duì)象后，在添加屬性
const obj = { }
obj.uname = 'dengke'
obj.fn = () => {
    console.log('ggg')
}
console.log(obj) // { uname: 'dengke', fn: ? }

// 2. 創(chuàng)建對(duì)象并且直接添加屬性 (常用)
const obj1 = {
    uname：'dengke',
    fn: () => {
        console.log('ggg')
    }
}
console.log(obj1) // { uname: "dengke", fn: ? }
復(fù)制代碼

補(bǔ)充

• 擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）也可以創(chuàng)建對(duì)象（返回一個(gè)新對(duì)象），注意這是一個(gè)淺拷貝

const obj = { name: 'dengke' }
const obj1 = { 
    age: 18,
    temp: {
        a: 10
    }
}

const obj2 = { ...obj, ...obj1 }
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 10 } }

obj2.temp.a = 20
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 20 } }
console.log(obj1) // { name: 'dengke', age: 18, temp: { a: 20 } }
復(fù)制代碼

三、訪問(wèn)對(duì)象屬性

const obj = {
    info: 'wakaka',
    inner: {
        a: 10,
        b: 20
    },
    arr: [1, 2],
    sayHi: (name) => {
        console.log(`hi,${name}`)
    }
}

// 用 dot(點(diǎn) .) 的方式訪問(wèn)
console.log(obj.info) // wakaka
console.log(obj.inner) // {"a":10,"b":20}
console.log(obj.arr) // [1,2]
obj.sayHi('dengke') // hi,dengke

// 用 [] 的方式訪問(wèn)
console.log(obj['info']) // wakaka
console.log(obj['inner']) // {"a":10,"b":20}
console.log(obj['arr']) // [1,2]
obj['sayHi']('dengke') // hi,dengke
復(fù)制代碼

補(bǔ)充

• 如果要訪問(wèn)的對(duì)象不存在，可以使用 邏輯運(yùn)算符 || 指定默認(rèn)值

只要“||”前面為false,不管“||”后面是true還是false，都返回“||”后面的值。

只要“||”前面為true,不管“||”后面是true還是false，都返回“||”前面的值。

console.log(obj.age || 18) // 18
復(fù)制代碼

• 很多時(shí)候，我們想根據(jù)這個(gè)值是否為空來(lái)做接下來(lái)的操作，可以使用空值運(yùn)算符 (??) （es11）

有一個(gè)冷門(mén)運(yùn)算符??可以判斷undefined和null，這樣是比較符合普遍需求的。

const age = 0 
const a = age ?? 123 
console.log(a) // 0
復(fù)制代碼

• 可選鏈?zhǔn)讲僮鞣?.） （es11）

這是當(dāng)對(duì)象上沒(méi)有這個(gè)鍵的時(shí)候，不會(huì)報(bào)錯(cuò)，而是賦值undefined

const foo = { name: "zengbo" } 
let a = foo.name?.toUpperCase() // "ZENGBO" 
let b = foo.name?.firstName?.toUpperCase() // "undefined"
復(fù)制代碼

四、刪除對(duì)象屬性

1. 利用關(guān)鍵字 `delete`
   

const o = {
    p: 10,
    m: 20
}

delete o.p
console.log(o) // { m: 20 }
// 刪除對(duì)象的屬性后，在訪問(wèn)返回 undefined
console.log(o.p) // undefined
復(fù)制代碼

五、作為函數(shù)參數(shù)

const displayPerson = (person) => {
    console.log(`name: ${person.name || '無(wú)名氏'}`)
     console.log(`age: ${person['age'] || 0}`)
}

displayPerson({ name: 'dengke', age: 18 })
// name: dengke
// age: 18

displayPerson({ })
// name: 無(wú)名氏
// age: 0
復(fù)制代碼

六、枚舉對(duì)象的屬性

在JS里面枚舉對(duì)象屬性一共有三種方法：

1. for in: 會(huì)遍歷對(duì)象中所有的可枚舉屬性（包括自有屬性和繼承屬性）
2. Object.keys(): 會(huì)返回一個(gè)包括所有的可枚舉的自有屬性的名稱組成的數(shù)組
3. Object.getOwnPropertyNames(): 會(huì)返回自有屬性的名稱 （不管是不是可枚舉的）

1. for...in 會(huì)遍歷對(duì)象中所有的可枚舉屬性（包括自有屬性和繼承屬性）

const obj = {
    itemA: 'itemA',
    itemB: 'itemB'
}

// 使用Object.create創(chuàng)建一個(gè)原型為obj的對(duì)象 （模擬繼承來(lái)的屬性）
var newObj = Object.create(obj) 

newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'

for(i in newObj){
    console.log(i)
}
// newItemA
// newItemB
// itemA
// itemB

// 現(xiàn)在我們將其中的一個(gè)屬性變?yōu)椴豢擅杜e屬性
Object.defineProperty(newObj, 'newItemA', {
    enumerable: false
})

for(i in newObj){
    console.log(i)
}
// newItemB
// itemA
// itemB
復(fù)制代碼

補(bǔ)充

如果不想讓for...in枚舉繼承來(lái)的屬性可以借助Object.prototype.hasOwnProperty()

// 接上例
for(i in newObj){
    if( newObj.hasOwnProperty(i) ) console.log(i)
}
// newItemB
復(fù)制代碼

Object.prototype.hasOwnProperty()該方法在下文有更具體的介紹

2. Object.keys(): 會(huì)返回一個(gè)包括所有的可枚舉的自有屬性的名稱組成的數(shù)組

// 接上例
const result = Object.keys(newObj)

console.log(result) // ["newItemB"]
復(fù)制代碼

Object.keys()該方法在下文有更具體的介紹

3. Object.getOwnPropertyNames() 會(huì)返回自有屬性的名稱 （不管是不是可枚舉的）

// 接上例
const result = Object.keys(newObj)

console.log(result) // ['newItemA','newItemB']
復(fù)制代碼

Object.getOwnPropertyNames()該方法在下文有更具體的介紹

七、數(shù)據(jù)類型檢測(cè)

• typeof 常用 多用于原始數(shù)據(jù)類型的判斷

const fn = function(n){
  console.log(n)
}
const str = 'string'
const arr = [1,2,3]
const obj = {
   a:123,
   b:456
}
const num = 1
const b = true
const n = null     
const u = undefined

console.log(typeof str) // string
console.log(typeof arr) // object
console.log(typeof obj) // object
console.log(typeof num) // number
console.log(typeof b) // boolean
console.log(typeof n) // object null是一個(gè)空的對(duì)象
console.log(typeof u) // undefined
console.log(typeof fn) // function
復(fù)制代碼

通過(guò)上面的檢測(cè)我們發(fā)現(xiàn)typeof檢測(cè)的Array和Object的返回類型都是Object，因此用typeof是無(wú)法檢測(cè)出來(lái)數(shù)組和對(duì)象的。

• tostring 常用 最實(shí)用的檢測(cè)各種類型

我們經(jīng)常會(huì)把這個(gè)封裝成一個(gè)函數(shù)，使用起來(lái)更加方便

/**
* @description: 數(shù)據(jù)類型的檢測(cè)
* @param {any} data 要檢測(cè)數(shù)據(jù)類型的變量
* @return {string} type 返回具體的類型名稱【小寫(xiě)】
*/
const isTypeOf = (data) => {
    return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()
}

console.log(isTypeOf({})) // object
console.log(isTypeOf([])) // array
console.log(isTypeOf("ss")) // string
console.log(isTypeOf(1)) // number
console.log(isTypeOf(false)) // boolean
console.log(isTypeOf(/w+/)) // regexp
console.log(isTypeOf(null)) // null
console.log(isTypeOf(undefined)) // undefined
console.log(isTypeOf(Symbol("id"))) // symbol
console.log(isTypeOf(() => { })) // function
復(fù)制代碼

八、Object常用的API

1. Object.assign()

Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。常用來(lái)合并對(duì)象。

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 4, c: 5 }

const obj3 = Object.assign(obj1, obj2)

const obj4 = Object.assign({}, obj1) // 克隆了obj1對(duì)象

console.log(obj1) // { a: 1, b: 4, c: 5 } 對(duì)同名屬性b進(jìn)行了替換 obj1發(fā)生改變是因?yàn)閛bj2賦給了obj1

console.log(obj2) // { b: 4, c: 5 }

console.log(obj3) // { a: 1, b: 4, c: 5 }

console.log(obj4) // { a: 1, b: 4, c: 5 }

復(fù)制代碼

語(yǔ)法

Object.assign(target, ...sources)
復(fù)制代碼

• 參數(shù)：target 目標(biāo)參數(shù)，sources源對(duì)象

• 返回值：目標(biāo)對(duì)象

注意

• 如果目標(biāo)對(duì)象中的屬性具有相同的鍵，則屬性將被源對(duì)象中的屬性覆蓋。

• Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。

• assign其實(shí)是淺拷貝而不是深拷貝

也就是說(shuō)，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。同名屬性會(huì)替換。

const obj5 = {
  name: 'dengke',
    a: 10,
  fn: {
    sum: 10
  }
}

const obj6 = Object.assign(obj1, obj5)
console.log(obj6) // { a: 10, b: 2, name: 'dengke', fn: {…}}
console.log(obj1) // {a: 10, b: 2, name: 'dengke', fn: {…}} 對(duì)同名屬性a進(jìn)行了替換
復(fù)制代碼

• Object.assign 不會(huì)在那些source對(duì)象值為null或undefined的時(shí)候拋出錯(cuò)誤。

2. Object.keys()

上邊枚舉對(duì)象屬性時(shí)有用到了Object.keys()，在這里就具體為大家介紹一下它。

Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致。與Object.values()相似，區(qū)別在于這個(gè)返回的是數(shù)據(jù)的屬性就是key。接下來(lái)就會(huì)介紹Object.values()，不要著急。??

const arr = ['a', 'b', 'c']
console.log(Object.keys(arr)) // ['0', '1', '2']

const obj = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.keys(obj)) // ['0', '1', '2']

const obj2 = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(obj2)) // ['2', '7', '100']
復(fù)制代碼

語(yǔ)法

Object.keys(obj)
復(fù)制代碼

• 參數(shù)：obj要返回其枚舉自身屬性的對(duì)象。

• 返回值：一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組。

注意

• 在ES5里，如果此方法的參數(shù)不是對(duì)象（而是一個(gè)原始值），那么它會(huì)拋出 TypeError。在ES2015中，非對(duì)象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象。

Object.keys("foo") // TypeError: "foo" is not an object       (ES5 code)

Object.keys("foo") // ["0", "1", "2"]                         (ES2015 code)
復(fù)制代碼

3. Object.values()

Object.values() 方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。與Object.keys()相似，區(qū)別在于這個(gè)返回的是數(shù)據(jù)的值也就是value

const obj1 = { foo: 'bar', baz: 42 }
console.log(Object.values(obj1)) // ['bar', 42]

const obj2 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.values(obj2)) // ['a', 'b', 'c']
復(fù)制代碼

語(yǔ)法

Object.values(obj)
復(fù)制代碼

• 參數(shù)：obj被返回可枚舉屬性值的對(duì)象。

• 返回值：一個(gè)包含對(duì)象自身的所有可枚舉屬性值的數(shù)組。

注意

• 對(duì)象key為number的話，會(huì)從升序枚舉返回。

const obj3 = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.values(obj3)) // ['b', 'c', 'a']
復(fù)制代碼

4. Object.entries(obj)

Object.entries() 方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組。可使用Object.fromEntries()方法，相當(dāng)于反轉(zhuǎn)了Object.entries()方法返回的數(shù)據(jù)結(jié)構(gòu)。接下來(lái)也會(huì)介紹Object.fromEntries()

const obj1 = {
  name: 'dengke',
  age: 18
};

for (const [key, value] of Object.entries(obj1)) {
  console.log(`${key}: ${value}`);
}
// "name: dengke"
// "age: 18"

const obj2 = { foo: 'bar', baz: 42 }
console.log(Object.entries(obj2)) // [ ['foo', 'bar'], ['baz', 42] ]

const obj3 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.entries(obj3)) // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

復(fù)制代碼

語(yǔ)法

Object.entries(obj)
復(fù)制代碼

• 參數(shù)：obj可以返回其可枚舉屬性的鍵值對(duì)的對(duì)象。

• 返回值：給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組。

補(bǔ)充

• 將Object轉(zhuǎn)換為Map，new Map()構(gòu)造函數(shù)接受一個(gè)可迭代的entries。借助Object.entries方法你可以很容易的將Object轉(zhuǎn)換為Map:

const obj = { foo: "bar", baz: 42 }
const map = new Map(Object.entries(obj))
console.log(map) // Map { foo: "bar", baz: 42 }
復(fù)制代碼

5. Object.fromEntries()

Object.fromEntries() 方法把鍵值對(duì)列表轉(zhuǎn)換為一個(gè)對(duì)象。與Object.entries()相反。相當(dāng)于反轉(zhuǎn)了Object.entries()方法返回的數(shù)據(jù)結(jié)構(gòu)。（下面補(bǔ)充里有具體的演示）

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// Object { foo: "bar", baz: 42 }
復(fù)制代碼

語(yǔ)法

Object.fromEntries(iterable)
復(fù)制代碼

• 參數(shù)：iterable類似Array、Map或者其它實(shí)現(xiàn)了可迭代協(xié)議的可迭代對(duì)象。

• 返回值：一個(gè)由該迭代對(duì)象條目提供對(duì)應(yīng)屬性的新對(duì)象。

補(bǔ)充

• Map 轉(zhuǎn)化為 Object

通過(guò) Object.fromEntries， 可以將Map轉(zhuǎn)換為Object:

const map = new Map([ ['foo', 'bar'], ['baz', 42] ])
const obj = Object.fromEntries(map)
console.log(obj)
// { foo: "bar", baz: 42 }
復(fù)制代碼

• Array 轉(zhuǎn)化為 Object

通過(guò) Object.fromEntries， 可以將Array轉(zhuǎn)換為Object:

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
const obj = Object.fromEntries(arr)
console.log(obj)
// { 0: "a", 1: "b", 2: "c" }
復(fù)制代碼

• 對(duì)象轉(zhuǎn)換

Object.fromEntries 是與 Object.entries()相反的方法，用 數(shù)組處理函數(shù) 可以像下面這樣轉(zhuǎn)換對(duì)象：

const object1 = { a: 1, b: 2, c: 3 }

const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) => [ key, val * 2 ])
)

// Object.entries(object1) >>> [["a",1],["b",2],["c",3]]

console.log(object2) // { a: 2, b: 4, c: 6 }
復(fù)制代碼

6. Object.prototype.hasOwnProperty()

上邊枚舉對(duì)象屬性時(shí)為了避免for..in遍歷繼承來(lái)的屬性，給大家補(bǔ)充了可以借助Object.prototype.hasOwnProperty()方法進(jìn)行判斷，在這里也具體為大家介紹一下它。

hasOwnProperty() 方法會(huì)返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性（也就是，是否有指定的鍵）。

const obj1 = {};
obj1.property1 = 42

console.log(obj1.hasOwnProperty('property1')) // true
console.log(obj1.hasOwnProperty('toString')) // false
console.log(obj1.hasOwnProperty('hasOwnProperty')) // false
復(fù)制代碼

語(yǔ)法

obj.hasOwnProperty(prop)
復(fù)制代碼

• 參數(shù)：prop 要檢測(cè)的屬性的String字符串形式表示的名稱，或者Symbol。

• 返回值：用來(lái)判斷某個(gè)對(duì)象是否含有指定的屬性的布爾值Boolean。

注意

• 只會(huì)對(duì)自身屬性進(jìn)行判斷，繼承來(lái)的一律返回false。配合for...in使用，可以避免其遍歷繼承來(lái)的屬性。

const o = new Object()
o.prop = 'exists'

console.log(o.hasOwnProperty('prop')) // true
console.log(o.hasOwnProperty('toString')) // false
console.log(o.hasOwnProperty('hasOwnProperty')) // false
復(fù)制代碼

• 即使屬性的值是 null 或 undefined，只要屬性存在，hasOwnProperty 依舊會(huì)返回 true。

const o = new Object();
o.propOne = null
o.propTwo = undefined

console.log(o.hasOwnProperty('propOne')) // true
console.log(o.hasOwnProperty('propTwo')) // true
復(fù)制代碼

7. Object.getOwnPropertyNames()

上邊枚舉對(duì)象屬性時(shí)也有用到該方法，在這里也具體為大家介紹一下它。

Object.getOwnPropertyNames() 返回一個(gè)數(shù)組，該數(shù)組對(duì)元素是 obj自身?yè)碛械拿杜e或不可枚舉屬性名稱字符串。數(shù)組中枚舉屬性的順序與通過(guò)for...in循環(huán)Object.keys迭代該對(duì)象屬性時(shí)一致。數(shù)組中不可枚舉屬性的順序未定義。

const arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()) // ["0", "1", "2", "length"]

// 類數(shù)組對(duì)象
const obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()) // ["0", "1", "2"]

// 使用Array.forEach輸出屬性名和屬性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
})
// 0 -> a
// 1 -> b
// 2 -> c

// 不可枚舉屬性
const my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort())
// ["foo", "getFoo"]
復(fù)制代碼

語(yǔ)法

obj.getOwnPropertyNames(obj)
復(fù)制代碼

-參數(shù)：obj一個(gè)對(duì)象，其自身的可枚舉和不可枚舉屬性的名稱被返回。

• 返回值：在給定對(duì)象上找到的自身屬性對(duì)應(yīng)的字符串?dāng)?shù)組。

補(bǔ)充

• Object.getOwnPropertyNames和Object.keys的區(qū)別：Object.keys只適用于可枚舉的屬性，而Object.getOwnPropertyNames返回對(duì)象的全部屬性名稱(包括不可枚舉的)。

'use strict'
(function () {
    // 人類的構(gòu)造函數(shù)
    const person = function (name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
        this.sing = () => {
            console.log('sing');
        }
    }

    // new 一個(gè)ladygaga
    const gaga = new person('ladygaga', 26, 'girl')
    
    // 給嘎嘎發(fā)放一個(gè)不可枚舉的身份證
    Object.defineProperty(gaga, 'id', {
        value: '1234567890',
        enumerable: false
    })

    //查看gaga的個(gè)人信息
    const arr = Object.getOwnPropertyNames(gaga)
    console.log(arr) // name, age, sex, sing, id
    
    // 注意和getOwnPropertyNames的區(qū)別，不可枚舉的id沒(méi)有輸出
    const arr1 = Object.keys(gaga)
    console.log(arr1) // name, age, sex, sing
})()
復(fù)制代碼

• 如果你只要獲取到可枚舉屬性，可以用Object.keys或用for...in循環(huán)（for...in會(huì)獲取到原型鏈上的可枚舉屬性，可以使用hasOwnProperty()方法過(guò)濾掉）。

• 獲取不可枚舉的屬性，可以使用Array.prototype.filter()方法，從所有的屬性名數(shù)組（使用Object.getOwnPropertyNames()方法獲得）中去除可枚舉的屬性（使用Object.keys()方法獲得），剩余的屬性便是不可枚舉的屬性了：

const target = myObject;
const enum_and_nonenum = Object.getOwnPropertyNames(target);
const enum_only = Object.keys(target);
const nonenum_only = enum_and_nonenum.filter(function(key) {
    const indexInEnum = enum_only.indexOf(key);
    if (indexInEnum == -1) {
        // 沒(méi)有發(fā)現(xiàn)在enum_only健集中意味著這個(gè)健是不可枚舉的,
        // 因此返回true 以便讓它保持在過(guò)濾結(jié)果中
        return true;
    } else {
        return false;
    }
});

console.log(nonenum_only);
復(fù)制代碼

注意

• 在 ES5 中，如果參數(shù)不是一個(gè)原始對(duì)象類型，將拋出一個(gè) TypeError異常。在 ES2015 中，非對(duì)象參數(shù)被強(qiáng)制轉(zhuǎn)換為對(duì)象。

Object.getOwnPropertyNames('foo') // TypeError: "foo" is not an object     (ES5 code)

Object.getOwnPropertyNames('foo') // ['length', '0', '1', '2']             (ES2015 code)
復(fù)制代碼

8. Object.freeze()

Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象。一個(gè)被凍結(jié)的對(duì)象再也不能被修改；凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫(xiě)性，以及不能修改已有屬性的值。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對(duì)象。

const obj = {
  prop: 42
}

Object.freeze(obj)

obj.prop = 33

console.log(obj.prop)
//  42
復(fù)制代碼

語(yǔ)法

obj.freeze(obj)
復(fù)制代碼

• 參數(shù)：obj要被凍結(jié)的對(duì)象。

• 返回值：被凍結(jié)的對(duì)象。

補(bǔ)充

• 被凍結(jié)的對(duì)象是不可變的。但也不總是這樣。下例展示了凍結(jié)對(duì)象不是常量對(duì)象（淺凍結(jié)）。

const obj1 = {
  internal: {}
}
Object.freeze(obj1)

obj1.internal.a = 'aValue'
console.log(obj1.internal.a) // 'aValue'
復(fù)制代碼

• 要使對(duì)象不可變，需要遞歸凍結(jié)每個(gè)類型為對(duì)象的屬性（深凍結(jié)）。

// 深凍結(jié)函數(shù).
function deepFreeze(obj) {
  // 取回定義在obj上的屬性名
  const propNames = Object.getOwnPropertyNames(obj)

  // 在凍結(jié)自身之前凍結(jié)屬性
  propNames.forEach(function(name) {
    const prop = obj[name]

    // 如果prop是個(gè)對(duì)象，凍結(jié)它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop)
  })

  // 凍結(jié)自身
  return Object.freeze(obj);
}

const obj2 = {
  internal: {}
}

deepFreeze(obj2)
obj2.internal.a = 'anotherValue'
obj2.internal.a // undefined
復(fù)制代碼

9. Object.isFrozen()

Object.isFrozen() 方法判斷一個(gè)對(duì)象是否被凍結(jié)。

// 一個(gè)對(duì)象默認(rèn)是可擴(kuò)展的, 所以它也是非凍結(jié)的。
Object.isFrozen({}) // false

// 一個(gè)不可擴(kuò)展的空對(duì)象同時(shí)也是一個(gè)凍結(jié)對(duì)象。
var vacuouslyFrozen = Object.preventExtensions({})
Object.isFrozen(vacuouslyFrozen) // true

var frozen = { 1: 81 }
Object.isFrozen(frozen) // false

// 使用Object.freeze是凍結(jié)一個(gè)對(duì)象最方便的方法.
Object.freeze(frozen)
Object.isFrozen(frozen) // true
復(fù)制代碼

語(yǔ)法

obj.isFrozen(obj)
復(fù)制代碼

• 參數(shù)：obj被檢測(cè)的對(duì)象。

• 返回值：表示給定對(duì)象是否被凍結(jié)的Boolean。

注意

• 在 ES5 中，如果參數(shù)不是一個(gè)對(duì)象類型，將拋出一個(gè)TypeError異常。在 ES2015 中，非對(duì)象參數(shù)將被視為一個(gè)凍結(jié)的普通對(duì)象，因此會(huì)返回true。

Object.isFrozen(1) // (ES5 code)
// TypeError: 1 is not an object 

Object.isFrozen(1) // (ES2015 code)
// true   
復(fù)制代碼

結(jié)束

• 經(jīng)過(guò)同事的推動(dòng)、鼓勵(lì)、支持，自己的反思，趁著周末，寫(xiě)了這篇文章。

• 以前就覺(jué)得自己菜，不配寫(xiě)文章，我會(huì)的吧人家都會(huì)，寫(xiě)出來(lái)的東西人家都知道就覺(jué)得沒(méi)必要去寫(xiě)。總想多看看人家寫(xiě)的，等自己達(dá)到某種程度了（然而具體是那種程度我自己也不了解），再去寫(xiě)文章，寫(xiě)一些不常見(jiàn)的，現(xiàn)在想想這是在癡人說(shuō)夢(mèng)。有那么多大佬、前輩，人家什么問(wèn)題、技術(shù)人家沒(méi)見(jiàn)過(guò)，人家更是寫(xiě)了那么多的文章了，輪到我寫(xiě)的時(shí)候哪有什么不常見(jiàn)的可寫(xiě)呢！

• 當(dāng)我真的去寫(xiě)的時(shí)候才知道有多香，寫(xiě)的同時(shí)也在加深自己對(duì)這些知識(shí)的認(rèn)識(shí)。而當(dāng)我我投入到了寫(xiě)文章中，也就忘記了刷抖音，自然而然的也把時(shí)間利用起來(lái)了，并去做了一些有意義的事情。

• 送給我自己和那些與我之前有一樣顧慮而不寫(xiě)文章的同學(xué)們一段話：沒(méi)有配不配寫(xiě)文章這一說(shuō)法，自己總結(jié)了就是自己的，有人看了并提出建議了，那我們就吸收成長(zhǎng)自己，同時(shí)也可能會(huì)幫助到別人，沒(méi)人看那我們就把些文章當(dāng)作自己筆記就好了。掘金又不收費(fèi)，免費(fèi)的筆記本、不用白不用。??

• 第一次寫(xiě)文章，感覺(jué)沒(méi)有寫(xiě)多少東西，卻寫(xiě)了很久。發(fā)現(xiàn)寫(xiě)一篇文章好難呀！??