每日一題(開開森森學前端之Object系列)

_Dreams發表於2019-04-27
每日一題前端Object

前言

大家好，本人來在掘金待了有3個多月了，決定跟隨前端大佬們的步伐，故決定每天一題記錄自己的成長軌跡，由於水平有限，對於文章中出現的問題還請大佬們指正。

今天要鞏固的是Object常用方法

首先我們來看一下Object都有哪些常用方法呢

1.Object.assign(target, sources)
2.Object.entries()
3.Object.keys()
4.Object.values()
複製程式碼

每日一題(開開森森學前端之Object系列)

我的天，原來Object有這麼多常用的方法。不知道的童鞋跟著我一起來學習下他們正確的使用姿勢吧

Object.assign()

我們先來看看這個方法，這個方法其實是可以將兩個物件進行合併操作 我們來看一個例子：

var target  = { a: "掘金"  }
var source1 = { b: "掘金1" };
var source2 = { c: "掘友2" };
Object.assign(target,source1,source2);
我們會發現這個得到的結果將是：
target = { a: "掘金",b: "掘金1",c: "掘友2" }
所以我們總結：目標物件自身也會改變。
如果我們用變數接收：
let returnedTarget = Object.assign(target,source1,source2);
那麼returnedTarget 也是 { a: "掘金",b: "掘金1",c: "掘友2" }
複製程式碼

但這裡要注意的是如果物件中存在重名的鍵，後面值的會把前面的覆蓋掉

當然啦，Object.assign還可以複製一個物件

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
複製程式碼

注意啦，這裡有同學可能聽過深拷貝和淺拷貝，那麼我們來看下Object.assign到底是深拷貝還是淺拷貝呢? 

let obj1 = { a: 0 , b: {c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: {c: 0}} 
複製程式碼

這裡我們看到我們複製出了一個obj2這麼一個新物件，大家應該也都知道，如果是淺拷貝的話，拷貝的其實是記憶體地址，那這裡的assign方法如果是淺拷貝的話，理論上我們們改變obj1的值，那麼拷貝出來的obj2的值也會跟著變。我們們來做一個實驗。

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 
複製程式碼

我們可以看到改變了obj1裡a的值之後obj2裡a的的值並沒有發生改變。我們再來做一個實驗

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
複製程式碼

可以看到改變了obj2（拷貝出來的物件）裡a的值,影響obj1（源物件）裡a的值沒有發生變化

那麼有童鞋肯定會說那按照這樣看assign方法他就是深拷貝嘍。 其實不然，我們們再來做個小實驗。我們們這次去嘗試改一下obj.b.c的值來看看結果如何？

obj2.b.c = 3; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
複製程式碼

很明顯剛剛的結論被推翻了，這裡obj2.b.c的值發生了改變

所以我們做出如下總結：Object.assign方法他的拷貝規則是：他拷貝的是屬性值，假如源物件（obj1）的屬性值是一個物件型別，那麼拷貝出來的obj2(新物件)並不會直接拷貝值，而是拷貝的源物件的記憶體地址。

所以既然拷貝的是引用那自然而然就是淺拷貝嘍。

Object.entries()

廢話不多說我們們先看程式碼：

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1));
輸出結果：[["foo", "bar"],["baz", 42]]
可以看到這裡是一個二維陣列，他的第一個陣列裡放了我們們的鍵，第二個陣列裡放著我們們的值
那我們們想拿到鍵該怎麼拿呢？很簡單!
console.log(Object.entries(object1)[0]);
輸出結果：["foo", "bar"]
那麼同理：拿到值就是
console.log(Object.entries(object1)[1]);
輸出結果：["baz", 42]
複製程式碼

Object.keys()

概念： Object.keys 返回一個所有元素為字串的陣列，其元素來自於從給定的object上面的屬性。這些屬性的順序與手動遍歷該物件屬性時的一致。

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ['0', '1', '2']
這是一個陣列，那麼使用object遍歷時則是輸出他對應的索引
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // ['0', '1', '2']
這是一個物件，同樣也是輸出索引
var obj2 = { foo: 'bar', baz: 42 };
console.log(Object.keys(obj2)); // ['foo', baz]
這是一個物件，那麼他的鍵是foo和baz所以他就會輸出foo,baz
複製程式碼

Object.values()

有了上面的Object.keys的經驗，我們大概都可以猜出來values是幹啥的了。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
他輸出了我們物件的值
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
他也輸出了我們物件的值
複製程式碼

總結

我們這裡暫時只是講了Object最常用的4個方法，剩餘的方法會在原型時再丟擲來。我相信我們掌握了這四個常用方法後工作效率能再提高一些。

大佬們如果發現了文中的錯誤，及時在評論區指出，我會及時修改！

如果覺得對您有用請點個贊，謝謝大佬！

相關文章