1、Object.create()
参数:一个对象或者是定义好的对象
作用:创建一个空对象并使其原型指向传入的对象(vue的组件指向有用到)
示例:
let phone = {
brand: '华为',
price:'6999',
color:'black'
}
console.log(phone);
let createObj = Object.create(phone)// 用于创建一个空对象,空对象会新增一个上级原型对象,上级原型对象就是传入的那个对象
let createObj2 = Object.create(createObj)//再来一次会继续增加一层原型
console.log(createObj,'createObj');//打印值为空对象
console.log(createObj.color);//createObj为空对象没有color属性,但是通过原型链可以找到他的原型身上属性color
console.log(createObj2,'createObj2');
2、Object.assign()
参数:一个对象或多个对象
作用:复制对象或合并对象,(复制可以是深拷贝也可以是浅拷贝,拼接空对象,没有深层次时为深拷贝,不拼接时为浅拷贝,拼接对象有深层对象时深层的对象为浅拷贝)
示例:
let phone3 = {
brand: '苹果',
price:'7999',
color:'pink',
iphone14:{
price:'5999元'
}
}
let assignObj = Object.assign(phone,phone2)//可用于合并对象,或者复制对象
console.log(assignObj,'assignObj');//如传如的对象有相同属性后者将会覆盖前者
let copyObj = Object.assign({},phone3)//直接拼接一个空对象那么结果对象是一个一级的深拷贝对象
let copyObj2 = Object.assign(phone3)//不拼接空对象那么结果则是一个浅拷贝对象
copyObj.brand = '三星'//改变copy对象的值
copyObj2.brand = '中兴'//改变copy对象的值
console.log(phone3,'phone3');//
console.log(copyObj,'copyObj');//打印copyObj.brand为‘三星’,原值不变,所以是深拷贝
console.log(copyObj2,'copyObj2');//打印copyObj.brand为'中兴',原值也是'中兴',所以是浅拷贝
copyObj.iphone14.price = '99元包邮'
console.log(copyObj,'深层次值');//改变copy后的对象深层次的值,原来的值也跟着变,由此可知深层次的值是浅拷贝
3、Object.defineProperty()
参数:一般收到三个参数,对象,字符串,属性对象,具体看代码
作用:添加或修改对象(vue实现响应式数据的方法)
示例:
let obj = {
name: '张三'
}
let ageValue = 21//定义一个中转变量
let definePropertyObj = Object.defineProperty(obj, 'age', {
// value: '20', //新增属性的value值
enumerable: false, //可枚举的
// writable: false, //可写的,可修改的
configurable: false, //可配置的,可删除的
get(){
console.log('有人读取了age属性');
return ageValue //此处需要有返回值
},
///set可以收到一个参数即修改的新值
set(value){
console.log('有人修改了age属性修改的新值为',value);
ageValue = value// 此处一般做值的真正修改
}
})
definePropertyObj.age = 22 //如果writable配置为false则不可修改新增属性
// delete definePropertyObj.age //如果configurable配置为false则不可以删除新增的属性
console.log(definePropertyObj, 'definePropertyObj');
for (let item in obj) {
console.log(item, 'for in'); //如果enumerable配置为false则新增属性不可枚举
}
console.log(definePropertyObj.age,'读取');//会调用get
console.log(definePropertyObj.age = 33,'读取');//会调用set
4、Object.defineProperties()
参数:一般收到两个参数,对象、对象
作用:跟Object.defineProperty()一样的,但这个方法可以同时操作多个属性
示例:
//多个属性时第二个参数写成对象形式
let definePropertiesObj = Object.defineProperties({}, {
age: {
value: 1,
enumerable: true, //可枚举的
writable: false, //可写的
configurable: false //可写的,可修改的
},
sex: {
value: 1,
enumerable: true, //可枚举的
writable: false, //可写的,可修改的
configurable: false //可配置的,可删除的
},
});
5、Object.keys(obj)
参数:一般接收一个参数,(对象)
作用:遍历对象的key返回数组
示例:
let keysObj = Object.keys(phone)//可以将对象的key值枚举出来
console.log(keysObj,'keysObj');//打印结果为对象的所有key组成的数组
6、Object.values(obj)
参数:一般接收一个参数,(对象)
作用:遍历对象的value返回数组
示例:
let valuesObj = Object.values(phone)//可以将对象的value值枚举出来
console.log(valuesObj,'valuesObj');//打印结果为对象的所有value组成的数组
7、Object.entries(obj)
参数:一般接收一个参数,(对象)
作用:遍历对象的key与value返回二维数组
示例:
let entriesObj = Object.entries(phone)//可以将对象的key与value以数组的形式枚举出来
console.log(entriesObj,'entriesObj');//打印的结果是一个二维数组,对象的键值为一个数组,对象的每一项又是一个数组
let Arr = [{name:'张三',age:12},{name:'张四',age:14},{name:'张无',age:16},]
let arrObj = Object.entries(Arr)//参数也可以是一个数组
console.log(arrObj,'arrObj');
8、Object.freeze(obj)
参数:一般接收一个参数,(对象)
作用:用于冻结一个对象,使其无法进行任何增删改查,可以适当提高性能
示例:
let freezeobj = Object.freeze(phone)//常用于冻结一个对象
console.log(freezeobj,'freezeobj');//返回的对象与原对象一样都是被冻结的无法对其进行任何增删改查
phone.color = 'green'//修改无效
console.log(phone,'冻结后');
for (let item in phone){
console.log(item,'item');//枚举好像没问题
}
9、Object.fromEntries(obj)
参数:一般接收一个参数,(对象)
作用:Object.entries()的逆向操作,将键值对数组转为对象
示例:
let fromEntriesobj = Object.fromEntries(entriesObj)//Object.entries()的逆向操作,可以将键值对数组转为对象
console.log(fromEntriesobj,'fromEntriesobj');
10、Object.hasOwnProperty('string')
参数:接收一个字符串
作用:检查对象中是否存在某个属性
示例:
let hasOwnPropertyObj = phone.hasOwnProperty('color')//检查对象中是否存在某个属性
console.log(hasOwnPropertyObj,'hasOwnPropertyObj');//返回值是一个布尔值,存在为true
// 这个方法只会检查对象的第一层,子对象里面的不检查