当前位置: 首页 > news >正文

JavaScript 基础 - 对象

对象

对象是一种无序的数据集合,可以详细的描述描述某个事物。 注意数组是有序的数据集合。它由属性和方法两部分构成。

语法

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

  <script>let 对象名 = {属性名:属性值,方法名:函数}</script>
属性

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

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

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

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

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

let person = {name: '小明', age: 18
}

语法: 对象名.属性   对象[‘属性’] , 单引号和双引号都可
<script>let person = {name: '小明', age: 18, stature: 185,gender: '男', };// 访问人的名字console.log(person.name) console.log(person['name']) </script>

语法: 对象名.新属性 = 新值
 <script>// 声明一个空的对象(没有任何属性)let user = {}// 动态追加属性user.name = '小明'user['age'] = 18// 动态添加与直接定义是一样的,只是语法上更灵活</script>

语法:对象名.属性 = 新值 

 <script>let user = {name:'小红'
}// 动态追加属性user.name = '小明'</script>

语法一样,判断标准就是对象有没有这个属性,没有就是新增,有就是改 

删(了解)

 语法:delete 对象名.属性

方法和调用

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

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

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

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

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

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

 <script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,singing: function () {console.log('两只老虎,两只老虎,跑的快,跑的快...')},run: function () {console.log('我跑的非常快...')}}// 调用对象中 singing 方法person.singing()// 调用对象中的 run 方法person.run()
​</script>

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

 <script>// 声明一个空的对象(没有任何属性,也没有任何方法)let user = {}// 动态追加属性user.name = '小明'user.['age'] = 18// 动态添加方法user.move = function () {console.log('移动一点距离...')}</script>

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

null

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

遍历对象
目标:能够遍历输出对象里面的元素
for 遍历对象的问题:
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

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

k 是获得对象的 属性名 对象名[k] 是获得 属性值

内置对象

Math

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。提供了一系列做数学运算的方法。

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

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

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

    生成0-10之间的随机数

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

 

     生成N-M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

 

  • 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)

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

随机颜色案例

<body><script>function getRandomColor(flag = true) {//该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是rgb格式if (flag) {let str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 1; i <= 6; i++) {let random = Math.floor(Math.random() * arr.length)str += arr[random]}return str//如果参数为true或者无参数,则处理16进制颜色,核心思想是循环6次,生成随机的6个数字(取 值范围0~15),根据这个数字去找数组的值,然后和 # 拼接起来,并且返回值。} else {let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)return `rgb(${r},${g},${b})`//如果参数为false,随机生成一个0~255的数给三个变量,分别作为 r g b 三个颜色,之后拼接字 符串rgb(255,255,255)格式}}console.log(getRandomColor(true))console.log(getRandomColor(false))console.log(getRandomColor())</script>
</body>

 

相关文章:

  • 算法训练营第四十八天 | 卡码网57 爬楼梯、LeetCode 322 零钱兑换、LeetCode 279 完全平方数
  • 《雅思口语真经总纲1.0》笔记——第二章:官方评分标准真经——Fluency Coherence 流利度和连贯性(1、连贯性)
  • 深度学习知识与心得
  • 使用反射调用Android隐藏API
  • 算法简单笔记4
  • [FreeRTOS 基础知识] 栈
  • 【源码】多语言H5聊天室/thinkphp多国语言即时通讯/H5聊天室源码/在线聊天/全开源
  • 【vscode免密连接云服务器】
  • PHP 操作日期各种转换,常见日期转换,涉及聊天时间转换、涉及日周月年转换、涉及到图表日期转换
  • 【TB作品】MSP430F5529单片机,温控小风扇,DS18B20温度读取,PWM风扇
  • 【Git】在错误分支上开发了怎么办
  • WIFI 万[néng]钥匙 v5.0.10/v4.9.80 SVIP版!
  • 直播分享|深入解析ts-morph:通过注释生成类型文档
  • 102.网络游戏逆向分析与漏洞攻防-ui界面的设计-反隐身功能的界面设计与实现(有不使用MFC生成,自己手写代码创建复选框与事件的例子)
  • imx6ull - 制作烧录SD卡
  • fetch 从初识到应用
  • idea + plantuml 画流程图
  • in typeof instanceof ===这些运算符有什么作用
  • JS笔记四:作用域、变量(函数)提升
  • React+TypeScript入门
  • vue 个人积累(使用工具,组件)
  • vue2.0项目引入element-ui
  • vue-cli3搭建项目
  • WePY 在小程序性能调优上做出的探究
  • 大主子表关联的性能优化方法
  • - 概述 - 《设计模式(极简c++版)》
  • 回顾 Swift 多平台移植进度 #2
  • 入手阿里云新服务器的部署NODE
  • 十年未变!安全,谁之责?(下)
  • 收藏好这篇,别再只说“数据劫持”了
  • 用element的upload组件实现多图片上传和压缩
  • 正则与JS中的正则
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • #{} 和 ${}区别
  • #Z0458. 树的中心2
  • #宝哥教你#查看jquery绑定的事件函数
  • (1)Nginx简介和安装教程
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (7)STL算法之交换赋值
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (编译到47%失败)to be deleted
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二)hibernate配置管理
  • (二)PySpark3:SparkSQL编程
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (含答案)C++笔试题你可以答对多少?
  • (亲测有效)推荐2024最新的免费漫画软件app,无广告,聚合全网资源!
  • (四)linux文件内容查看
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)Oracle 9i 数据库设计指引全集(1)
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • .Net 6.0--通用帮助类--FileHelper
  • .NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法