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>

 

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

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

相关文章

【OPENMV】学习记录 (持续更新)

一、图像 1 设置彩色&#xff0f;黑白&#xff1a; sensor.set_pixformat() 设置像素模式。 sensor.GRAYSCALE: 灰度&#xff0c;每个像素8bit。sensor.RGB565: 彩色&#xff0c;每个像素16bit。 2 设置图像大小&#xff1a; sensor.set_framesize() 设置图像的大小 sensor.…

前端优化之图片压缩——tinyPNG

今天前端前辈新介绍的一个压缩图片的工具——tinyPNG&#xff0c;地址&#xff1a;TinyPNG – Compress WebP, PNG and JPEG images intelligently可以将图片压缩&#xff0c;进行优化。 一、使用方法——手动压缩 将超过200kb的图片拖到我标注的红框框里&#xff0c;拖到这里…

如何快速定位到影响mysql cpu飙升的原因——筑梦之路

通常我们只需要执行show processlist 进行查看&#xff0c;一般执行时间最长的SQL八九不离十就是罪魁祸首&#xff0c;但当show processlist的输出有近千条&#xff0c;那么很难第一眼就发现有问题的SQL&#xff0c;那么如何快速找到呢&#xff1f;其实也非常简单。我们知道mys…

多卡聚合智能融合通信设备在无人机无线视频传输应用

无人驾驶飞机简称“无人机”&#xff0c;是利用(无线电)遥控设备和自备的程序控制装置操纵的不载人飞行器&#xff0c;现今无人机在航拍、农业、快递运输、测绘、新闻报道多个领域中都有深度的应用。 无人机无线视频传输保证地面人员利用承载的高灵敏度照相机可以进行不间断的画…

HCIA--OSPF实验(复习)

实验拓扑&#xff1a; 实验思路&#xff1a; 1.规划IP&#xff0c;配置环回&#xff0c;接口IP 2.把R1&#xff0c;R2优先级改为0&#xff0c;让R1、R2放弃选举&#xff0c; [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ospf dr-priority 0 <r1>reset ospf…

【linux】线程同步和生产消费者模型

线程同步 当我们多线程访问同一个临界资源时&#xff0c;会造成并发访问一个临界资源&#xff0c;使得临界资源数据不安全&#xff0c;我们引入了锁的概念&#xff0c;解决了临界资源访问不安全的情况&#xff0c;对于线程而言竞争锁的能力有强有弱&#xff0c;对于之前就抢到…

图形学初识--颜色混合

文章目录 前言正文为什么要有颜色混合&#xff1f;颜色混合常见实现方式&#xff1f;上述颜色混合注意点 结尾&#xff1a;喜欢的小伙伴点点关注赞哦! 前言 本章节补充一下颜色混合的内容&#xff0c;主要包含&#xff1a;为什么要有颜色混合&#xff1f;颜色混合常实现方式&a…

外星人Alienware x17R1 原厂Windows11系统

装后恢复到您开箱的体验界面&#xff0c;包括所有原机所有驱动AWCC、Mydell、office、mcafee等所有预装软件。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http://w…

全文检索-ElasticSearch

1.基本概念 1.Index索引 动词&#xff1a;相当于MySQL中的insert&#xff1b; 名词&#xff1a;相当于MySQL中的DataBase&#xff1b; 2.Type&#xff08;类型&#xff09; 在Index&#xff08;索引&#xff09;中&#xff0c;可以定义一个或多个类型 类似于MySQL中的Tab…

Docker大学生看了都会系列(二、2.1Mac通过Homebrew安装Docker)

系列文章目录 第一章 Docker介绍 第二章 2.1 Mac通过Homebrew安装Docker 第二章 2.2 CentOS安装Docker 文章目录 前言Mac通过Homebrew安装本机环境系统要求terminal命令安装查看安装信息配置阿里云镜像加速登陆阿里云配置加速地址其他国内加速地址 总结 前言 在上一章了解了Do…

步进电机双闭环细分控制(matlab仿真)内含课设等参考文件

1.1 步进电机工作原理 步进电机是一种用电脉冲进行控制&#xff0c;将电脉冲信号转换成相位移的电机&#xff0c;其机械位移和转速分别与输入电机绕组的脉冲个数和脉冲频率成正比,每一个脉冲信号可使步进电机旋转一个固定的角度。脉冲的数量决定了旋转的总角度&#xff0c;脉…

FebHost:什么是国别国外域名以及用途?

在数字时代的浪潮中&#xff0c;互联网如同一张无形的网&#xff0c;将全球的人们紧密相连。尽管世界因此变得“更小”&#xff0c;但在网络上展示个人或企业身份时&#xff0c;标明国家归属或地理位置依然显得格外重要。今天&#xff0c;我们将深入探讨国别域名的重要性、使用…

查看所用数据库的版本

通过查询 SELECT VERSION();

java面试题及答案2024,java2024最新面试题及答案(之二)

四、反射 57. 什么是反射&#xff1f; 反射主要是指程序可以访问、检测和修改它本身状态或行为的一种能力 Java反射&#xff1a; 在Java运行时环境中&#xff0c;对于任意一个类&#xff0c;能否知道这个类有哪些属性和方法&#xff1f;对于任意一个对象&#xff0c;能否调…

顺序表的讲解与实现

顺序表的讲解与实现 一、顺序表的概念及结构二、顺序表分类顺序表和数组的区别顺序表分类静态顺序表动态顺序表 三、动态顺序表的实现(使用VS2022)1.初始化、销毁、打印内容2.检查扩容3.尾部插入、尾部删除、头部插入、头部删除尾部插入尾部删除头部插入头部删除 4.指定插入、指…

Go语言 几种常见的IO模型用法 和 netpoll与原生GoNet对比

【go基础】16.I/O模型与网络轮询器netpoller_go中的多路io复用模型-CSDN博客 字节开源的netPoll多路复用器源码解析-CSDN博客 一、几种常见的IO模型 1. 阻塞I/O (1) 解释&#xff1a; 用户调用如accept、read等系统调用&#xff0c;向内核发起I/O请求后&#xff0c;应用程序…

装机必备——鲁大师安装教程

装机必备——鲁大师安装教程 软件下载 软件名称&#xff1a;鲁大师 软件语言&#xff1a;简体中文 软件大小&#xff1a;144.75M系统要求&#xff1a;Windows7或更高&#xff0c; 32/64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM2G或更高 下载通道①迅雷云盘丨…

探究 Meme 的金融与社交属性

原文标题&#xff1a;《A Social and Financial Study of Memecoins》撰文&#xff1a;Andrew Hong编译&#xff1a;Chris&#xff0c;Techub News 每一个市场周期都伴随着 Meme 代币的出现。一群人围绕着某个 Meme 集结起来&#xff0c;暂时抬高了某个资产的价格&#xff08;从…

YOLOv5白皮书-第Y5周:yolo.py文件解读

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、环境 语言&#xff1a;Python3、Pytorch开发环境电脑系统&#xff1a;Windows 10语言环境&#xff1a;Python 3.9.2编译器&#xff1a;VS Code显卡&#…

LeetCode刷题之HOT100之组合总和

2024/6/3 周一&#xff0c;工作日的第一天。昨晚梦到被导师说去实验室不积极哈哈哈&#xff0c;风扇开到二级&#xff0c;早上被吹醒。买的书马上快要到了。上午刚来准备刷题&#xff0c;结果去搞了一下数据库sql&#xff0c;做的差不多了&#xff0c;还差点格式转换就差不多出…