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

JavaScript进阶笔记--深入对象-内置构造函数及案例

news 2025/9/19 1:23:40

深入对象

创建对象三种方式

利用对象字面量
new Object（{…}）
利用构造函数

// 1. 字面量创建对象const obj1 = {name: 'pig',age: 18};console.log(obj1); // {name: "pig", age: 18}// 2. 构造函数创建对象function Pig(name, age) {this.name = name;this.age = age;};const obj2 = new Pig('piki', 19);console.log(obj2);const obj3 = new Object({name: 'pigDaddy',age: 45})console.log(obj3);// 3. Object.create()方法创建对象const obj4 = Object.create(null);obj4.name = 'piggy';obj4.age = 20;console.log(obj4);

构造函数

【快速创建多个类似对象】 – 技术上常规函数，

但，

命名以字母大写开头
只能由“new”操作符执行 ==> 实例化

不用写return，写了也无效

过程

创建新对象
构造函数this指向新对象
执行构造函数代码
返回新对象

 // 构造函数function Goods(name, price, count) {this.name = name;this.price = price;this.count = count;}// 创建实例对象const mi = new Goods('xiaomi', 1999, 20);const wei = new Goods('huawei', 3999, 59);const vivo = new Goods('vivo', 1888, 100);// 输出实例对象的属性console.log(mi.name); // xiaomiconsole.log(mi.price); // 1999console.log(mi.count); // 20console.log(wei.name); // huaweiconsole.log(wei.price); // 3999console.log(wei.count); // 59console.log(vivo.name); // vivoconsole.log(vivo.price); // 1888console.log(vivo.count); // 100

实例&静态成员

分类

实例成员：实例对象中的属性和方法（结构相同但值不同）
静态成员：构造函数的属性和方法 – 相当于c++中的静态关键字static

静态成员方法中的this指向构造函数本省，如Math.random()就是静态方法

// 静态对象function Person() {this.name = 'John';this.age = 30;}//静态属性Person.eyes = 2;Person.arms = 2;//静态方法Person.walk = function () {console.log("你应该会走路吧，孩子");console.log(this.eyes);}Person.walk(); // 你应该会走路吧，孩子 2

内置构造函数

==> 字符串，数值，布尔值等都有方法和竖向【JS底层进行包装】

Object

==> 用于创建普通对象

Object.keys – 返回一个数组，关于对象的属性名

Object.values – 返回一个数组，关于对象的属性值

Object.assign(obj1,obj2) – 将obj2对象中的内容，复制到obj1中，多用于追加属性

name: '张三',age: 20}console.log(Object.keys(obj));console.log(Object.values(obj));//返回的是数组类型const obj1 = {name: 'ls',age: 26}Object.assign(obj1, { gender: 'man' })console.log(obj1);

Array

reduce – 返回累计处理结果，用于求和

返回一个值

语法

arr.reduce(function(上一次值，当前值){},初始值)

若由初始值，则改变累加结果

上一次值为

一开始第一次循环为初始值，若无，则为0
后来为上一次的上一次值+当前值

累加的过程总共循环n次

const arr = [1, 2, 3, 4, 5];const all = arr.reduce((pre, cur) => pre + cur, 0);console.log(all);const all2 = arr.reduce((pre, cur) => pre + cur, 10);console.log(all2);

方法	作用
`join`	将数组元素拼接为字符串
`find`	查找元素，返回第一个符合条件的元素，若没，则返回`undefinded`
`every`	如果所有元素都符合条件，则返回`true`，否则，则返回`false`
`some`	判断元素中如果由符合条件的，就返回`true`，否则，则返回`false`
`concat`	合并两个数组，返回一个新的数组
`sort`	对原数组的元素进行排序
`splice`	删除或替换原数组单元
`findIndex`	根据数组元素值来查找对应的索引值，若找不到，返回`-1`
`reverse`	反转数组，返回一个新数组

// join传参为拼接分隔符
const arr = ['I', 'am', 'spider', 'man'];const str = arr.join(' ');console.log(str);//findconst arr = [1, 2, 3, 4, 5];const isSix = arr.find((item) => item === 4);console.log(isSix);//every返回布尔值const arr = [1, 2, 3, 4, 5];const BigtoZero = arr.every(item => item > 0);console.log(BigtoZero);//some返回布尔值const arr = [3, 2, 4, 6, 8];const isOne = arr.some(item => item % 2 === 1)console.log(isOne);
//concatconst arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const newArr = arr1.concat(arr2);console.log(newArr);
//sortconst arr = [5, 3, 1, 2, 4];const sortArr = arr.sort((a, b) => b - a);console.log(sortArr);
//spliceconst arr = [1, 2, 2, 3, 4, 5, 6];const newarr = arr.splice(2);console.log(newarr);
//reverse
const arr = [5, 4, 3, 2, 1];const reverseArr = arr.reverse();console.log(reverseArr);
//findIndexconst arr = [1, 2, 3, 4, 5];const Three = arr.findIndex(item => item === 6);console.log(Three);

splice方法的注释

start: 指定修改的起始位置。

deleteCount: 表示要删除的元素数量。如果设置为0，则不会删除元素。

item1, …, itemN: 要添加到数组中的新元素。

Number

toFixed(n) – 保留几位小数，四舍五入，默认不保留小数

综合案例

根据后台提供的数据，渲染购物车页面

[!IMPORTANT]

如何有效利用JS方法来高效处理数据并渲染到页面上

<!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>//要取得得属性// name price--toFixed(2)保留两位小数 picture count spec--需要进行解构处理// 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.获取数据，对一些需要的数据进行解构和变换let str = ``;goodsList.forEach(goods => {const { name, price, picture, count, spec, gift } = goods;const price1 = price.toFixed(2);const whatStr = Object.values(spec).join('/');let giftArr;if (gift !== undefined) {giftArr = gift.split(',');}const countPrice = (price1 * count).toFixed(2);if (gift !== undefined) {str += `<div class="item"><img src="${picture}" alt=""><p class="name">${name}`giftArr.forEach(item => {str += `<span class="tag">【赠品】${item}</span>`})str += `<p class="spec">${whatStr}</p><p class="price">${price1}</p><p class="count">x${count}</p><p class="sub-total">${countPrice}</p></div>`} else {str += `<div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="spec">${whatStr}</p><p class="price">${price1}</p><p class="count">x${count}</p><p class="sub-total">${countPrice}</p></div>`}})//计算合计的价格const allMoney = goodsList.reduce((pre, item) => pre + (item.price * 100 * item.count) / 100, 0).toFixed(2);//2.将数据渲染到页面中const list = document.querySelector('.list').innerHTML = str;const total = document.querySelector('.amount').innerHTML = allMoney;</script>
</body></html>

展示效果：

在这里插入图片描述

JavaScript进阶笔记--深入对象-内置构造函数及案例

深入对象创建对象三种方式利用对象字面量new Object（{…}）利用构造函数 // 1. 字面量创建对象const obj1 {name: pig,age: 18};console.log(obj1); // {name: "pig", age: 18}// 2. 构造函数创建对象function Pig(name, age) {this.name…...

编程日记 2024/10/13 10:09:46

网络爬虫自动化Selenium模拟用户操作

自动化测试和网络爬虫在现代软件开发中占据着重要的位置。它们通过自动化用户操作，减少了人工重复操作的时间成本。Selenium作为一个功能强大且应用广泛的自动化工具，不仅能在不同的浏览器中运行自动化测试，还能进行跨平台测试，并允许与多种编程语言集成。本教程将介绍如何…...

编程日记 2024/10/13 10:05:42

尚硅谷rabbitmq 2024 流式队列2024指定偏移量第55节答疑

rabbitmq的stream： 4、对比 autoTrackingstrategy方式:始终监听Stream中的新消息(狗狗看家，忠于职守)指定偏移量方式:针对指定偏移量的消息消费之后就停止(狗狗叼飞盘，回来就完) 这两种分别怎么写？java 在 RabbitMQ 中&#xff0c…...

编程日记 2024/10/13 10:02:39

NSSCTF-WEB-pklovecloud

目录前言正文思路尝试结尾前言许久未见,甚是想念. 今天来解一道有意思的序列化题正文思路 <?php include flag.php; class pkshow {function echo_name(){return "Pk very safe^.^";} }class acp {protected $cinder;public $neutron;public $…...

编程日记 2024/10/13 10:01:38

深入Postman- 自动化篇

前言在前两篇博文《Postman使用 - 基础篇》《玩转Postman：进阶篇》中，我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能，给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上，Postman 也能进行良好的支…...

编程日记 2024/10/13 9:59:34

react-JSX

JSX理念 jsx在编译的时候会被babel编译为react.createELement方法在使用jsx的文件中，需要引入react。import React from "react" jsx会被编译为React.createElement,所有jsx的运行结果都是react element React Component 在react中，常使用…...

编程日记 2024/10/13 9:58:33

深度对比：IPguard与Ping32在企业网络管理中的应用

随着网络安全形势日益严峻，企业在选择网络管理工具时需慎之又慎。IPguard与Ping32是目前市场上两款颇具代表性的产品，它们在功能、性能以及应用场景上各有优势。本文将对这两款产品进行深度对比，以帮助企业找到最合适的解决方案。 IPguard以其…...

编程日记 2024/10/13 9:55:29

AI测试之 TestGPT

如今最火热的技术莫非OpenAI的ChatGPT莫属，AI技术也在很多方面得到广泛应用。今天我们要介绍的TestGPT就是一个软件测试领域中当红的应用。 TestGPT是什么？ TestGPT是一家总部位于以色列特拉维夫的初创公司 CodiumAI Ltd.，发布的一款用于测…...

编程日记 2024/10/13 9:51:23

JavaEE-进程与线程

1.进程 1.1什么是进程每个应⽤程序运⾏于现代操作系统之上时，操作系统会提供⼀种抽象，好像系统上只有这个程序在运⾏，所有的硬件资源都被这个程序在使⽤。这种假象是通过抽象了⼀个进程的概念来完成的，进程可以说是计算机科学…...

编程日记 2024/10/13 9:49:20

JAVA软开-面试经典问题（6）-equals与hashcode方法

1.equals方法 1.Object类中的equals方法比较的是两个对象的地址（底层原理是比较的，即比较的是对象的地址） return (this obj);2.基本数据类型的包装类和String类都重写了equals方法。基本数据类型：比较的是数值的是否相等 …...

编程日记 2024/10/13 9:47:17

计算机网络（以Linux讲解）

计算机网络网络协议初识协议分层OSI七层模型TCP/IP五层模型--初识网络中的地址管理IP地址MAC地址网络传输基本流程网络编程套接字预备知识网络字节序socket编程UDP socketTCP socket地址转换函数Jsoncpp 进程间关系与守护进程进程组会话控制终端作业控制守护进程网络命令TC…...

编程日记 2024/10/13 9:46:15

计算机网络基本架构知识点

1. 网络体系结构模型： - OSI 七层模型： - 物理层：是网络通信的基础层，负责在物理介质上传输比特流。该层定义了物理连接的标准，如电缆的类型、接口的形状、插头的规格等，以及信号的传输方式，包括…...

编程日记 2024/10/13 9:45:14

GES DISC 的 ATMOS L2 潜在温度网格上的痕量气体，固定场格式 V3 (ATMOSL2TF)

ATMOS L2 Trace Gases on Potential Temperature Grid, Fixed Field Format V3 (ATMOSL2TF) at GES DISC 简介 GES DISC 的 ATMOS L2 潜在温度网格上的痕量气体，固定场格式 V3 (ATMOSL2TF) 这是版本3的气溶胶痕量分子光谱（ATMOS）第二级产品…...

编程日记 2024/10/13 9:41:09

MLCC贴片电容不同材质区别：【及电容工作原理】

贴片电容的材质常规有：NPO（COG），X7R，X5R，Y5V 等，主要区别是它们的填充介质不同。在相同的体积下由于填充介质不同所组成的电容器的容量就不同，随之带来的电容器的介质损耗、容量稳定…...

编程日记 2024/10/13 9:39:07

Word粘贴时出现“文件未找到：MathPage.WLL”的解决方案

解决方案一、首先确定自己电脑的位数（这里默认大家的电脑都是64位）二、右击MathType桌面图标，点击“打开文件所在位置”，然后分别找到MathPage.WLL三、把这个文件复制到该目录下：C:\Program Files\Microsoft Office\r…...

编程日记 2024/10/13 9:38:06

前端开发笔记--html 黑马程序员1

文章目录前端开发工具--VsCode前端开发基础语法VsCode优秀插件Chinese --中文插件Auto Rename Tag --自动重命名插件open in browserOpen in Default BrowserOpen in Other Browser Live Server -- 实时预览前端开发工具–VsCode 轻量级与快速启动快速加载：VSCo…...

编程日记 2024/10/13 9:37:05

ARM/Linux嵌入式面经（四四）：华星光电

文章目录 1、自我介绍2、介绍一下你最得意的一个项目3、这个项目里面都用到了什么模块，什么型号，有什么作用4、移植操作系统的过程中，流程是什么，需要注意什么移植操作系统的流程需要注意的事项面试官可能的追问及回答5、你用的传感器挺多的，怎么保证传感器传输的稳定性，…...

编程日记 2024/10/13 9:36:04

帮助，有奖提问

<?php $u $_GET[“user”]; //变量获取 $v $_GET[“variable”]; //$v看flag，绕过正则 $flag‘flag{}; if(isset($u)&&(file_get_contents($u,‘r’)“im admin”)){//猜测data://协议 //检查u指向 echo “hello admin!<br>”; if(preg_…...

编程日记 2024/10/13 9:35:03

Java编辑工具IDEA

哪个编程工具让你的工作效率翻倍？ 在日益繁忙的工作环境中，选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度，甚至让团队协作更加顺畅。那么，哪款编程工具让你…...

编程日记 2024/10/13 9:34:00

闲谈Promise

预备知识回调函数：当一个函数作为参数传入另一个函数中，并且它不会立刻执行，当满足一定条件之后，才会执行，这种函数称为回调函数。比如：定时器。异步任务：与之对应的概念是同步任务&#xff0…...

编程日记 2024/10/13 9:32:59

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2025/9/18 16:34:04

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...

编程新知 2025/9/9 18:41:56

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2025/9/3 19:10:58

【Linux】自动化构建-Make/Makefile

前言上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...

编程新知 2025/9/7 8:49:38

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...

编程新知 2025/9/11 7:18:01

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景随着水产养殖行业的快速发展，养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下，而且难以实现精准监控和管理。为了提升尾水处理的效果和效率，同时降低人力成本，某大型水产养殖企业决定…...

编程新知 2025/9/18 12:48:45