JavaScript 进阶(二)

news2025/1/24 6:44:10

一、深入对象

1.  创建对象的三种方式

利用 new Object 创建对象

2.  构造函数

【注意事项】

【例】

这样子写好之后,想要添加一个新的结构类似的对象,直接照着红圈中写,最后改相应的数据就好了

注意:红色是第一步,黄色是第二步

这样子引用

【总结】

【练习】

黄框声明,蓝框引用

【补充】实例化执行过程

3.  实例动员&静态动员

(1)实例成员

是相互独立的,对于其他对象和其他成员是互不影响的

(2)静态成员

【总结】

二、内置构造函数

基本包装类型

1.  Object

注意:有了静态方法,不需要循环就可以得到全部数据

(1)获得所有的属性名 keys

【示例】

(2)获得所有的属性值 values

【示例】

(3)对象的拷贝 assign

注意:assign 经常用于给对象添加属性(追加属性)

【示例】

把后面的对象拷贝给前面的对象

【适用场景】 assign 经常用于给对象添加属性(追加属性)

【示例】

2.  Array

(1)数组常见实例方法 - 核心方法

① reduce

实现数组求和

① 没有初始值时,数组内所有元素相加

② 有初始值时,数组内所有元素相加,再加上最后的初始值

箭头函数的写法

结果也为24

无初始值

有初始值

【案例】

reduce 执行过程

(2)数组常见方法-其他方法

① find

② every 

每一个是否都符合条件,如果都符合返回true,否则返回false

③ some 

有一个符合条件,结果就返回true,都不符合则返回false

【练习】

注意:把所选的东西都放到一个盒子里面去

需要处理红框中的数据

这样处理

④ from 

把伪数组转变成真数组

3.  String

注意:转化字符串的两种方法

① split

分割字符串,将原来的字符串,拆分成数组

② substring

字符串的截取

③ startsWith

判断是不是以某个字母开头

返回结果也是 true 或者 false

注意:只要是以 p 开头的,不论什么,结果都是 true

④ includes 

判断某个字符是不是包含在一个字符串里面

【String 练习】

将上述结构中的 gift 内容部分取出来,再将内容渲染到 p 标签中,实现下图效果

【代码】

1.  把字符串拆分成数组

2.  根据数组元素的个数,生成对应的span标签

得到的结果仍然是一个数组

3.  把数组变为字符串

注意:这两部分等价

4.  Number

三、综合案例

效果图

1.  根据数据,渲染页面

注意:map 你有多少数据,就渲染多少个 

注意:每一个对象都返回一个 字符串(div)

2.  更换数据

① 换不需要处理的数据

注意:解构

可以不再使用 item.name item.id 等来获取对象中的数据

可以直接使用 解构时,给起的名字 来使用对象中的数据

item 是每一个对象

效果图

注意:toFixed(2)的意思是保留两位小数

注意:不要再 div 区域中,在任何一个位置加任何一个空格 

② 处理 型号颜色 模块

注意:蓝框中 将数组变为字符串

Object.values 获取到 spec 中的所有值

③ 处理赠品模块

如果有 gift 的话,则前面为真,执行黄框中的语句;没有的话,返回空字符串

用三元运算符

黄框中的语句,先把 gift 分解为数组,再遍历数组并添加元素,再将数组转变为字符串

3.  处理小计模块

4.  合计模块

注意:精度问题,保留两位小数,则乘以100进行计算后,再除以100

若保留一位小数,则乘以10,再除以10

四、【构造函数总结】

好啦!本次的分享到这里就结束啦!我们下次再见!!!

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

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

相关文章

大模型MoE技术深度解读,引领AI走向新高度

大模型系列之解读MoE Mixtral 8x7B的亮相,引领我们深入探索MoE大模型架构的奥秘。MoE究竟是什么?一起揭开它的神秘面纱。 1. MoE溯源 MoE,源自1991年的研究论文《Adaptive Mixture of Local Experts》,与集成学习方法相契合&…

水泡传感器内部结构

水泡传感器内部结构: 水泡传感器放大电路 电路是基于1.6V做的TIA I2V, 也就是输出部分基于1.6V做电压的增加或减少。

五分钟带大家理解什么是网络代理

网络代理是指一种特殊的网络服务,允许一个网络终端(一般为客户端)通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接,一些网关、路由器等网络设备都具备网络代理功能。它的功能就是代理网络用户…

【prometheus】prometheus基于consul服务发现实现监控

目录 一、consul服务发现简介 1.1 consul简介 二、prometheus配置 2.1 node-exporter服务注册到consul 2.2 修改prometheus配置文件 【Prometheus】概念和工作原理介绍_prometheus工作原理-CSDN博客 【Prometheus】k8s集群部署node-exporter 【prometheus】k8s集群部署p…

什么是TCP的粘包、拆包问题?

一、问题解析 TCP粘包和拆包问题是指在进行TCP通信时,因为TCP是面向流的,所以发送方在传输数据时可能会将多个小的数据包粘合在一起发送,而接收方则可能将这些数据包拆分成多个小的数据包进行接收,从而导致数据接收出现错误或者数…

PHP开发中的不安全反序列化

序列化是开发语言中将某个对象转换为一串字节流的过程,转换后的字节流可以方便存储在数据库中,也可以方便在网络中进行传输。而反序列化则是将数据库取出的字节流或从网络上接收到的字节流反向转换为对象的过程。概念虽如此,但不同的开发语言…

SerDes系列之电路技术概述

现在的高速电路设计中,SerDes的应用几乎无处不在,如下图所示的一款SoC,其外设接口除了少量普通的IO,几乎都是SerDes专用接口,因此,电路设计中对于SerDes接口电路的熟知程度,几乎就决定了设计的成…

[数据集][目标检测]电力场景电力目标检测数据集VOC+YOLO格式476张5类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):476 标注数量(xml文件个数):476 标注数量(txt文件个数):476 标注类别…

在Linux系统上使用nmcli命令配置各种网络(有线、无线、vlan、vxlan、路由、网桥等)

前言:原文在我的博客网站中,持续更新数通、系统方面的知识,欢迎来访! 在Linux系统上使用nmcli命令配置各种网络(有线、无线、vlan、vxlan等)https://myweb.myskillstree.cn/123.html 更新于2024/5/13&…

在Python中防止某些字段被Pickle序列化

在Python中,如果你想防止某些字段被pickle序列化,可以使用__reduce__()方法来自定义pickle行为。__reduce__()方法允许你返回一个元组,其中包含要在对象被pickle时调用的函数以及传递给该函数的参数。下面就是我遇到的问题以及最终解决方案。…

银行风险系统的全面解析:功能作用与系统间的互联互通

银行风险管理系统是银行为控制风险而建立的一套重要系统,主要用于评估、监测和控制银行面临的各种风险,包括信用风险、市场风险、操作风险等。 一、主要功能 风险识别:系统首先识别在业务开展中可能会面临的各种风险。这通常涉及对客户信息、…

JSP+SQL学生成绩管理系统

Java版本:1.8 数据库:MySQL 框架:Spring Spring MVC MyBatis 服务器:Tomcat 前端解析框架:Thymeleaf 开发工具:Idea 2017 版本管理工具:Maven 版本控制工具:GitHub 经过对系统的需…

STM32HAL库-中断篇

中断 中断简介 中断是一种事件处理机制,可以暂停主程序的运行,转而处理特定事件程序。 中断的作用和意义: 实时控制 在确定事件内对响应事件做出相应 故障处理 检测到故障需要第一时间处理 数据传输 如串口通信,不确定数…

基于springboot+vue+Mysql的交流互动系统

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

程序员的实用神器之——通义灵码

通义灵码介绍 “通义灵码”是一款基于阿里云通义代码大模型打造的智能编码助手,产品于2023年10月31日云栖大会上,正式对外发布。新手亦能驾轻,老手恒常运,唯手熟尔。 通义灵码产品介绍_智能编码助手_AI编程_云效(Apsara Devops)…

测试图像中的环与透镜效果。

我做了三张图片,发现我之前提出的环与带居然都存在。 这个图片的环不明显,需要放大才能看得出来,但是透镜效果,这里只能称之为带了。 这张图的环比较清晰,因为我做了更小的缩放。 制作环和带的过程是需要抗干扰&#…

Spring Boot 自动配置-响应式编程-022

🤗 ApiHug {Postman|Swagger|Api...} = 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱,有温度,有质量,有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace The Next Generation API Development Platform…

【Unity-Timeline进度条显示与拖动】

利用Unity 自带的Timeline 可轻松实现场景的巡检漫游效果, 基本使用参考以下链接: Unity中的Timeline Unity学习笔记——TimeLine的简单使用方法(一) 这里主要介绍如何通过滑动条控制播放的进度,效果图附上。 话不多说&#xff…

上海亚商投顾:沪指低开低走 两市成交额跌破8000亿

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 市场全天震荡走低,三大股指尾盘均跌近1%。地产股逆势走强,光大嘉宝、天地源、云南城投…

数据库-索引(高级篇)

文章目录 索引概念?索引演示?索引的优劣?为什么使用索引就快?本篇小结 更多相关内容可查看 索引概念? 索引(index)是帮助MySQL高效获取数据的数据结构(有序)。在数据之外,数据库系统…