JavaScript 对象入门:基础用法全解析

news2025/4/4 14:02:29

 

目录

对象

语法

属性和访问

方法和调用

this关键字

null

遍历对象

内置对象

Math

属性

方法

Date 

创建日期对象

获取和设置日期


⭐对象

对象是 JavaScript 数据类型的一种,数据类型也包括数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

✨语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

这是创建单个对象最直接的方法。只需简单地列出以逗号分隔的键值对,用花括号包围起来即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript对象</title>
</head>
<body>
​
  <script>
    // 声明字符串类型变量
    let str = 'hello world!'
    
    // 声明数值类型变量
    let num = 199
​
    // 声明对象类型变量,使用一对花括号
    // user 便是一个对象了,目前它是一个空对象
    let user = {}
  </script>
</body>
</html>

✨属性和访问

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

  1. 属性都是成对出现的,包括属性名,它们之间使用英文 : 分隔

  2. 多个属性之间使用英文 ',' 分隔

  3. 属性就是依附在对象上的变量

  4. 属性名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
​
  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象,它包含了一个属性 name
    // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }
  </script>
</body>
</html>

可以通过点符号或方括号访问对象的属性。点符号是最常见的访问属性的方式,但如果属性名包含特殊字符或者是变量,就需要使用方括号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
​
  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象,它包含了一个属性 name
    // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
    let person = {
      name: 'w', // 人的姓名
      age: 18, // 人的年龄
      stature: 185, // 人的身高
      gender: '男', // 人的性别
    };
    
    // 访问人的名字
    console.log(person.name) // w
    // 访问人性别
    console.log(person.gender) //  男
    // 访问人的身高
    console.log(person['stature']) //  185
   // 或者
    console.log(person.stature) //  185
  </script>
</body>
</html>

 

扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
​
  <script>
    // 声明一个空的对象(没有任何属性)
    let user = {}
    // 动态追加属性
    user.name = 'w'
    user['age'] = 8
    
    // 动态添加与直接定义是一样的,只是语法上更灵活
  </script>
</body>
</html>

修改和添加属性

// 修改属性
person.age = 35;

// 添加新属性
person.gender = "female";

console.log(person); // 输出: {name: "Alice", age: 35, gender: "female"}

删除属性

使用 delete 关键字可以从对象中删除属性。

delete person.age;
console.log(person); // 输出: {name: "Alice", gender: "female"}

✨方法和调用

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔

  2. 多个属性之间使用英文 , 分隔

  3. 方法是依附在对象中的函数

  4. 方法名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript  对象方法</title>
</head>
<body>
​
  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎,两只老虎,跑的快,跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
  </script>
</body>
</html>

声明对象,并添加了若干方法后,可以使用 .[] 调用对象中函数,称之为方法调用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象方法</title>
</head>
<body>
​
  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎,两只老虎,跑的快,跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()
​
  </script>
</body>
</html>

扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象方法</title>
</head>
<body>
​
  <script>
    // 声明一个空的对象(没有任何属性,也没有任何方法)
    let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }
    
  </script>
</body>
</html>

注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。

this关键字

this 关键字是一个特殊变量,它指向函数调用的上下文对象。在方法中使用 this 可以访问调用该方法的对象的属性。

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 输出: Hello, my name is Alice

✨null

null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object

📖遍历对象
let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}

 

for in 不提倡遍历数组 因为 k 是 字符串

⭐内置对象

回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()

除了 console 对象外,JavaScritp 还有其它的内置的对象

✨Math

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。

📖属性
  • Math.PI,获取圆周率

// 圆周率
console.log(Math.PI);
📖方法
  • Math.random,生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
  • Math.ceil,数字向上取整

// 舍弃小数部分,整数部分加1
Math.ceil(3.4)
  • Math.floor,数字向下取整

// 舍弃小数部分,整数部分不变
Math.floor(4.68)
  • Math.round,四舍五入取整

// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)
  • Math.max,在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)
  • Math.min,在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)
  • Math.pow,幂方法

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
  • Math.sqrt,平方根

// 求某数的平方根
Math.sqrt(16)

对于内置对象方法的使用,我们只需要勤加练习就可以熟练使用,不需要死记硬背。

✨Date 

Date 对象用于处理日期和时间。

📖创建日期对象

可以通过多种方式创建 Date 对象,包括使用当前日期和时间、指定日期和时间等。

let now = new Date();
let specificDate = new Date("2024-05-01");
let specificDateTime = new Date(2024, 5, 1, 15, 0, 0); // 2024年5月1日15点0分0秒
📖获取和设置日期

Date 对象提供了多种方法来获取和设置具体的日期和时间。

console.log(now.getFullYear()); // 获取年份
console.log(now.getMonth()); // 获取月份,注意月份是从0开始计数的
console.log(now.getDate()); // 获取日

now.setFullYear(2025);
now.setHours(20);
console.log(now); // 输出修改后的日期和时间

____________________

⭐感谢你的阅读,希望本文能够对你有所帮助。如果你喜欢我的内容,记得点赞关注收藏我的博客,我会继续分享更多的内容。⭐

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Apache访问控制与虚拟主机

目录 一. Web服务简介 以下是一些 Web 服务的基本概念和特征 以下是一些主流的 Web 服务器 WEB 服务协议 二. Apache 服务的搭建与配置 2.1 Apache 介绍 2.2 Apache安装 2.3 Apache目录介绍 三. 访问控制 四. 修改默认网站发布目录 五. 虚拟主机 5.1 基于域名的虚拟…

Java入门——继承和多态(下)

抽象类 语法规则 在上一篇文章刚才的打印图形例子中, 我们发现, 父类 Shape 中的 draw 方法好像并没有什么实际工作, 主要的绘制图形都是由 Shape 的各种子类的 draw 方法来完成的. 像这种没有实际工作的方法, 我们可以把它设计成一个 抽象方法 包含抽象方法的类我们称为 抽象…

试试这四款高效AI论文写作工具和降重技术

在科研领域&#xff0c;AI写作工具如同新一代的科研利器&#xff0c;它们能够极大提高文献查阅、思路整理和表达优化的效率&#xff0c;本质上促进了科研工作的进步。AI写作工具不仅快速获取并整理海量信息&#xff0c;还帮助我们精确提炼中心思想&#xff0c;显著提升论文写作…

花趣短视频源码淘宝客系统全开源版带直播带货带自营商城流量主小游戏功能介绍

1、首页仿抖音短视频 &#xff0c;关注 &#xff0c;我的 本地 直播 可发布短视频 可录制上传 2、商城页面 广告位、淘口令识别、微信登录、淘宝登录、淘宝返佣、拼多多返佣、京东返佣、唯品会返佣、热销榜、聚划算、天猫超市、9.9包邮、品牌特卖、新人攻略 、小米有品、优惠加…

【JavaEE网络】HTTPS详解:从对称与非对称加密到证书认证

目录 HTTPSHTTPS 是什么“加密” 是什么HTTTPS 的工作过程引入对称加密引入非对称加密引入证书完整流程总结 HTTPS HTTPS 是什么 HTTPS 也是一个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层. HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输过程中出现…

openGemini v1.2.0版本正式发布,IoT 场景性能大幅提升!

在openGemini v1.2.0版本中&#xff0c;我们为您带来了一系列令人振奋的内核优化&#xff0c;将您的体验提升到新的高度&#xff0c;这包括 针对IoT场景的性能优化&#xff0c;查询效率有极大的提升。针对数据存储的优化&#xff0c;进一步节约磁盘空间&#xff0c;降低数据存…

MySQL基础指南:从入门到精通

MySQL基础指南&#xff1a;从入门到精通 MySQL是一个流行的开源关系型数据库管理系统&#xff0c;被广泛用于Web应用程序和服务器端开发。本文将从MySQL的基本概念开始&#xff0c;逐步介绍MySQL的安装、常用操作、数据类型、查询语句等内容&#xff0c;帮助你快速入门MySQL数…

雇佣 K 位工人的总代价

题目链接 雇佣 K 位工人的总代价 题目描述 注意点 costs[i]是雇佣第 i 位工人的代价每一轮雇佣后&#xff0c;剩余工人的下标可能会发生变化一位工人只能被选择一次如果剩余员工数目不足 candidates 人&#xff0c;那么下一轮雇佣他们中代价最小的一人如果有多位代价相同且最…

排序-堆排序(Heap Sort)

堆排序&#xff08;Heap Sort&#xff09;是一种基于比较的排序算法&#xff0c;它利用了完全二叉树的特性&#xff0c;将待排序的序列构造成一个大顶堆&#xff08;每个父节点的值都大于或等于其子节点的值&#xff09;或小顶堆&#xff08;每个父节点的值都小于或等于其子节点…

哪个品牌led灯好?五大好用护眼台灯推荐

哪个品牌led灯好&#xff1f;目前LED护眼台灯当中做得比较好的有明基、松下、书客等品牌。在如今LED灯市场的海洋中&#xff0c;选择一款可靠的护眼台灯变得愈发重要。然而&#xff0c;众多品牌和产品的涌现也让消费者面临着选择困难。为了帮助大家找到最合适的LED台灯&#xf…

【亿事君】1688专业级知识库-阿里巴巴诚信通运营必修课程

01 课程介绍 课程来自亿事君老师的1688专业级知识库/白皮书/全攻略/阿里巴巴诚信通运营必修课程&#xff0c;价值1588元。这是一门系统的学习运营课程&#xff0c;干货满满&#xff0c;诚意十足。主要内容包括&#xff1a;基础、权重、活动玩法、付费流量玩法等&#xff0c;运…

中国196个城市边界

中国196个城市的城市边界形状文件是通过对Li等人&#xff08;2018&#xff09;的输出进行处理和过滤生成的。根据全球人工不可渗透区域 &#xff08;GAIA&#xff09; 数据绘制全球城市边界。 城市建成区边界是城市研究中的一个重要指标&#xff0c;在很多城市研究中都会涉及到…

一键同步用户信息和组织架构,简化用户管理,可道云teamOS插件化集成LDAP/AD的实战应用

随着企业规模的扩大和全球化布局的加深&#xff0c;管理分散在全球各地的员工和用户信息成为了企业IT部门的一大挑战&#xff0c;传统的手动添加用户和管理权限的方式已经无法满足需求。 有没有能自动同步用户信息和组织架构的企业网盘呢&#xff1f; teamOS插件化集成LDAP/AD…

CorelDRAW2024新特性全解析!

CorelDRAW2024是一款备受赞誉的图形设计软件&#xff0c;它以其强大的功能和用户友好性赢得了全球数百万设计师的青睐。该软件提供了丰富的绘图、排版、图像处理、矢量编辑以及网页设计工具&#xff0c;无论是初学者还是专业设计师&#xff0c;都能在这款软件中找到满足自己需求…

升级版ComfyUI InstantID 换脸:FaceDetailer + InstantID + IP-Adapter

在使用ComfyUI的InstantID进行人脸替换时&#xff0c;一个常见问题是该工具倾向于保留原始参考图的构图&#xff0c;即使用户的提示词与之不符。 例如&#xff0c;即使用户提供的是大头照并请求生成全身照&#xff0c;结果仍是大头照&#xff0c;没有显示出用户所期望的构图。…

JavaScript不仅有变量声明,还有变量提升

起因&#xff1a;&#x1f447; 一道面试题 最近&#xff0c;一位朋友参加面试时&#xff0c;遇到了这样一道笔试题&#xff0c;引起了我的兴趣&#xff1a; var foo 1; function fn() {foo 3;return;function foo() {// ...} } fn(); console.log(foo);这个例子中包含了变…

HQChart使用教程98-右键菜单2.0使用介绍

HQChart使用教程98-右键菜单2.0使用介绍 内置右键菜单启用右键菜单定制右键菜单内容1. 注册内置右键菜单创建回调事件2. 修改内置菜单的显示内容回调函数格式菜单数据结构示例 3. 注册菜单项点击事件回调 右键事件完整示例HQChart代码地址 内置右键菜单 HQChart h5版本内置提供…

Python-VBA函数之旅-tuple函数

目录 一、tuple函数的常见应用场景 二、tuple函数使用注意事项 三、如何用好tuple函数&#xff1f; 1、tuple函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a; https://myelsa1024.blog.csdn.net/ 一、tu…

U盘打不开提示格式化怎么办?(含数据恢复及U盘修复教程)

引言&#xff1a; 随着数字化时代的发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘突然无法打开&#xff0c;并提示需要格式化的问题。这不仅会打乱我们的工作节奏&#xff0c;还可能会导致重要数据丢失。本文…

环保访谈|聚英环保:以创新科技引领工业环保

近期&#xff0c;中联环保圈希姐对浙江聚英环保科技有限公司负责人王江进行了专访&#xff0c;就公司的发展、核心产品以及合作客户等方面进行了深入交流。 浙江聚英环保科技有限公司成立于2012年&#xff0c;总占地面积超过3万平方米&#xff0c;拥有标准化的生产车间和先进的…