object常见总结 ---方法很多，内容优点多，希望可以耐心看完，会分几篇文章写。
-
Object.assign（target,...source）
这是es5一个算是比较常用的一个方法吧，不算太陌生，在没有扩展运算符...之前这个是合并对象的好方法。
Object.assign（target,...source）它不是一个深拷贝，只是浅拷贝。
-方法：往target（第一个参数）放入source中的属性，如果属性重复，取最靠后的属性，有返回值，会返回合并完的对象（也就是第一个参数），第一个参数的对象也会改变。
这个说的不是很清楚直接上例子。
<script>
let a={
b:123
}
let b={
a:123,
c:123
}
let c={
c:234,
d:789
}
let z=Object.assign(a,b,c)
console.log(z,a)
console.log(z===a)
</script>
图片.png
对比一下es6的扩展运算符
<script>
let a={
b:123
}
let b={
a:123,
c:123
}
let c={
c:234,
d:789
}
let w={...a,...b,...c}
console.log(w)
</script>
图片.png
作用是基本一样的，只不过Object.assign会改变对象。
-
Object.create(obj.prototype，[propertiesObject])
这个方法在框架中可以说是必有的，可能新手会觉得用这个方法就是装x，但其实不然。
-方法解读：返回一个以第一个参数为原型，后面参数为属性的对象。注意只有两个参数，如果有第三个也没用
<script>
let obj1= {
name:'小明',
age:18
}
let obj2=Object.create(obj1) //把obj1当成原型
obj2.work='js学习'
console.dir(obj2)
</script>
图片.png
<script>
let obj1={}//为什么写框架的大神们不用这个呢，因为会附带原型上面的东西，不够干净
let obj2=Object.create(Object.prototype)//obj1定义的方式等于obj2
//注意：使用的是原型，不是构造函数，是一个对象！！！ 如果使用的是构造函数会变成方法。
let obj4=Object.create(Object)
console.log(obj4)
console.log(obj1)
let obj3=Object.create(null)//这个没有原型，更为干净，所以很多框架会使用这种形式
</script>
图片.png
分析一下第二个参数
<script>
let obj0= {
name:'小明',
age:18
}
let obj1=Object.create(obj0,{work:{
value:'js学习',
enumerable:true,//支持枚举 这些内容会在defineProperty中讲解
configurable:true,//配置
writable:true//是否可以修改
}})
console.dir(obj1)
</script>
图片.png
3.Object.defineProperties(obj,props)
方法：直接在对象上定义或者修改原有属性。返回值：返回修改过后的对象。
<script>
let a={
a:1,
b:2,c:3
}
let b=Object.defineProperties(a,{'a':{
value:2
},
'd':{value:999,enumerable:false}
})
console.log(a,b)
console.log(a===b)
</script>
图片.png
4.Object.defineProperty(obj,key,prop)
如果学习过vue2的朋友们，肯定知道这个方法，vue2数据绑定就是使用了这个方法，vue3的时候改成了proxy。
方法：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
let a={
b:123
}
var bValue = 0;
Object.defineProperty(a,'b',{
value:234
})
// console.log(a.b)
//第三个参数是一个对象{}，里面存放着enumerable(枚举) value(数据属性) setget(访问器属性)
//configurable (配置) writable(是否可改数值)
// 1.enumerable
//是否支持枚举，默认值为false，如果支持枚举的话，可以在in ...扩展符中使用该参数
//如果不支持就不可以通过for in ...
//不支持枚举可以使用 Object.getOwnPropertyNames(obj)访问到 这个方法后面会题到
//2.value 这个就是对应的属性值，没什么可说性 value：123 就是参数值为123
//3.set get
//set(xxx) 接受一个参数，如果为空，则为undefined 当修改属性值时，会调用set,执行里面的内容
//get() 必须有return值 ,如果没有则为undefined,当调用结果的时候，会执行get,最终返回return的值
Object.defineProperty(a,'c',{
set(val){
bValue=2
console.log('world')
},
get(){console.log('hello')
return 'study'
}
})
a.c=123
console.log(a.c)
console.log(bValue)
图片.png
//4.configurable 这个应该是最不好理解的函数了
//默认为configurable=false
//当它为false时，之后再也不能进行配置此参数
//只有writeable可以改变（而且仅限于true改成false）,其他上面的方法都不可以更改(value除外，value与writeable有关)
//至于错误情况，自己去试试吧，太多了！！我得写太久了
let obj ={
a:123
}
Object.defineProperty(obj,'b',{
configurable:false
,value:'hello',
writable:true
})
console.log(obj.b) //hello
obj.b='world'
console.log(obj.b)//world
Object.defineProperty(obj,'b',{
value:'hello'
})
console.log(obj.b)
//5.writeable 是否可以改变数值，默认为false
let aaa={
}
Object.defineProperty(aaa,'b',{
value:123
})
console.log(aaa.b)
aaa.b=234
console.log(aaa.b)
//结果还是234
//configurable enumerable value writable get set 默认情况
//数据描述符 可以 可以 可以 可以 不可以 不可以
//访问描述符 可以 可以 不可以 不可以 可以 可以
图片.png
-
Object.entries(obj)
方法：返回 key value的数组
<script>
let a={
a:123,
b:234,
c:456
}
//顺序与for循坏一样
let b= Object.entries(a)
console.log(b)
//如果是number的话，会按大小排列好
let c={
100:'123',
200:'234',
1:'456'
}
let d=Object.entries(c)
console.log(d)
</script>
图片.png
-
Object.keys(obj)
方法：返回obj的可枚举的键值名
<script>
let a={
a:123,
b:234
}
console.log(Object.keys(a))
console.log(Object.keys('123'))
//可以对字符串使用
</script>
图片.png
这篇先总结这些了。
