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，一经查实，立即删除！

相关文章

梯度的计算

梯度的计算

文章目录 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*…
阅读更多...
浅谈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/下…
阅读更多...
浏览器打开本地应用和程序制作安装包

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

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

JVM内存问题排查

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

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

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》线性神经网络 softmax回归 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《…
阅读更多...
使用 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的灵感来自小龙虾的避暑、…
阅读更多...
springboot农机电招平台源码和论文

springboot农机电招平台源码和论文

随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#xff0c;并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单&#xff0c;变高效。…
阅读更多...
异常检测(Anomaly Detection)

异常检测(Anomaly Detection)

1.问题的动机 什么是异常检测呢&#xff1f;为了解释这个概念&#xff0c;让我举一个例子吧&#xff1a; 假想你是一个飞机引擎制造商&#xff0c;当你生产的飞机引擎从生产线上流出时&#xff0c;你需要进行QA(质量控制测试)&#xff0c;而作为这个测试的一部分&#xff0c;你…
阅读更多...
CSS自适应分辨率 postcss-pxtorem（适用于 Vite）

CSS自适应分辨率 postcss-pxtorem（适用于 Vite）

前言 此篇是基于 Vite Vu3 项目的 CSS 自适应分辨率&#xff01; 如果想知道基于 Webpack Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem&#xff08;适用于 Webpack&#xff09;》 项目对应的主要插件版本如下&#xff1a; "vite": "^4…
阅读更多...
纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒 引言 在数字时代的今天&#xff0c;大屏投放成为一种广泛应用的营销手段和传媒方式。纳斯达克大屏和路透社MIFI大屏作为两个重要的投放平台&#xff0c;为企业和机构提供了广告和宣传的机会。 纳斯达克大屏的魅力 纳斯达克大屏位于纽…
阅读更多...
Wpf 使用 Prism 实战开发Day14

Wpf 使用 Prism 实战开发Day14

备忘录接口增删&#xff08;CURD&#xff09;改查实现 一.添加备忘录控制器&#xff08;MemoController&#xff09; 备忘录控制器&#xff08;MemoController&#xff09;和待办事项控制器 &#xff08;ToDoController&#xff09;功能实现差不多一样。基本套路就是&#xff1…
阅读更多...
写点东西《JavaScript 中的递归》

写点东西《JavaScript 中的递归》

写点东西《JavaScript 中的递归》 您是否曾经发现自己需要在 JavaScript 中循环遍历一个复杂的多维对象&#xff0c;却不知道如何操作&#xff1f; 那么&#xff0c;递归函数到底是什么&#xff1f; 让我们回到我们的树对象。 为什么使用递归&#x1f31f;更多精彩 您是否曾经发…
阅读更多...
LabVIEW工业机器人系统

LabVIEW工业机器人系统

介绍了ABB工业机器人与LabVIEW之间进行数据交互的解决方案。通过使用TCP/IP协议的socket通信&#xff0c;实现了机器人坐标数据的读取&#xff0c;为人机交互提供了一个更便捷、更高效的新思路。 系统主要由ABB工业机器人、基于TCP/IP协议的通信接口和LabVIEW软件组成。工业机…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023