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基础的下一章:数组方法总结

相关推荐
带娃的IT创业者5 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰5 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost6 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11066 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白6 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学7 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽7 小时前
【初学】调试 MCP Server
前端·mcp
四月_h7 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate7 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古8 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers