JavaScript基础（十）对象方法总结

大家好，我是蓝胖子的小叮当，今天分享的是JavaScript的第十章对象方法总结，大家在阅读期间有任何的意见或建议都可以留言给我哈！

10.1访问对象属性

js 复制代码

//可以通过点.或者括号[]运算符来访问对象的属性
let name = person.name;
let age = person['age'];

10.2添加、修改、删除属性

js 复制代码

let person={
    name:'张伟',
    age:20
}

person.gender = 'male'; // 添加属性
person.name = 'Jane';   // 修改属性
delete person.age;      // 删除属性

10.3遍历对象

js 复制代码

// 使用for...in循环来遍历对象的所有可枚举属性
for (let key in person) {
    if (person.hasOwnProperty(key)) { // 检查属性是否是对象自身的属性
        console.log(key, person[key]);
    }
}

10.4检测自有属性

js 复制代码

let obj={
    name:'张伟'
}
obj.hasOwnProperty('name') // true
obj.hasOwnProperty('toSrting') // false

let obj1={a:1}
console.log(Object.hasOwn(obj1,'a'))//true

10.5复制对象

js 复制代码

let shallowCopy1 = Object.assign({}, person); // 使用Object.assign()
let shallowCopy2 = { ...person };      // 使用展开运算符
//上述两种方法都是浅拷贝

10.6深度复制对象

js 复制代码

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
    if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }
    if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {});
    }
}
let deepCopy1 = deepCopy(person); //使用递归深拷贝
let deepCopy2 = JSON.parse(JSON.stringify(person)) //使用JSON深拷贝

10.7获取对象的value

js 复制代码

let obj = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.values(obj)) // ['b', 'c', 'a']

10.8获取对象的key

js 复制代码

let obj = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(obj)) // ['100', '2', '7']

10.9返回键值对数组

js 复制代码

let obj = {one: 1,two: 2,three: 3}
let result = Object.entries(obj)
console.log(result)		// [[one, 1], [two, 2], [three, 3]]

let arr = ['one', 'two', 'three']
let result = Object.entries(arr)
console.log(result) // [[0, 'one'], [1, 'two'], [2, 'three']]

10.10检测自有且枚举的属性

js 复制代码

let obj={
    name:'张伟'
}
obj.propertyIsEnumerable('name') // true
obj.propertyIsEnumerable('toString') // false

10.11判断是否是空对象

js 复制代码

function isEmptyObject1(obj){
  return Object.keys(obj).length === 0;
}

function isEmptyObject2(obj){
  return JSON.stringify(obj) === "{}";
}
// 以上方法都不适用于包含原型属性的对象，要判断一个对象是否为空对象
// 并且适用于包含原型属性的对象
function isEmptyObject3(obj){
  for(var key in obj) {
    if(obj.hasOwnProperty(key))
      return false;
  }
  return true;
}

10.12对象合并

js 复制代码

let obj1={a:1}
let obj2={b:2}
let obj3={}
Object.assign(obj3,obj1,obj2)
console.log(obj3)
// {a:1,b:2}

10.13分组groupBy

js 复制代码

let inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

let result = Object.groupBy(inventory, ({ type }) => type);

// 结果如下：
// {
//   vegetables: [
//     { name: "asparagus", type: "vegetables", quantity: 5 },
//   ],
//     fruit: [
//     { name: "bananas", type: "fruit", quantity: 0 },
//     { name: "cherries", type: "fruit", quantity: 5 }
//   ],
//     meat: [
//     { name: "goat", type: "meat", quantity: 23 },
//     { name: "fish", type: "meat", quantity: 22 }
//   ]
// }

好啦，关于对象方法的知识点就总结到这里，如果有什么疑问、意见或建议，都可畅所欲言，谢谢大家，我也将持续更新。

预告：数组的操作方法太多，记不清？欢迎收看JavaScript基础的下一章：数组方法总结