复盘三个月的知识和经验总结
学习处理数据(对象/数组)【ES6的使用】
- Object.assign
–> 对象的深浅拷贝- map forEach filter
- 模板字符串的用法
- 箭头函数
1. Object.assign
let obj1 = {a:1}; let obj2 = {b:2};
let obj = Object.assign(obj2,obj2);
console.log(obj); // {b: 2, a: 1}
有人提到:Vue中的使用技巧:
在某种情况下,需要重置Vue组件的data数据。此时,我们可以通过this.$data
获取当前状态下的data,通过this.$options.data()
获取组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())
就可以将当前状态的data重置为初始状态,非常方便。
Object.assign()到底是深拷贝还是浅拷贝?
浅拷贝(拼接对象,返回一个新的对象)
- 对象的深拷贝:简单理解深拷贝是将对象放到新的内存中,两个对象的改变不会相互影响。
- 对象的浅拷贝:浅拷贝是对象共用的一个内存地址,对象的变化相互影响。
对于Object.assign()而言,如果对象的属性值为简单类型(string,number),通过Object.assign({},srcobj)
得到的新对象为深拷贝;
如果属性值为对象或其他引用类型,那对于这个对象而言其实是浅拷贝的,这是Object.assign()特别需要注意的地方。
取值函数的处理
Object.assign只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。source对象的foo属性是一个取值函数,Object.assign不会复制这个取值函数,只会拿到值以后,将这个值复制过去。
const source = {
get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }
Object.assign可以用来处理数组,但是会把数组视为对象。
此外, Object.keys Object.values Object.entries 均返回数据形式的结果:
let obj = {a:1,b:2,c:3};
console.log(Object.keys(obj)) //["a", "b", "c"]
console.log(Object.values(obj)) //[1, 2, 3]
console.log(Object.entries(obj)) //[['a':1], ['b':2],['c':3]]