JS进阶-内置构造函数（二）

小提示：这些内置函数在开发使用的频率非常的频繁，建议认真看一下，并背一下

目录

知识回顾：

• Object

三个常用静态方法（静态方法就是只有构造函数Object可以调用的）

Object.keys

Object.values

Object. assign

• Array

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

​编辑forEach()

filter()

map

reduce（）

2.数组常见方法-其他方法 

join()

find()

every()

some()

contact()

sort()

splice()

reverse()

findindex

 3.数组特殊方法- 伪数组转换为真数组

静态方法 Array.from()

• String

1. 常见实例方法 

• Number

常用方法：

toFixed() 设置保留小数位的长度

综合案例：

知识回顾：

在 JavaScript 中最主要的数据类型有 6 种：

基本数据类型：

  • 字符串、数值、布尔、undefined、null

引用类型:

  • 对象

但是，我们会发现有些特殊情况：

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。 JS中几乎所有的数据都可以基于构成函数创建。 

内置函数如下：

引用类型

  • Object，Array，RegExp，Date 等

包装类型

  • String，Number，Boolean 等

• Object

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

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

三个常用静态方法（静态方法就是只有构造函数Object可以调用的）

  • Object.keys
  • 作用：Object.keys 静态方法获取对象中所有属性（键）
  • 语法：

注意： 返回的是一个数组 

Object.values

作用：Object.values 静态方法获取对象中所有属性值

语法：

注意： 返回的是一个数组 

  • Object. assign

作用：Object. assign 静态方法常用于对象拷贝

语法：

• Array

Array 是内置的构造函数，用于创建数组

创建数组建议使用字面量创建，不用 Array构造函数创建 

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

forEach()
filter()
map
reduce（）

作用：reduce 返回函数累计处理的结果，经常用于求和等

基本语法：

参数：

起始值可以省略，如果写就作为第一次累计的起始值 

累计值参数：

1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
 

使用场景：求和运算：

2.数组常见方法-其他方法 

join()
find()
every()
some()
contact()
sort()
splice()
reverse()
findindex

 3.数组特殊方法- 伪数组转换为真数组

知识回顾：Js种有那些是伪数组

  • 使用document.querySelectorAll()得到的数组
  • 在函数种的arguments参数也是一个伪数组
静态方法 Array.from()

这个方法一般不用，哈哈

• String

在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法

之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。

1. 常见实例方法 

• Number

Number 是内置的构造函数，用于创建数值

常用方法：
toFixed() 设置保留小数位的长度

综合案例：

 购物车展示
需求：
根据后台提供的数据，渲染购物车页面

分析业务模块：
①：渲染图片、标题、颜色、价格、赠品等数据
②：单价和小计模块
③：总价模块

<!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 渲染数据const str =  goodsList.map(item=>{// console.log(item);//解构数据对象   //如果对应的变量没有赋值，就默认值是undefinedlet {name,price,picture,count,spec,gift} = item//处理spec  --使用内置Object类的values方法spec = Object.values(spec).join('/')//处理giftgift = gift!==undefined?gift.split(',').map(item=>`<span class="tag">【赠品】${item}</span>`).join(''):''//渲染数据return  `<div class="item"><img src=${picture} alt=""><p class="name">${name} ${gift}</p><p class="spec">${spec}</p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${(price*count).toFixed(2)}</p></div>`}).join('')document.querySelector('.list').innerHTML = str//2统计全部金额const total = goodsList.reduce((prev,item)=>{return prev+item.count*item.price},0)document.querySelector('.amount').innerHTML = total.toFixed(2)</script>
</body></html>

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

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

相关文章

brpc负载均衡load balance和服务发现name servicing

brpc负载均衡load balance和服务发现name servicing

1.SharedLoadBalancer&#xff08;load_balancer.h&#xff09;&#xff1a;包含LoadBalancer指针_lb&#xff0c;AddServersInBatch 2.LoadBalancerWithNaming&#xff1a;继承SharedLoadBalancer和NamingServiceWatcher 2.1Init函数&#xff1a;SharedLoadBalancer::Init&a…
阅读更多...
梯度的计算

梯度的计算

文章目录 import torch as tc# 以函数f(x) x^2 为例子&#xff0c;求梯度 x1 tc.tensor(1,dtypetc.float64,requires_gradTrue) g1 tc.autograd.grad(x1**2,x1)[0] print(f"The grad of x**2 at {x1} is {g1}")(x1 ** 2).backward() print(f"The grad of x*…
阅读更多...
四、MySQL之增删改

四、MySQL之增删改

一、插入数据 1.1、VALUES的方式添加 使用这种语法一次只能向表中插入一条数据。 1.1.1、为表的所有字段按默认顺序插入数据 INSERT INTO 表名 VALUES (value1,value2,....);// 值列表中需要为表的每一个字段指定值&#xff0c;并且值的顺序必须和数据表中字段定义时的顺序相…
阅读更多...
浅谈WPF之UI布局

浅谈WPF之UI布局

一个成功的软件&#xff0c;离不开人性化的UI设计&#xff0c;如何抓住用户第一视觉&#xff0c;让用户产生依赖感&#xff0c;合适优雅的布局必不可少。本文以一些简单的小例子&#xff0c;简述WPF中布局 面板 控件的使用&#xff0c;仅供学习分享使用&#xff0c;如有不足之处…
阅读更多...
AWS 云监控工具

AWS 云监控工具

Amazon Web Services&#xff08;AWS&#xff09;是 Amazon 提供的云计算平台&#xff0c;为企业提供技术服务&#xff0c;包括计算能力、存储和数据库。借助 AWS&#xff0c;企业无需购买、拥有或维护物理数据中心和服务器&#xff0c;而 AWS 的即用即付方法使企业能够避免与 …
阅读更多...
vcruntime140.dll找不到的多种解决方法分享，修复vcruntime140.dll文件

vcruntime140.dll找不到的多种解决方法分享，修复vcruntime140.dll文件

当操作电脑软件的过程中弹出一个错误提示“vcruntime140.dll已加载,但找不到入口点”&#xff0c;这通常意味着程序所依赖的vcruntime140.dll文件可能已经丢失、遭到破坏&#xff0c;或者该文件的路径及位置在软件开发时未被正确配置。此外&#xff0c;这种情况还有可能是因为电…
阅读更多...
Windows11 Copilot助手开启教程(免费GPT-4)

Windows11 Copilot助手开启教程(免费GPT-4)

Windows11上开启Copilot助手教程踩坑指南 Copilot介绍Copilot开启步骤1、更新系统2、更改语言和区域3、下载 ViVeTool 工具4、开启Copilot 使用 Copilot介绍 Windows Copilot 是 Windows 11 中的一个新功能&#xff0c;它可以让你与一个智能助理进行对话&#xff0c;获取信息&…
阅读更多...
应用协议漏洞

应用协议漏洞

应用协议漏洞 一、rsync rsync是Linux下一款数据备份工具&#xff0c;支持通过rsync协议、ssh协议进行远程文件传输。其中rsync协议默认监听873端口 1.未授权访问 打开靶场 判断漏洞是否存在 rsync rsync://目标ip:端口读取文件 rsync rsync://47.99.49.128:873/src/tmp/下…
阅读更多...
2024年的Rust与Go，你看明白了吗？

2024年的Rust与Go，你看明白了吗？

Rust和Go哪个更好&#xff1f;你应该为下一个项目选择哪种语言&#xff0c;为什么&#xff1f;两者在性能、简单性、安全性、功能特性、规模化(scale)和并发性等方面如何比较&#xff1f;它们有什么共同点&#xff0c;又有什么根本区别&#xff1f;让我们通过Rust和Go的友好且公…
阅读更多...
浏览器打开本地应用和程序制作安装包

浏览器打开本地应用和程序制作安装包

1、引言 最近使用python开发一款windows应用&#xff0c;有一个需求是从浏览器打开本地应用。从网上查到可以通过注册表的方法完成需求。所以就需要往注册表写内容。因此应用需要在安装的时候写注册表。 2、安装包制作工具&#xff1a;NSISVNISEdit NSIS可以制作安装包&…
阅读更多...
JVM内存问题排查

JVM内存问题排查

本文又名《对JVM一窍不通的我快速开始排查应用内存问题》。主要系统性地整理了排查思路&#xff0c;为大家遇到问题时提供全面的排查流程&#xff0c;不至于漏掉某些可能性误入歧途浪费时间。 基本原则 由于本文的定位是Cookbook,基本原则是让整个流程能够系统化规范化的同时将…
阅读更多...
Nodejs一键发布脚本

Nodejs一键发布脚本

背景 前端项目或者nodejs项目分开发、测试、生产环境&#xff0c;有的没有没有接入 jenkins。每次都需要进行本地打包, 手动压缩上传到服务器目录&#xff0c;ssh 登录服务器后备份旧文件, 手动删除文件再将包解压到指定目录&#xff0c;操作流程比较繁琐&#xff0c;需要提前…
阅读更多...
Vue2学习之第六、七章——vue-router与ElementUI组件库

Vue2学习之第六、七章——vue-router与ElementUI组件库

路由 理解&#xff1a; 一个路由&#xff08;route&#xff09;就是一组映射关系&#xff08;key - value&#xff09;&#xff0c;多个路由需要路由器&#xff08;router&#xff09;进行管理。前端路由&#xff1a;key是路径&#xff0c;value是组件。 1.基本使用 安装vue-…
阅读更多...
蓝桥杯基础准备2

蓝桥杯基础准备2

一、排序库 1.1 数组排序 默认升序。 int[] a {1,2,5,8,3,4,6}; Arrays.sort(a); int len a.length; for(int i 0;i<len;i) {System.out.print(a[i]" "); } 用Lambda实现升序&#xff1a; //自定义排序使用lambda表达式 //一维数组要使用引用数据类型 Int…
阅读更多...
李沐《动手学深度学习》深度学习计算

李沐《动手学深度学习》深度学习计算

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》线性神经网络 softmax回归 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《…
阅读更多...
Java设计模式中的代理模式

Java设计模式中的代理模式

Java设计模式中的代理模式 代理模式是一种结构型设计模式&#xff0c;它提供了一个代理对象&#xff0c;以控制对其他对象的访问。代理可以充当中介&#xff0c;用于控制对真实对象的访问。 代码举例演示 静态代理&#xff1a; // 接口 interface Subject {void request();…
阅读更多...
使用 LinkAi 打造自己的知识库和数字人

使用 LinkAi 打造自己的知识库和数字人

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、LinkAi 介绍 二、文档库 2.1 创建知识库 2.2 配置知识库 2.3 Ai配置 2.4 导入文档 2.5 接入微信 三、扩展 四、总结…
阅读更多...
结合CSS一些样式属性和属性值进行案例演示

结合CSS一些样式属性和属性值进行案例演示

案例演示 图1 1.结构分析 文字部分用<p>标签定义&#xff0c;对于特殊显示的文本&#xff08;如导语、详情&#xff09;等可以用<em>、<strong>等格式化标签来定义&#xff0c;效果图如图2。 图2 2.样式分析 &#xff08;1&#xff09;控制段落文本的字体…
阅读更多...
一种改进的小龙虾优化算法大|Crayfish optimization algorithm（COA）|首次公开—原创代码

一种改进的小龙虾优化算法大|Crayfish optimization algorithm（COA）|首次公开—原创代码

1、简介 本文介绍一种新的全局优化算法——小龙虾优化算法Crayfish optimization algorithm&#xff08;COA&#xff09;&#xff0c;模拟了小龙虾的避暑行为、竞争行为和觅食行为。该成果于2023年9月最新发表在Artifcial Intelligence Review。 COA的灵感来自小龙虾的避暑、…
阅读更多...
Spring Boot更换Spring fox为Springdoc

Spring Boot更换Spring fox为Springdoc

文章目录 项目场景引入使用打完收工&#xff01; 项目场景 由于项目中使用Spring fox已经不维护更新了&#xff0c;代码扫描&#xff0c;扫出问题&#xff0c;需要将Spring fox更换为Spring Doc。 由于我们封装的框架有个配置需要关掉&#xff0c;否则就会查看相关依赖&#x…
阅读更多...
最新文章

Copyright @ 2022~2023