详细讲一讲 JavaScript中对象的常用方法

这篇文章非常的重要和干货,基础对于很多人来说都是不重视的点,可往往更应该重视,在大厂中基础比一切都重要,好好看完这篇文章,你一定会收获满满!


1.Object.keys() - 获取对象的所有键:

const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 获取所有键名
const keys = Object.keys(user)
console.log(keys)  // ['name', 'age', 'city']

// 实际应用:遍历对象
Object.keys(user).forEach(key => {
    console.log(`${key}: ${user[key]}`)
})

2.Object.values() - 获取对象的所有值:

const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 获取所有值
const values = Object.values(user)
console.log(values)  // ['John', 30, 'New York']

// 实际应用:计算总和
const prices = {
    apple: 1,
    banana: 2,
    orange: 3
}
const total = Object.values(prices).reduce((sum, price) => sum + price, 0)

3.Object.entries() - 获取键值对数组:

const user = {
    name: 'John',
    age: 30
}

// 转换为键值对数组
const entries = Object.entries(user)
console.log(entries)  // [['name', 'John'], ['age', 30]]

// 实际应用:转换为 Map
const userMap = new Map(Object.entries(user))

// 遍历键值对
Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
})

4.Object.assign() - 合并对象:

// 基础合并
const target = { a: 1 }
const source = { b: 2 }
Object.assign(target, source)
console.log(target)  // { a: 1, b: 2 }

// 多个源对象
const result = Object.assign({}, 
    { a: 1 }, 
    { b: 2 }, 
    { b: 3 }  // 后面的会覆盖前面的
)
console.log(result)  // { a: 1, b: 3 }

// 实际应用:克隆对象
const clone = Object.assign({}, original)

// 注意:这是浅拷贝

5.Object.freeze() - 冻结对象:

const user = {
    name: 'John',
    age: 30
}

// 冻结对象
Object.freeze(user)

// 尝试修改会失败(严格模式下会报错)
user.name = 'Jane'  // 无效
delete user.age     // 无效
user.newProp = 'test'  // 无效

// 检查是否冻结
console.log(Object.isFrozen(user))  // true

// 注意:只冻结一层
const nested = {
    user: {
        name: 'John'
    }
}
Object.freeze(nested)
nested.user.name = 'Jane'  // 仍然可以修改嵌套对象

6.Object.seal() - 密封对象:

const user = {
    name: 'John',
    age: 30
}

// 密封对象
Object.seal(user)

// 可以修改现有属性
user.name = 'Jane'  // 有效

// 但不能添加或删除属性
delete user.age     // 无效
user.newProp = 'test'  // 无效

// 检查是否密封
console.log(Object.isSealed(user))  // true

7.hasOwnProperty() - 检查自有属性:

const user = {
    name: 'John'
}

// 检查属性是否属于对象本身
console.log(user.hasOwnProperty('name'))  // true
console.log(user.hasOwnProperty('toString'))  // false

// 安全的检查方式
const has = Object.prototype.hasOwnProperty.call(user, 'name')

8.Object.defineProperty() - 定义属性:

const user = {}

// 定义属性
Object.defineProperty(user, 'name', {
    value: 'John',
    writable: true,     // 是否可写
    enumerable: true,   // 是否可枚举
    configurable: true  // 是否可配置
})

// 定义访问器属性
Object.defineProperty(user, 'fullName', {
    get() {
        return `${this.firstName} ${this.lastName}`
    },
    set(value) {
        [this.firstName, this.lastName] = value.split(' ')
    }
})

9.Object.create() - 创建对象:

// 创建具有指定原型的对象
const person = {
    sayHi() {
        console.log('Hi!')
    }
}

const user = Object.create(person, {
    name: {
        value: 'John',
        writable: true
    }
})

user.sayHi()  // 继承的方法

10.解构和展开运算符:

const user = {
    name: 'John',
    age: 30,
    city: 'New York'
}

// 解构赋值
const { name, age } = user

// 重命名
const { name: userName } = user

// 默认值
const { country = 'USA' } = user

// 展开运算符
const clone = { ...user }

// 合并对象
const merged = { ...obj1, ...obj2 }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/947020.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PDF预览插件

PDF预览插件 可用于当前页面弹窗形式查看,可增加一些自定义功能 pdf预览插件 代码块: pdfobject.js <div class="pdfwrap"><div class="item"><h3>笑场</h3><div class="tags"><p>李诞</p><i&…

Echarts+vue电商平台数据可视化——webSocket改造项目

websocket的基本使用&#xff0c;用于测试前端能否正常获取到后台数据 后台代码编写&#xff1a; const path require("path"); const fileUtils require("../utils/file_utils"); const WebSocket require("ws"); // 创建WebSocket服务端的…

Transformer从零详细解读——DASOU讲AI

1. 从全局角度概括Transformer transformer的任务是什么&#xff1f; 进一步细化 进一步细化&#xff0c;注意&#xff1a;每个encoder结构相同&#xff0c;参数不同&#xff1b;decoder同理 原论文中的图如下&#xff1a; 2.Encoder 2.1 输入部分 &#xff08;1&#xff09…

696: Soldiers

曼哈顿距离&#xff08;Manhattan Distance&#xff09; 在二维空间中&#xff0c;两个点 (x1, y1) 和 (x2, y2) 的 曼哈顿距离 是&#xff1a; |x1 - x2| |y1 - y2| 曼哈顿距离描述了在网格上行走的距离&#xff0c;限制只能水平或垂直移动。 #include <iostream>…

自学记录鸿蒙API 13:实现多目标识别Object Detection

起步&#xff1a;什么叫多目标识别&#xff1f; 无论是生活中的动物识别、智能相册中的场景分类&#xff0c;还是工业领域的检测任务&#xff0c;都能看到多目标识别的身影。这次&#xff0c;我决定通过学习HarmonyOS最新的Object Detection API&#xff08;API 13&#xff09…

【Cesium】九、Cesium点击地图获取点击位置的坐标,并在地图上添加图标

文章目录 一、前言二、实现方法三、App.vue 一、前言 查找发现好几种方法可以获取到点击位置的坐标。这里我实现需求就不深究学习了。将几位大佬的方法学习过来稍微整合了一下。 本文参考文章&#xff1a; cesium 4种拾取坐标的方法 【Cesium基础学习】拾取坐标 cesium拾取当…

ts总结一下

ts基础应用 /*** 泛型工具类型*/ interface IProps {id: string;title: string;children: number[]; } type omita Omit<IProps, id | title>; const omitaA: omita {children: [1] }; type picka Pick<IProps, id | title>; const pickaA: picka {id: ,title…

人脑处理信息的速度与效率:超越计算机的直观判断能力

人脑处理信息的速度与效率&#xff1a;超越计算机的直观判断能力 关键词&#xff1a; #人脑信息处理 Human Brain Information Processing #并行处理 Parallel Processing #视觉信息分析 Visual Information Analysis #决策速度 Decision Speed #计算机与人脑比较 Computer v…

CentOS — 目录管理

文章目录 一、目录结构二、切换目录三、查看目录四、创建目录五、复制目录六、剪切目录七、删除目录 目录也是一种文件。 蓝色目录&#xff0c;绿色可执行文件&#xff0c;红色压缩文件&#xff0c;浅蓝色链接文件&#xff0c;灰色其它文件&#xff0c; 点开头的是隐藏文件&…

cursor设备ID修改器,你可以无限试用cursor了!

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…

springboot523基于Spring Boot的大学校园生活信息平台的设计与实现(论文+源码)_kaic

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本大学校园生活信息平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

RabbitMQ中的异步Confirm模式:提升消息可靠性的利器

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;扮演着至关重要的角色&#xff0c;它能够解耦系统组件、提高系统的可扩展性和可靠性。RabbitMQ作为一款广泛使用的消息队列中间件&#xff0c;提供了多种机制来确保消息的可靠传递。其中&#xff…

集线器,交换机,路由器,mac地址和ip地址知识记录总结

一篇很不错的视频简介 基本功能 从使用方面来说&#xff0c;都是为了网络传输的标识&#xff0c;和机器确定访问对象 集线器、交换机和路由器 常听到路由器和集线器&#xff0c;下面是区别&#xff1a; 集线器 集线器&#xff1a;一个简单的物理扩展接口数量的物理硬件。…

什么是 GPT?Transformer 工作原理的动画展示

大家读完觉得有意义记得关注和点赞&#xff01;&#xff01;&#xff01; 目录 1 图解 “Generative Pre-trained Transformer”&#xff08;GPT&#xff09; 1.1 Generative&#xff1a;生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式&#xff08;译注&#xff09; 1.2 Pr…

u3d中JSON数据处理

一.认识JSON 1.1 Json概述 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript对象表示法&#xff09;JSON和XML是比较类似的技术&#xff0c;都是用来存储文本信息数据的&#xff1b;相对而言&#xff0c;JSON比XML体积更小巧&#xff0c;但是易读性不如XML…

Android 模拟器系统镜像选择指南

Android 模拟器系统镜像选择指南 在选择 Android 模拟器的系统镜像时&#xff0c;根据实际需求选择合适的版本。以下是具体建议&#xff1a; 1. 目标 API Level 如果需要适配最新版本的 Android&#xff1a; 选择&#xff1a;API 35 (Android 14)&#xff08;代号&#xff1…

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…

打造三甲医院人工智能矩阵新引擎(一):文本大模型篇--基于GPT-4o的探索

一、引言 当今时代&#xff0c;人工智能技术正以前所未有的速度蓬勃发展&#xff0c;深刻且广泛地渗透至各个领域&#xff0c;医疗行业更是这场变革的前沿阵地。在人口老龄化加剧、慢性疾病患病率上升以及人们对健康需求日益增长的大背景下&#xff0c;三甲医院作为医疗体系的核…

mysql连接时报错1130-Host ‘hostname‘ is not allowed to connect to this MySQL server

不在mysql服务器上通过ip连接服务提示1130错误怎么回事呢。这个错误是因为在数据库服务器中的mysql数据库中的user的表中没有权限。 解决方案 查询mysql库的user表指定账户的连接方式 SELECT user, host FROM mysql.user;修改指定账户的host连接方式 update mysql.user se…

linux下安装达梦数据库v8详解

目录 操作系统、数据库 1、下载达梦数据库 2、安装前准备 2.1、建立数据库用户和组 2.2、修改文件打开最大数 2.3、挂载镜像 2.4、新建安装目录 3、数据库安装 4、配置环境变量 5、初始化数据库实例 6、注册服务 7、使用数据库 8、卸载数据库 9、多实例管理 10、…