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

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

news 2026/2/9 21:52:57

深入对象

创建对象三种方式

利用对象字面量
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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形总结前言学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...

编程新知 2026/2/8 18:25:56

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2026/2/5 4:25:15

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务三、…...

编程新知 2026/1/25 6:36:06

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题，前来答题。每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

蓝桥杯3498 01串的熵

问题描述对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50