JS进阶——深入对象

版权声明

本文章来源于B站上的某马课程,由本人整理,仅供学习交流使用。如涉及侵权问题,请立即与本人联系,本人将积极配合删除相关内容。感谢理解和支持,本人致力于维护原创作品的权益,共同营造一个尊重知识产权的良好环境。

 创建对象三种方式

利用对象字面量创建对象

const o = {name: '松果'
}

利用 new Object 创建对象

const o = new Object({ name: '松果' })
console.log(o) // {name: '松果'}
利用构造函数创建对象
//1. 它们的命名以大写字母开头。
//2. 它们只能由 "new" 操作符来执行。//创建构造函数
function Person(name, age, gender) {this.name = namethis.age = agethis.gender = gender
}const Dad = new Person('爸爸',50,'男')const Mum = new Person('妈妈',50,'女')
/*
1. 使用 new 关键字调用函数的行为被称为实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return,返回值即为新创建的对象
4. 构造函数内部的 return 返回的值无效,所以不要写return
5. new Object() new Date() 也是实例化构造函数
*/

实例成员&静态成员

实例成员:
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。
function Person(name, age, gender) {this.name = namethis.age = agethis.gender = genderthis.greet = function(){console.log('hello')}
}const p1 = new Person('松果','21','男')
console(p1.name)//访问实例属性
console.log(p1.greet)//调用实例方法
/*
1. 实例对象的属性和方法即为实例成员
2. 为构造函数传入参数,动态创建结构相同但值不同的对象
3. 构造函数创建的实例对象彼此独立互不影响。
*/
静态成员:
构造函数的属性和方法被称为静态成员
function Person(name,age){}
//静态属性
Person.eyes = 2
//静态方法
Person.greet = function(){console.log('hello')
}
/*
1. 构造函数的属性和方法被称为静态成员
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 this 指向构造函数本身
*/

内置构造函数

Object

Object 是内置的构造函数,用于创建普通对象。

const user = newObject({name:'小明',age:15})

推荐使用字面量方式声明对象,而不是Object构造函数

学习三个常用静态方法(静态方法就是只有构造函数Object可以调用的)
const o = { name:'松果',age:21 }
for (let k in o) {console,log(k) //属性 console.log(o[k])//值
}//Object.keys 静态方法获取对象中所有属性(键)
const arr1 = Object,key(o)
console.log(arr1)// ['name','age']//Object.values 静态方法获取对象中所有属性值
const arr2 = Object.values(o)
console.log(arr2)// ['松果',21]//Object. assign 静态方法常用于对象拷贝
const obj = {}
Object.assign(obj,o)
console,log(obj) // { name:'松果',age:21 }

Array

JS进阶——一些常用的数组方法-CSDN博客

<!--数组常见方法- 伪数组转换为真数组
静态方法 Array.from()-->
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>//  Array.from(lis) 把伪数组转换为真数组const lis = document.querySelectorAll('ul li')// console.log(lis)// lis.pop() 报错const liss = Array.from(lis)liss.pop()console.log(liss)</script>
</body>

String

const num = 10console.log(String(num))console.log(num.toString())

示例:

const gift = '50g的茶叶,清洗球'
document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】${item}</span> <br>`).join('')

Number

//toFixed() 设置保留小数位的长度
const price = 12.345
//保留两位小数 四舍五入
console.log(price.toFixed(2)) //12.35

综合案例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 100px auto 0;}.item {padding: 15px;transition: all .5s;display: flex;border-top: 1px solid #e4e4e4;}.item:nth-child(4n) {margin-left: 0;}.item:hover {cursor: pointer;background-color: #f5f5f5;}.item img {width: 80px;height: 80px;margin-right: 10px;}.item .name {font-size: 18px;margin-right: 10px;color: #333;flex: 2;}.item .name .tag {display: block;padding: 2px;font-size: 12px;color: #999;}.item .price,.item .sub-total {font-size: 18px;color: firebrick;flex: 1;}.item .price::before,.item .sub-total::before,.amount::before {content: "¥";font-size: 12px;}.item .spec {flex: 2;color: #888;font-size: 14px;}.item .count {flex: 1;color: #aaa;}.total {width: 990px;margin: 0 auto;display: flex;justify-content: flex-end;border-top: 1px solid #e4e4e4;padding: 20px;}.total .amount {font-size: 18px;color: firebrick;font-weight: bold;margin-right: 50px;}</style>
</head><body><div class="list"><!-- <div class="item"><img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt=""><p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p><p class="spec">白色/10寸</p><p class="price">289.90</p><p class="count">x2</p><p class="sub-total">579.80</p></div> --></div><div class="total"><div>合计:<span class="amount">1000.00</span></div></div><script>const goodsList = [{id: '4001172',name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',price: 289.9,picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',count: 2,spec: { color: '白色' }},{id: '4001009',name: '竹制干泡茶盘正方形沥水茶台品茶盘',price: 109.8,picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',count: 3,spec: { size: '40cm*40cm', color: '黑色' }},{id: '4001874',name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',price: 488,picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',count: 1,spec: { color: '青色', sum: '一大四小' }},{id: '4001649',name: '大师监制龙泉青瓷茶叶罐',price: 139,picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',count: 1,spec: { size: '小号', color: '紫色' },gift: '50g茶叶,清洗球,宝马, 奔驰'}]// 1. 根据数据渲染页面document.querySelector('.list').innerHTML = goodsList.map(item => {// console.log(item)  // 每一条对象// 对象解构  item.price item.countconst { picture, name, count, price, spec, gift } = item// 规格文字模块处理const text = Object.values(spec).join('/')// 计算小计模块 单价 * 数量  保留两位小数 // 注意精度问题,因为保留两位小数,所以乘以 100  最后除以100const subTotal = ((price * 100 * count) / 100).toFixed(2)// 处理赠品模块 '50g茶叶,清洗球'const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span> `).join('') : ''return `<div class="item"><img src=${picture} alt=""><p class="name">${name} ${str} </p><p class="spec">${text} </p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${subTotal}</p></div>`}).join('')// 3. 合计模块const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)// console.log(total)document.querySelector('.amount').innerHTML = total.toFixed(2)</script>
</body></html>

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

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

相关文章

FPS游戏之漫谈延迟补偿技术

在FPS游戏中&#xff0c;延迟补偿是一种常用的技术&#xff0c;用于解决由于网络延迟导致的玩家体验不一致的问题。对于投掷手雷这样的动作&#xff0c;延迟补偿的具体策略可能包括以下几个方面&#xff1a; 时间回溯&#xff08;Lag Compensation&#xff09;&#xff1a;服务…

liunx操作系统 进程的基本概念

进程的基本概念 计算机结构体系冯诺依曼 操作系统的管理进程进程的特性标识符系统的调用 创建新的进程 进程的状态进程队列进程的状态在liunx查看进程状态、 计算机结构体系 冯诺依曼 在没有存储器之前&#xff0c;所有的信息都是直接进入CPU&#xff0c;这样效率很差&#xf…

智慧公厕:打造智慧城市环境卫生新标杆

随着科技的不断发展和城市化进程的加速推进&#xff0c;智慧城市建设已经成为各地政府和企业关注的焦点。而作为智慧城市环境卫生管理的基础设施&#xff0c;智慧公厕的建设和发展也备受重视&#xff0c;被誉为智慧城市的新标杆。本文以智慧公厕源头厂家广州中期科技有限公司&a…

【Zotero插件】zotero better notes与zotcard联合使用 | 学习资源整理

整体学习&#xff1a; zotero官网&#xff1a;Zotero | Your personal research assistant 官网插件入口&#xff1a;plugins [Zotero Documentation] 初步学习zotero&#xff1a; 【Zotero零基础保姆级教程】 https://www.bilibili.com/video/BV1o3411Q7JQ/?share_source…

Java代码实现获取本机服务的IP地址

要通过Java代码获取一个IP地址的信息&#xff0c;你可以使用多种方法。其中一种常见的做法是通过IP地址查询服务API来获取详细信息&#xff0c;比如地理位置、ISP&#xff08;互联网服务提供商&#xff09;等。这里有一个简单的例子&#xff0c;展示如何使用Java代码调用一个公…

RRT算法学习及MATLAB演示

文章目录 1 前言2 算法简介3 MATLAB实现3.1 定义地图3.2 绘制地图3.3 定义参数3.4 绘制起点和终点3.5 RRT算法3.5.1 代码3.5.2 效果3.5.3 代码解读 4 参考5 完整代码 1 前言 RRT&#xff08;Rapid Random Tree&#xff09;算法&#xff0c;即快速随机树算法&#xff0c;是LaVa…

Latex中大括号书写多行方式【已解决】

在写论文时需要写一个非1即0的公式&#xff0c;因此写了这篇文章。 本文主要分为两个部分&#xff1a;1.在括号外赋值、2、在括号内赋值 1.在括号外赋值 示例 \begin{equation}A\begin{cases}1x, x \textgreater 0\\1-x, x \leq 0 \end{cases} \label{KD} \end{equation} 效…

qt_xml文件

文章内容 简单介绍xml文件的增删改查写生成和读取xml文件的例子增删改查 Qt提供了QDomDocument类来操作XML文件。 增加节点: QDomElement root = doc.createElement("root"); doc.appendChild(root);QDomElement element = doc.createElement("element"…

Dockerfile(4) - RUN 指令详解

RUN 运行命令 shell 形式 命令在 shell 中运行Linux 上默认为 /bin/sh -cWindows 上 cmd /S /C RUN <command> exec 形式 RUN ["executable", "param1", "param2"] 必须双引号&#xff0c;不能是单引号 两种写法的实际栗子 RUN …

Linux系统运维命令:终止监听在 TCP端口80上的所有进程(使用lsof,grep,awk组合命令, 终止监听在 TCP某个端口上的所有进程)

目 录 一、需求 二、解决方法 1、解决思路 2、命令 三、实例演示和命令解释 1、实例演示 &#xff08;1&#xff09;查看目前有哪些在TCP端口80监听的进程 &#xff08;2&#xff09;、使用命令 &#xff08;3&#xff09;、查看效果 2、命令解…

前端vue后端go实现大文件分片下载

先获取文件大小&#xff0c;然后将文件切片传输给前端&#xff0c;前端再按顺序组合所有切片。 vue /** 下载数据 */handleDownloadInstance(id, instanceName) {if (this.downloadProgressisVisible) {this.$showError(已经有文件在下载!)return}this.$showInfo(开始下载!)ge…

CrossOver2024电脑虚拟机软件详细介绍概述

CrossOver是由CodeWeavers开发的一款系统兼容软件&#xff0c;它能够在Mac和Linux操作系统上直接运行Windows应用程序&#xff0c;而无需创建或启动完整的Windows虚拟机。CrossOver通过模拟Windows应用程序所需的运行环境&#xff0c;实现了跨平台的无缝集成和高效运行。 Cross…

unity学习(42)——创建(create)角色脚本(panel)——UserHandler(收)+CreateClick(发)——服务器收包1

1.首先保证服务器接受到的信息正确&#xff0c;在服务器的LogicHandler.cs中做第一次分拣&#xff1a; public void process(Session session, SocketModel model) {try{switch (model.Type){case 0:LoginHandler.getInstance().process(session, model);break;case 1:MapHand…

LeetCode 3:寻找最长不含重复字符的子串长度

LeetCode 3&#xff1a;寻找最长不含重复字符的子串长度 在字符串处理中&#xff0c;寻找最长不含重复字符的子串长度是一个经典问题。 问题描述 给定一个字符串 s &#xff0c;我们需要找出其中不含有重复字符的最长子串的长度。 解决方案 我们可以使用滑动窗口的方法来解…

振动解调用的包络谱计算

1缘起 在振动分析中&#xff0c;对于一些高频频点的分析计算&#xff0c;使用包络谱技术&#xff0c;进而得到特化谱是最适宜的。 1.1 包络谱是什么样子的&#xff1f; 我们看matlab信号分析中提供的一个实例&#xff1a; https://www.mathworks.com/help/signal/ug/comput…

07_html

文章目录 引言前端概述分类 HTML快速入门重要的body标签注释hr标签br标签一些常见的标签标题标签div标签span标签p标签a标签img标签路径问题 ol和ul标签table标签input标签&#xff08;表单元素&#xff09;textarea标签&#xff08;表单元素&#xff09;select标签&#xff08…

Scrapy与分布式开发(2.1.2):python常用网络请求库httpx

Python httpx 模块详细讲解 一、引言 httpx 是一个用于发送 HTTP 请求的 Python 库,它提供了简单易用的 API,支持同步和异步请求,并且具有出色的性能和灵活性。httpx 是 requests 的一个现代替代品,它使用 httpcore 作为底层传输层,支持 HTTP/1.1 和 HTTP/2 协议。 二、…

软考50-上午题-【数据库】-SQL访问控制

一、SQL访问控制 数据控制&#xff0c;控制的是用户对数据的存储权力&#xff0c;由DBA决定。 DBA&#xff1a;数据库管理员。 DBMS数据控制应该具有一下功能&#xff1a; 1-1、授权语句格式 说明&#xff1a; 示例&#xff1a; 1-2、收回权限语句格式 示例&#xff1a; PUBLI…

C#知识点-19(七大设计原则、通过反射破坏单例设计模式、基于Task的异步编程模型、Winform中的异步)

通过反射&#xff0c;破坏单例设计模式 internal class Program{static void Main(string[] args){//懒汉式//for (int i 0; i < 10; i)//{// Thread th new Thread(() > {// LazyManClass lazyManClass LazyManClass.GetLazyMan();// });// th.Start…

Java Spring Boot面试题解析

1. 什么是 Spring Boot&#xff1f;【重点】 多年来&#xff0c;随着新功能的增加&#xff0c;Spring变得越来越复杂&#xff1b;一个Spring项目&#xff0c;我们必须做添加构建路径或添加Maven依赖关系&#xff0c;配置应用程序服务器&#xff0c;添加Spring配置等工作&#…