文章目錄

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

1.合并對(duì)象 - Object.assign()

介紹

• assign方法可以將多個(gè)對(duì)象（字典），語(yǔ)法：Object.assign(srcObj,obj1,obj2…)
• 對(duì)于重復(fù)的鍵將會(huì)被覆蓋（尤其注意對(duì)象被覆蓋），對(duì)于可枚舉（迭代）參數(shù)（被合并對(duì)象）若不是對(duì)象則自動(dòng)轉(zhuǎn)換成對(duì)象合并（如string，[]），對(duì)于不可枚舉參數(shù)（undefined，null）會(huì)自動(dòng)跳過(guò)。
• 若源對(duì)象（第一個(gè)參數(shù)）不可枚舉則會(huì)報(bào)錯(cuò)

let srcObj= { a: 'a',b:'b',obj:{title:"我要被覆蓋了"} }, obj1 = { b: 2 }, obj2 = { c: 3 }, str3 = "字符串", num4 = 5; obj = {newTitle:"我是新的title"} // 1.合并、重復(fù)覆蓋、自動(dòng)轉(zhuǎn)換成對(duì)象合并、自動(dòng)跳過(guò)舉例： console.log(Object.assign(srcObj, obj1 , obj2, str3, num4,obj)); // {a:'a',b:'2',c:3,0: "字",1: "符",2: "串",obj:{newTitle:"我是新的title"}}// 2.報(bào)錯(cuò) Object.assign(null, obj1 , obj2 ))

進(jìn)階

• 當(dāng)聲明一個(gè)對(duì)象時(shí)，它的enumerable屬性默認(rèn)是true，我們也可以顯示的將它設(shè)為false，所以說(shuō)對(duì)象不一定都是可迭代的（眼見不一定為實(shí)），但可以通過(guò)’.'取到。
• 若拷貝類型是Symbol 類型也會(huì)被拷貝。Symbol ：和int、float等一樣是數(shù)據(jù)類型，只不過(guò)他是隱藏類型，直接訪問(wèn)是取不到的

// 1.跳過(guò)不可迭代的對(duì)象 var unEnumer = Object.defineProperty({}, "k", {enumerable: false,value: "hello"}), // {k:"hello"}// 這樣定義對(duì)象，任何值都能作為鍵（被視為字符串）enumer = Object.defineProperty({}, null,{enumerable: true,value: "hello"}) // {"null":"hello"} console.log(Object.assign( { b: "c" },unEnumer ,enumer )); // {b: "c",null: "hello"}// 2.合并Symbol 類型，既可以當(dāng)鍵也可以當(dāng)值console.log(Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' },{'e':Symbol('f')})) // {a: "b", e: Symbol(f), Symbol(c): "d"}

注意

• 拷貝后的數(shù)據(jù)間的影響關(guān)系
• 拷貝對(duì)象是數(shù)組則按照字典處理，數(shù)組很好理解成字典，如[‘a(chǎn)’,‘b’,‘c’]，實(shí)際上會(huì)自動(dòng)分配鍵,等價(jià)于{0:‘a(chǎn)’,1:‘b’,2:‘c’}，所以處理規(guī)則同字典一樣。
• 對(duì)取值函數(shù)與賦值函數(shù)的處理

// 1.影響關(guān)系 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.處理數(shù)組 console.log(Object.assign([1, 2, 3], [4, 5])) // 合并完還是數(shù)組 [4, 5, 3] console.log(Object.assign({0:1,3:3}, [4, 5])) // 合并完是對(duì)象 {0: 4, 1: 5, 3: 3} console.log(Object.assign( [4, 5],{0:1,3:3})) // 合并完還是數(shù)組 [1, 5, empty, 3] empty?// 3.對(duì)取值函數(shù)處理和賦值函數(shù)處理 var obj1={get foo(){return "a"}}, obj2={foo:()=>{return "a"}} console.log(obj1) // foo: "a"，obj1.foo得到的是函數(shù)執(zhí)行結(jié)果，計(jì)算屬性原理？ console.log(obj2) // foo: ? foo()，obj2.foo得到的是函數(shù)地址 console.log(Object.assign({},{get obj1(){return "a"}},{obj2:()=>{return "a"}})) // {obj1: "a"，obj2: ? obj2()}

用途

• 為對(duì)象添加屬性，方法
• 克隆對(duì)象，結(jié)合新語(yǔ)法合并多個(gè)對(duì)象
• 為屬性指定默認(rèn)值

// 1.為對(duì)象同時(shí)添加（更新）多個(gè)屬性、方法 var obj = {title:"標(biāo)題",dateStamp:"2020/5/22"}, newProp = {get dateStamp(){ return Date.now()},text:"新屬性",fun1(){return "新方法"}}; console.log(Object.assign(obj, newProp)) // {title: "標(biāo)題", dateStamp: 1590119249783, text: "新屬性", fun1: ?}// 2.克隆 var obj = {}; var obj1 = { a: 1 }; Object.defineProperty(obj1, "k", {enumerable: true,// value: "hello",get() {console.log("獲取obj1的k值");} // 當(dāng)使用了getter或setter方法，不允許使用writable和value這兩個(gè)屬性? }); 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 // 采用這種方法克隆，只能克隆原始對(duì)象自身的值，不能克隆它繼承的值（什么意思？）// 3.為對(duì)象指定默認(rèn)值和屬性 const defaultVal = {title: "未定義",time: "0"}; var obj = {}, obj1 = {}; Object.defineProperty(obj1, "title", {enumerable: true,// value: "hello",get() {console.log("獲取obj的title值");return "標(biāo)題"} }); // 注意順序，先默認(rèn)值，再配置屬性，obj在最后 console.log(Object.assign({}, defaultVal,obj1,obj));

2.定義對(duì)象 - Object.defineProperty(obj, prop, descriptor)

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

屬性在創(chuàng)建對(duì)象時(shí)就定義好了，所有特性的默認(rèn)值都為true；而當(dāng)使用defineProperty添加的屬性，特性的默認(rèn)值都為false。當(dāng)使用了getter或setter方法，不允許使用writable和value這兩個(gè)屬性?

obj ，待修改的對(duì)象
prop ，帶修改的屬性名稱
descriptor ，待修改屬性的相關(guān)描述

configurable ，屬性是否可配置。可配置的含義包括：是否可以刪除屬性（ delete ），是否可以修改屬性的 writable 、 enumerable 、 configurable 屬性。 改為false之后，不能刪除修改（不可逆）。默認(rèn)true

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

writable ，是否為可寫，改為false，當(dāng)前屬性變?yōu)橹蛔x。。默認(rèn)true

value ，屬性的默認(rèn)值。

set ，屬性的重寫器（暫且這么叫）。一旦屬性被重新賦值，此方法被自動(dòng)調(diào)用。

get ，屬性的讀取器（暫且這么叫）。一旦屬性被訪問(wèn)讀取，此方法被自動(dòng)調(diào)用。

3.新數(shù)據(jù)類型- Symbol

Symbol是由ES6規(guī)范引入的一項(xiàng)新特性，它的功能類似于一種標(biāo)識(shí)唯一性的ID。

定義

let s1 = Symbol();let s2 = Symbol("another symbol"); // 傳入描述信息 可以是任何可以被轉(zhuǎn)型成字符串的值，如：字符串、數(shù)字、對(duì)象、數(shù)組等let s3 = Symbol();console.log(s1,s2,s3)console.log(typeof s1); // 'symbol'console.log(s1===s2,s1===s3); // false - 每個(gè)Symbol實(shí)例都是唯一的。

應(yīng)用

• 由于Symbol類型的key是不能通過(guò)Object.keys()或者for…in來(lái)枚舉的，它未被包含在對(duì)象自身的屬性名集合(property names)之中，所以可以把一些不需要對(duì)外操作和訪問(wèn)的屬性使用Symbol來(lái)定義，作為對(duì)象的鍵（唯一）；
• 因?yàn)檫@個(gè)特性，當(dāng)使用JSON.stringify()將對(duì)象轉(zhuǎn)換成JSON字符串的時(shí)候，Symbol屬性也會(huì)被排除在外
• 定義常量不用再去想值的內(nèi)容了
• 安全性高
• 多模塊共享唯一

const NAME = Symbol("it`s const key");const AGE = Symbol("it`s const key");let obj = {[NAME]: "默認(rèn)名稱"};obj[AGE] = "賦值年齡";// 訪問(wèn)console.log(obj[NAME],obj[AGE]) // 默認(rèn)名稱, 賦值年齡// 獲取所有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)]// 定義常量不用再去想值的內(nèi)容了const id = Symbol(); // id - 唯一// 注冊(cè)全局Symbol，實(shí)現(xiàn)多模塊共享唯一Symbollet s1 = Symbol.for("global_symbol_1"); //注冊(cè)一個(gè)全局Symbollet s2 = Symbol.for("global_symbol_1"); //獲取全局Symbol，注意描述一直才行let s3 = Symbol.for("global_symbol_3");console.log(s1 === s2); // trueconsole.log(s1 === s3); // false

未完待續(xù)…

總結(jié)

以上是生活随笔為你收集整理的ES6实用方法Object.assign、defineProperty、Symbol的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。