JS对象由浅入深

对象

对象(Object):JavaScript里的一种数据类型(引用类型),也是用于存储数据的

好处:可以用来详细的描述某个事物,是用键值对形式存储语义更明了

特点:对象数据是无序的,数组有序的

对象基本使用

对象由属性和方法组成

对象属性

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

  1. 属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 属性就是依附在对象上的变量(对象外是变量,对象内是属性)

1. 定义对象属性

<script>// 对象也是一种数据类型,保存数据同时可以更直观的描述事物// 1. 定义对象属性let pig = {sex: '男',age: 18,uname: '李白',}
</script>

2. 访问对象属性

声明对象,并添加了若干属性后,可以使用 . 获得对象中属性对应的值,我称之为属性访问

<script>// 对象也是一种数据类型,保存数据同时可以更直观的描述事物// 1. 定义对象属性let pig = {sex: '男',age: 18,uname: '李白',}// 2. 访问对象属性  对象.属性console.log(pig.age)  // 18console.log(pig.uname)  // 李白
</script>
对象方法

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

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数(对象外是函数,对象内是方法)

1.定义对象方法

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {uname: '李白',sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')}
}
console.log(pig)

2.调用对象方法

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

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {uname: '李白',sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')},sum: function (x, y) {  // 2// console.log(x + y)return x + y}
}
console.log(pig)// 2. 调用对象方法
pig.sing() // 唱歌
pig.dance()  // 跳舞// 3. 方法可以传递参数也可以有返回值,跟函数使用基本类似
let re = pig.sum(1, 2) // 1 实参
console.log(re)

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

操作对象

对象本质是无序的数据集合, 操作对象数据无非就是 增 删 改 查

<script>// 操作对象:对数据 查、增、改、删let pig = {uname: '李白',sing: function () {console.log('唱歌')}}// 1. 查: 对象.属性 对象.方法
console.log(pig.uname)  // 得到属性值
pig.sing()// 2. 增:对象.新属性 = 新值   对象.新方法 = function(){}
pig.age = 4
pig.dance = function () {console.log('轻舟已过万重山')
}
console.log(pig)// 3. 改:对象.属性 = 新值  对象.方法 = 新匿名函数
pig.uname = '杜甫'
pig.sing = function () {console.log('一行白鹭上青天')
}
console.log(pig)// 4. 删: 了解,因为我们很少对对象里面的数据做删除操作  delete
delete pig.age
delete pig.dance
console.log(pig)
</script>
查找属性的另外写法

对于多词属性比如中横线分割的属性,点操作就不能用了

我们可以采取: 对象[‘属性’] 方式, 单引号和双引号都阔以,当然也可以用于其他正常属性

<script>// 查询属性的另外写法  对象['属性'] 这个属性必须加引号let pig = {'pig-name': '李白',age: 118}
// console.log(pig.pig - name)  // NaN
console.log(pig['pig-name']) // 李白
console.log(pig['age']) // 118    === pig.age 
</script>

总结:多词属性或者需要解析变量的时候使用 [] 语法,其余的直接使用点语法

遍历对象

for 遍历对象的问题:

  • 对象没有长度length,而且是无序的

所以我们要利用 for in 遍历对象

语法:

for (let 变量 in 对象) {console.log(变量) // 属性名console.log(对象[变量]) // 属性值
}

示例:

<script>// 遍历对象let pig = {sex: '男',age: 18,uname: '李白',}// for (let key in pig) {
//   console.log(key)  // key 是属性  
//   console.log(pig[key]) // 对象[变量] 是值
// }for (let key in pig) {console.log(key)  // key 是属性   对象.属性// console.log(pig.key)   // pig.key  undefined  因为key是个变量不是属性// key  'sex'  'age'    对象[key]  对象['sex']  对象['age']console.log(pig[key])
}// 注意:数组遍历用传统for, for in 主要用来遍历对象
let arr = ['red', 'green', 'pink']
for (let k in arr) {console.log(k)// 得到字符串类型的索引号
}
</script>
  1. for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  2. 由于 k 是变量, 所以必须使用 [ ] 语法解析
  3. 一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值
  4. 一般不用这种方式遍历数组、主要是用来遍历对象

内置对象

内置对象:JavaScript内部提供的对象,包含各种属性和方法给开发者调用

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

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

Math

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

属性/方法作用说明
PI圆周率Math.PI 属性,返回圆周率
max找最大值Math.max(8, 3, 1) 方法,返回 8
min找最小值Math.min(8, 3, 1) 方法,返回 1
abs绝对值Math.abs(-1) 方法,返回 1
ceil向上取整Math.ceil(3.1) 方法,返回 4
floor向下取整Math.floor(3.8) 方法,返回 3
round四舍五入取整Math.round(3.8) 方法,返回 4, 遇到.5则舍入到相邻的在正无穷(+∞)方向上的整数
<script>// 内置对象Math // 1. PI 属性 圆周率console.log(Math.PI)// 2. max  方法 找最大值
console.log(Math.max(8, 4, 2)) // 8// 3. min  方法 找最小值
console.log(Math.min(8, 4, 2)) // 2// 4. abs 方法 取绝对值 
console.log(Math.abs(-1))  // 1// 5. ceil 方法 向上取整   ceil 天花板   往大了取
console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.5)) // 2
console.log(Math.ceil(1.8)) // 2
console.log(Math.ceil(-1.1)) //  -1
console.log(Math.ceil(-1.5)) //  -1
console.log(Math.ceil(-1.8)) //  -1// 6. floor 方法 向下取整  floor 地板  往小了取
console.log(Math.floor(1.1)) // 1
console.log(Math.floor(1.5)) // 1
console.log(Math.floor(1.8)) // 1
console.log(Math.floor(-1.1)) //  -2
console.log(Math.floor(-1.5)) //  -2
console.log(Math.floor(-1.8)) //  -2// 7. round 方法 四舍五入取整 
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(1.8)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.8)) // -2
console.log(Math.round(-1.5)) // -1
</script>

数学对象提供了比较多的方法,这里不要求强记,通过实际使用对象,加深对对象的理解。

[Math 想了解更多的静态方法](Math - JavaScript | MDN (mozilla.org))

随机数 random

lMath.random() 随机数, 返回一个0 - 1之间,并且包括0不包括1的随机小数 [0, 1)

如何生成0-10的随机整数

Math.floor(Math.random() * (10 + 1))

如何生成5-15的随机整数

Math.floor(Math.random() * (10 + 1)) + 5

如何生成N-M之间的随机整数

Math.floor(Math.random() * (M - N + 1)) + N
Math.floor(Math.random() * (差值 + 1)) + 最小值
<script>// 1. Math随机数  Math.random() // 1.1 随机的小数 0 ~1 之间// 1.2 能取到0,但是取不到1 [0, 1)// console.log(Math.random())
​// 2. 取 0 ~ 10 之间的一个随机整数// Math.random() * (10 + 1)// (0 ~ 0.99999) * 11// 0 ~ 10.99999// Math.floor(Math.random() * (10 + 1))// console.log(Math.floor(Math.random() * (10 + 1)))
​// 3. 取 5 ~ 15 之间的一个随机整数// Math.floor(Math.random() * (10 + 1))  0 ~ 10 // Math.floor(Math.random() * (10 + 1)) + 5  5 ~ 15 // console.log(Math.floor(Math.random() * (10 + 1)) + 5)
​// 4. 取 n ~ m 之间的一个随机整数  4 ~ 12 // Math.floor(Math.random() * (差值 + 1)) + 最小值console.log(Math.floor(Math.random() * (8 + 1)) + 4)
</script>

数据存储

内存中堆栈空间分配区别:

栈: 优点访问速度快,基本数据类型存放到栈里面

堆: 优点存储容量大,引用数据类型存放到堆里面

在这里插入图片描述

总结:有了变量先给const,如果发现它后面是要被修改的,再改为let

常用术语
术语解释举例
关键字在JavaScript中有特殊意义的词汇let、var、function、if、else、switch、case、break
保留字在目前的JavaScript中没意义,但未来可能会具有特殊意义的词汇int、short、long、char
标识(标识符)变量名、函数名的另一种叫法
表达式可以被求值的代码,一般配合运算符出现10 + 3、age >= 18
语句一段可执行的代码if () for()

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

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

相关文章

模型 FABE(特性 优势 好处 证据)法则

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。特性、优势、好处、证据&#xff0c;一气呵成。 1 FABE法则的应用 1.1 FABE法则营销商用跑步机 一家高端健身器材公司的销售代表正在向一家新开的健身房推销他们的商用跑步机。以下…

数控切割编程:探索精密制造的奥秘与挑战

数控切割编程&#xff1a;探索精密制造的奥秘与挑战 在现代化制造领域&#xff0c;数控切割编程以其高精度、高效率的特性&#xff0c;成为众多行业不可或缺的工艺手段。然而&#xff0c;对于初学者或外行人来说&#xff0c;数控切割编程往往显得神秘且复杂。本文将从四个方面…

【数据分享】中国电力年鉴(2004-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国电力统计数据资源——《中国电力年鉴》。这份年鉴涵盖了从2004年到2022年中国电力统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 自1993年首次出版以来&#xf…

【数据结构】链表与顺序表的比较

不同点&#xff1a; 顺序表和链表是两种常见的数据结构&#xff0c;他们的不同点在于存储方式和插入、删除操作、随机访问、cpu缓存利用率等方面。 一、存储方式不同: 顺序表&#xff1a; 顺序表的存储方式是顺序存储&#xff0c;在内存中申请一块连续的空间&#xff0c;通…

解决OpenCV读取目标图像,cv2.imshow出现闪退的问题

前言 本文是该专栏的第17篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 最近有粉丝朋友询问到OpenCV读取目标图像出现的一个问题,在基于python语言“使用OpenCV读取目标图像的时候,利用cv2.imshow函数出现闪退”的情况。 而本文,笔者将详细介绍针对上述问题,…

【硬件工程师话家常】硬件工程师的项目时间管理

在整个项目研发团队中&#xff0c;有两个人和所有人打交道&#xff0c;一个就是项目经理&#xff0c;另一个就是硬件工程师。硬件工程师需要和各种研发人员打交道 、协调工作&#xff0c;这也要求硬件工程师具有丰富的知识面和强大的协调能力。 硬件工程师处于一个项目中的核心…

Java运算符及程序逻辑控制

&#x1f389;welcome to my blog 请留下你宝贵的足迹吧(点赞&#x1f44d;评论&#x1f4dd;收藏⭐&#xff09; &#x1f493;期待你的一键三连&#xff0c;你的鼓励是我创作的动力之源&#x1f493; &#x1f423;目录 &#x1f340;运算符&#x1f4da;1.算术运算符&#x…

centos7安装jq报错No package jq available

安装EPEL仓库 sudo yum install epel-release清理软件仓缓存 sudo yum clean all重建软件仓缓存 sudo yum makecache重新安装jq yum install jq

python基础知识点(蓝桥杯python科目个人复习计划67)

今日复习内容&#xff1a;做一下昨天的算法赛题目&#xff0c;试试基础怎样 小白挑战赛一共6题&#xff0c;我只会5题&#xff0c;而且这5题是全对的&#xff0c;比起上次的两题&#xff0c;已经有进步了。 第一题&#xff1a;六一献礼 题目描述&#xff1a; 六月的阳光热情…

python判断文件是否存在

import os test_path "/Users/yxk/Desktop/test/GrayScale.tif" if(os.path.exists(test_path)):print(文件存在&#xff01;&#xff01;&#xff01;&#xff01;) else:print("文件不存在&#xff01;&#xff01;&#xff01;&#xff01;")结果如下 …

net前端怎么集成:探索集成之道

net前端怎么集成&#xff1a;探索集成之道 在软件开发领域&#xff0c;前端集成是一个复杂而关键的环节。特别是在.NET框架中&#xff0c;前端集成的成功与否直接影响着应用程序的整体性能和用户体验。本文将深入剖析net前端集成的四个方面、五个方面、六个方面和七个方面&…

RabbitMQ(四)事务消息,惰性队列,优先队列

文章目录 事务消息概念配置 惰性队列概念应用场景 优先队列概念配置 事务消息 仅在生产者端有效&#xff0c;消费端无效 概念 总结&#xff1a; 在生产者端使用事务消息和消费端没有关系在生产者端使用事务消息仅仅是控制事务内的消息是否发送提交事务就把事务内所有消息都发送…

Python知识点13---面向对象的编程

提前说一点&#xff1a;如果你是专注于Python开发&#xff0c;那么本系列知识点只是带你入个门再详细的开发点就要去看其他资料了&#xff0c;而如果你和作者一样只是操作其他技术的Python API那就足够了。 Python是一个完全面向对象开发的语言&#xff0c;它的一切都以对象的…

Java面试——专业技能

优质博文&#xff1a;IT-BLOG-CN 一、简单讲下 Java 的跨平台原理 由于各个操作系统&#xff08;Windows&#xff0c;Linux等&#xff09;支持的指令集不是完全一致的。就会让我们程序在不同的操作系统上要执行不同的程序代码。Java 开发了适用于不同操作系统及位数的 Java 虚拟…

【教程】自监督 对比学习,代码,爽学一波

from&#xff1a; https://docs.lightly.ai/self-supervised-learning/examples/simclr.html

代码随想录第22天|回溯part2 组合总和III电话号码的字母组合

216.组合总和III 当组合的数量为k就判断和&#xff0c;并且返回。 在枚举的时候可以进行剪枝&#xff0c;如果总和已经超过了n&#xff0c;那么就没必要继续递归下去了 class Solution { public:vector<int> path;vector<vector<int>> res;void backTrackin…

微信小程序手机号码授权登录

文章目录 一、微信小程序开发二、使用步骤1.前端代码2.后台配置3.后台代码 总结 一、微信小程序开发 目前个人的小程序无法使用手机号码授权登录&#xff0c;可以使用测试号进行开发 二、使用步骤 1.前端代码 代码如下&#xff08;示例&#xff09;&#xff1a; <butto…

Java版本家政上门系统源码,自主研发、安全可控,支持任意二次开发

家政上门系统源码&#xff0c;Java版本&#xff0c;自主研发、安全可控。支持任意二次开发、有丰富合作案例。多端管理&#xff1a;管理端、用户端、服务端。 技术参数&#xff1a; 技术架构&#xff1a;springboot、mysql 、Thymeleaf 开发语言&#xff1a;java1.8、vue 开…

python 象棋小游戏代码

以下是一个简单的Python象棋小游戏的代码示例。这个示例使用了pygame库来创建图形用户界面和处理用户输入。 首先&#xff0c;确保安装了pygame库&#xff1a; pip install pygame 然后&#xff0c;可以运行以下代码&#xff1a; import pygame import sys # 初始化pygam…

软件开发步骤详解

一、引言 随着信息技术的迅猛发展&#xff0c;软件已成为现代社会不可或缺的一部分。无论是企业运营、个人生活还是科学研究&#xff0c;都离不开各种软件的支持。因此&#xff0c;掌握软件开发的步骤和技巧对于IT从业者来说至关重要。本文旨在详细介绍软件开发的整个流程&…