ES6 對象的擴展

屬性的簡潔表示法

我們知道對象是由鍵值對組成的橄妆，在 ES6 中允許在對象的大括號內直接寫入變量和函數(shù)，此時屬性名是變量名夏志，屬性值是變量值垒拢。

示例：

例如我們定義兩個變量 name 和 age健无，將這兩個變量賦值給對象 person ：

const name = "xkd";
const age = 3;
const person = {name: name,age: age}
console.log(person);

可以簡寫為：

const person = {name, age};   // 簡寫

然后我們輸出 person 對象荣恐，輸出內容如下所示：

{ name: 'xkd', age: 3 }

方法名簡寫

除了屬性，方法也可以簡寫累贤，例如我們看下面這段代碼：

const content = {
    show:function(){
      console.log("你好叠穆，俠課島!");
    }
};
content.show();  // 輸出：你好，俠課島!

我們可以簡寫成：

const content = {
    show() {
      console.log("你好臼膏，俠課島!");
    }
};
content.show();  // 輸出：你好硼被，俠課島!

這種寫法用于函數(shù)的返回值，將會非常方便讶请。

function show() {
    const a = 10;
    const b = 20;
    return {a, b};
}
console.log(show());  // 輸出：{ a: 10, b: 20 }

屬性名表達式

ES6 允許用表達式作為屬性名祷嘶，但是要注意一定要將表達式放在方括號內屎媳。

示例：

例如下面這段代碼：

const obj = {};
obj.obj = 123;  

console.log(obj);  
// 輸出：{ abc: 123 }

上述代碼中我們直接用標識符作為屬性名夺溢，如果我們想要使用表達式作為屬性名论巍，則需要將表達式放在方括號之內，例如：

const obj = {};
obj['a' + 'bc'] = 123;  // 等同于：obj[abc] = 123;

console.log(obj);  
// 輸出：{ abc: 123 }

其中 ['a' + 'bc'] 就是一個表達式风响，作為 obj 對象的鍵值嘉汰。

除了將表達式用作屬性，表達式也可以用作函數(shù)名状勤，同樣使用中括號 [] 包圍鞋怀，例如：

const obj = {
    ["sho"+"w"](){
      console.log("你好，俠課島持搜！");
     }
}
obj.show();     
// 輸出：你好密似，俠課島！

函數(shù)的name屬性

函數(shù)的 name 屬性葫盼，可以用于返回函數(shù)的函數(shù)名残腌，對象方法也是函數(shù)，因此也有 name 屬性贫导。

示例：

獲取 xkd 對象中 show() 函數(shù)的函數(shù)名：

const xkd = {
    show() {
        console.log('你好抛猫，俠課島！');
    },
};
console.log(xkd.show.name); // 獲取函數(shù)的函數(shù)名

// 輸出：show

如果對象的方法使用了取值函數(shù)getter 和存值函數(shù) setter孩灯，則 name 屬性不在這兩個方法上面闺金，而是該方法的屬性的描述對象的 get 和 set 屬性上面，返回值是方法名前加上 get 和 set 峰档。

示例：

例如下面這個例子：

const xkd = {
    get show() {},
    set show(x) {}
};
const descriptor = Object.getOwnPropertyDescriptor(xkd, 'show');
  
console.log(descriptor.get.name);  // 輸出：get show
console.log(descriptor.set.name);  // 輸出：set show

對象的拓展運算符

對象的拓展運算符 ... 可以用于取出參數(shù)對象中所有可遍歷屬性败匹，然后拷貝到當前對象之中。

復制對象

在 ES6 中我們可以通過擴展運算符來復制對象讥巡。

示例：

例如將對象 person 中的可遍歷屬性拷貝到對象 new_person 中：

let person = { name: 'xkd', hobby: 'swimming'};
let new_person = { ...person };
console.log(new_person); 
// 輸出：{ name: 'xkd', hobby: 'swimming' }

合并對象

對象的拓展運算符還可以用于合并對象掀亩。

示例：

例如我們合并對象 obj1 和 obj2：

let obj = { a: 1, b: 2};
let obj1 = { a: 1, b: 2};
let obj2 = { c: 3, d: 4};
let obj3 = { ...obj1, ...obj2};
console.log(obj3);  
// 輸出：{ a: 1, b: 2, c: 3, d: 4 }

自定義屬性

當自定義的屬性和拓展運算符對象里面屬性的相同的時候，有兩種情況：

  • 第一種尚卫，自定義的屬性在拓展運算符后面归榕，則拓展運算符對象內部同名的屬性將被自定義屬性覆蓋。
示例：
let obj1 = {name: "xkd", age: 18};
let obj2 = { ...obj1, name: "summer", age: 20};
console.log(obj2); 
// 輸出：{ name: 'summer', age: 20 }

上述代碼中吱涉，可以看到刹泄，obj2 對象中自定義的屬性覆蓋了擴展運算符對象中的屬性。

  • 第二種怎爵，自定義的屬性在拓展運算符對象前面特石，則自定義屬性被拓展運算符對象覆蓋。
示例：
let obj1 = {name: "xkd", age: 18};
let obj2 = { name: "summer", age: 20, ...obj1};
console.log(obj2); 
// 輸出：{ name: 'xkd', age: 18 }

上述代碼中鳖链，obj1 中的屬性覆蓋了 obj2 中的自定義屬性姆蘸。

如果擴展運算符后面是一個空對象墩莫，則沒有任何效果也不會報錯。

示例：
let obj = {...{}, name: 'xkd', age: 19};
console.log(obj);  
// 輸出：{ name: 'xkd', age: 19 }

如果擴展運算符后面不是對象逞敷，則會自動將其轉為對象狂秦。

示例：
let obj = {...1, ...null, ...undefined, ...true};
console.log(obj); // {}

其中 ...1 就等同于 {...Object(1)}， ...null 等同于 {...Object(null)} 推捐、undefined裂问、true 也是如此。而由于這些對象沒有自身屬性牛柒，所以返回一個空對象堪簿。

對象屬性的遍歷

ES6 中一共提供了 5 種遍歷對象屬性的方法，我們來看一下皮壁。

  • for...in：遍歷對象自身的和繼承的可枚舉屬性椭更，不含 Symbol。
示例：
let obj = {one:100, two:200, three:300};
for ( n in obj) {
    console.log(n);
}

輸出內容如下所示：

one
two
three
  • Object.keys(obj)：返回一個數(shù)組蛾魄，包括對象自身的（不含繼承的）所有可枚舉屬性（不含Symbol）的鍵名虑瀑。
示例：
let obj = {one:100, two:200, three:300};
console.log(Object.keys(obj)); 
// 輸出：[ 'one', 'two', 'three' ]
  • Object.getOwnPropertyNames(obj)：返回一個數(shù)組，包含對象自身的所有（不可枚舉屬性）屬性（不含Symbol）的鍵名畏腕。
示例：
let obj = {one:100, two:200, three:300};
console.log(Object.getOwnPropertyNames(obj)); 
// 輸出：[ 'one', 'two', 'three' ]
  • Object.getOwnPropertySymbols(obj)：返回一個數(shù)組缴川，對象自身的所有 Symbol屬性的鍵名。
示例：
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Object.getOwnPropertySymbols(obj)); 
// 輸出：[ Symbol() ]
  • Reflect.ownKeys：返回一個數(shù)組描馅，包含對象自身的所有鍵名把夸。
示例：
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Reflect.ownKeys(obj)); 
// 輸出：[ 'one', 'two', 'three', Symbol() ]

可枚舉性（enumerable）

對象的每一個屬性都有一個描述對象，用來控制該屬性的行為铭污。

Object.getOwnpropertyDescriptor 方法可以獲取該屬性的描述對象恋日， 返回所有自身屬性(非繼承屬性)的描述對象。

描述對象的 enumerable 屬性嘹狞，稱為可枚舉性岂膳，如果該屬性為 false，則表示某些操作會忽略當前屬性磅网。 下面是可能會忽略屬性為 false 的四種操作情況：

  • for...in：只遍歷對象自身的和繼承的可枚舉的屬性谈截。
  • Object.keys()：返回對象自身的所有可枚舉的屬性和鍵名。
  • JSON.stringify()：只轉換對象自身的可枚舉的屬性涧偷。
  • Object.assign()：忽略 enumerable為false的屬性簸喂，只拷貝對象自身的可枚舉的屬性。
示例：

對象可枚舉屬性合并燎潮，后面的屬性會覆蓋前面的屬性喻鳄，隱式轉換。

let obj = { xkd: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'xkd'));

// 輸出：{ value: 123, writable: true, enumerable: true, configurable: true }

super關鍵字

this 關鍵字總是指向函數(shù)所在的當前對象确封，ES6 又新增了另一個類似的關鍵字 super除呵，指向當前對象的原型對象再菊。

示例：
const proto = {
    xkd: 'New'
};
const obj = {
    xkd: 'version',
    change() {
        return super.xkd;
    }
};
obj.__proto__ = proto;
console.log(obj.change());  // 輸出：New

對象 obj 在 change 方法之中，通過 super.xkd 引用了原型對象 proto 的 xkd 屬性颜曾。

解構賦值

解構不僅可以用于數(shù)組同時還可以用于對象纠拔，對象的解構和數(shù)組的不同之處在于：數(shù)組的元素是按次序排列的，變量的取值由它的位置決定泛啸，而對象的屬性沒有次序绿语，變量必須與屬性同名才能正確取值秃症。

示例：
let { x, y, ...z } = {x: 1, y: 2, a: 100, b: 200, c:300};
console.log(x);  // 輸出：1
console.log(y);  // 輸出：2
console.log(z);  // 輸出：{ a: 100, b: 200, c: 300 }

對象新增方法

Object.is方法

Object.is 方法用來比較兩個值是否嚴格相等候址，類似于 ===，返回一個布爾值种柑，相等則返回 true岗仑，不相等則返回 false。

示例：
console.log(Object.is("q","q"));     // 輸出：true
console.log(Object.is(1,1));         // 輸出：true
console.log(Object.is([1],[1]));     // 輸出：false
console.log(Object.is({q:1},{q:1})); // 輸出：false

object.assign方法

object.assign() 用于將源對象的所有可枚舉屬性復制到目標對象中聚请。第一個參數(shù)是目標對象荠雕，后面的參數(shù)都是源對象。

示例：
let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3};
Object.assign(obj1, obj2, obj3)
console.log(obj1); 
// 輸出：{ a: 1, b: 2, c: 3 }

如果目標對象和源對象有同名屬性驶赏，或者多個源對象有同名屬性炸卑，則后面的屬性會覆蓋前面的屬性：

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3, a:100};
Object.assign(obj1, obj2, obj3)
console.log(obj1); 
// 輸出：{ a: 100, b: 2, c: 3 }

如果該函數(shù)只有一個參數(shù)，當參數(shù)為對象時煤傍，直接返回該對象盖文。當參數(shù)不是對象時，會先將參數(shù)轉為對象然后返回：

console.log(Object.assign(3));     // 輸出：[Number: 3]
console.log(Object.assign({a:1})); // 輸出：{ a: 1 }

鏈接：https://www.9xkd.com/

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末蚯姆，一起剝皮案震驚了整個濱河市五续，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌龄恋，老刑警劉巖疙驾，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異郭毕，居然都是意外死亡它碎，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門显押，熙熙樓的掌柜王于貴愁眉苦臉地迎上來扳肛，“玉大人，你說我怎么就攤上這事煮落〕ㄇ停” “怎么了？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蝉仇，是天一觀的道長旋讹。 經常有香客問我殖蚕，道長，這世上最難降的妖魔是什么沉迹？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任睦疫，我火速辦了婚禮，結果婚禮上鞭呕，老公的妹妹穿的比我還像新娘蛤育。我一直安慰自己，他們只是感情好葫松，可當我...
    茶點故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布瓦糕。 她就那樣靜靜地躺著，像睡著了一般腋么。 火紅的嫁衣襯著肌膚如雪咕娄。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天珊擂，我揣著相機與錄音圣勒，去河邊找鬼。 笑死摧扇，一個胖子當著我的面吹牛圣贸，可吹牛的內容都是我干的。 我是一名探鬼主播扛稽，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼吁峻，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了庇绽？” 一聲冷哼從身側響起锡搜，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎瞧掺，沒想到半個月后耕餐，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡辟狈，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年肠缔，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哼转。...
    茶點故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡明未，死狀恐怖，靈堂內的尸體忽然破棺而出壹蔓，到底是詐尸還是另有隱情趟妥，我是刑警寧澤，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布佣蓉，位于F島的核電站披摄，受9級特大地震影響亲雪，放射性物質發(fā)生泄漏。R本人自食惡果不足惜疚膊，卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一义辕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧寓盗，春花似錦灌砖、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案基显，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至喳张，卻和暖如春续镇，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背销部。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留制跟，地道東北人舅桩。 一個月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像雨膨，于是被迫代替她去往敵國和親擂涛。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2贊 355