每日一题(开开森森学前端之Object系列)

大家好，本人来在掘金待了有3个多月了，决定跟随前端大佬们的步伐，故决定每天一题记录自己的成长轨迹，由于水平有限，对于文章中出现的问题还请大佬们指正。

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

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

1.Object.assign(target, sources)
2.Object.entries()
3.Object.keys()
4.Object.values()
复制代码

我的天，原来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']
他也输出了我们对象的值
复制代码