js ES6 part2

forEach遍历

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

主要使用场景: 遍历数组的每个元素

语法
被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
//函数体
})

1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的,索引号可选。

<script>
// forEach就是遍历  加强版的for循环 适合于遍历数组对象 有点像C17的const auto i:
const arr ['red', 'green', 'pink']
constIresult arr. forEach(function (item, index){console.log(item)//数组元素 red green pink console.log(index)/索引号
)
// console. Log(result) 
</script>

和map不一样,map有返回值,可以用来处理数组,然后返回新数组,forEach是加强版for循环,可以遍历数组对象,对里面的数据进行处理,不如插入到哪个dom元素等

<body><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>const goodsList = [{id: '4001172',name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',price: '289.00',picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',},{id: '4001594',name: '日式黑陶功夫茶组双侧把茶具礼盒装',price: '288.00',picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',},{id: '4001009',name: '竹制干泡茶盘正方形沥水茶台品茶盘',price: '109.00',picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',},{id: '4001874',name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',price: '488.00',picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',},{id: '4001649',name: '大师监制龙泉青瓷茶叶罐',price: '139.00',picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',},{id: '3997185',name: '与众不同的口感汝瓷白酒杯套组1壶4杯',price: '108.00',picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',},{id: '3997403',name: '手工吹制更厚实白酒杯壶套装6壶6杯',price: '99.00',picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',},{id: '3998274',name: '德国百年工艺高端水晶玻璃红酒杯2支装',price: '139.00',picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',},]// 1. 声明一个字符串变量let str = ''// 2. 遍历数据 goodsList.forEach(item => {// console.log(item)  // 可以得到每一个数组元素  对象 {id: '4001172'}// const {id} =  item  对象解构const { name, price, picture } = itemstr += `<div class="item"><img src=${picture} alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`})// 3.生成的 字符串 添加给 list document.querySelector('.list').innerHTML = str</script>
</body>

163筛选商品案例

深入对象

创建对象三种方式

1. 利用对象字面量创建对象

const o = {name:'字面量'
}


2. 利用 new Object 创建对象

<script>// const obj = new Object()// obj.uname = 'pink老师'// console.log(obj)const obj = new Object({ uname: 'pink' })console.log(obj)</script>


3. 利用构造函数创建对象 

构造函数

构造函数 :是一种特殊的函数,主要用来初始化对象,就是oop的类

使用场景: 常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过 构造函数 来 快速创建多个类似的对象 。
构造函数在技术上是常规函数。
不过有两个约定:
1. 它们的命名以 大写字母开头 。
2. 它们只能由 " new " 操作符来执行。
构造函数语法: 大写字母开头的函数

  <script>// 创建一个猪 构造函数 function Pig(uname, age) {this.uname = unamethis.age = age}console.log(new Pig('佩奇', 6))console.log(new Pig('乔治', 3))const p = new Pig('佩奇', 6)console.log(p)</script>

1. 使用 new 关键字调用函数的行为被称为 实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return,返回值即为新创建的对象,即自动返回创建的新对象
4. 构造函数内部的 return 返回的值无效,所以不要写return
5. new Object() new Date() 也是实例化构造函数

function Goods(name, price, count){ this. name name
this. price price this. count count
const mi = new Goods('小米', 1999,20) console.log(mi)
const hw = new Goods('华为', 3999,59) console. log(hw)
// const date = new Date('2022-4-8') / consoLe. Log(date)

new实例化过程

 实例成员和静态成员

实例成员:
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。

JS中其实是没有堆和栈的概念的

构造函数的属性和方法被称为静态成员

function Pig(name) {
this.name = name
}
Pig.eyes = 2 // 静态属性
I
Pig.sayHi = function (){ // 静态方法
console.log(this)
}
Pig.sayHi()
console.log(Pig.eyes) // 2

内置构造函数

在 JavaScript 中 最主要 的数据类型有 6 种:
基本数据类型: 字符串、数值、布尔、undefined、null
引用类型: 对象
但是,我们会发现有些特殊情况: 
其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为 包装类型 。
JS中几乎所有的数据都可以基于构造函数创建
引用类型 :Object,Array,RegExp,Date 等
包装类型 :String,Number,Boolean 等

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

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

第一种方法
1.Object.keys
作用: Object.keys 静态方法获取 对象中所有属性(键)
语法:<script>const o = { uname: 'pink', age: 18 }// 1.获得所有的属性名console.log(Object.keys(o))  //返回数组['uname', 'age']</script>
注意: 返回的是一个 数组
第二种方法
  <script>const o = { uname: 'pink', age: 18 }// 2. 获得所有的属性值console.log(Object.values(o))  //  ['pink', 18]</script>
第三种方法
  <script>const o = { uname: 'pink', age: 18 }// 3. 对象的拷贝const oo = {}Object.assign(oo, o)console.log(oo)Object.assign(o, { gender: '女' })console.log(o)</script>

 reduce数组

作用: reduce 返回函数累计处理的结果,经常用于求和等
基本语法:arr.reduce(function(累计值, 当前元素){}, 起始值) 
参数: 起始值可以省略,如果写就作为第一次累计的起始值

arr.reduce(function(){},起始值)// 1. 没有初始值
const total = arr.reduce(function (prev, current) {return prev + current 
})console.log(total)// 上一次值 当前值 返回值(第一次循坏)1       5      6// 上一次值 当前值 返回值 (第二次循坏)6       8     14const arr = [1, 5, 8]
// 2. 有初始值
const total = arr.reduce(function (prev, current) {
return prev + current
}, 10)
console.log(total)// 上一次值 当前值 返回值(第一次循坏)10       1      11// 上一次值 当前值 返回值 (第二次循坏)11      5    16// 上一次值 当前值 返回值(第三次循坏)16       8      24
计算薪资案例
const arr =[{
name:'张三', salary: 10000 },{
name:'李四', salary: 10000 },{
name:'王五', salary: 10000 }]
//计算薪资案例
const total = arr. reduce((prev, current)=>{ // consoLe. Log(prev)
return prev current. salary ), 0)
console.log(total) 
上一次值
当前值 返回值 (第一次遍历) 
10000
10000 ∥上一次值
当前值
返回值(第二次遍历) //10000
10000
20000 上一次值
当前值返回值(第三次遍历) /20000
1000030000
//需求:每个人涨薪30%,当月支出多少薪资
const total arr. reduce((prev, current) = prev current.salary 1.3, console.log(total)
∥上一次值
当前值 返回值
(第一次遍历) /
13000
13000 /上一次值
当前值 返回值
(第二次遍历) /13000
13000
26000 ∥上次值
当前值
返回值(第三次遍历) //26000
13000 39000 

array

 

const arr =[
{
name:'小米', price: 1999 
},
{
name:'华为',
price: 3999
},]
//找小米这个对象,并且返回这个对象/ 
const mi arr. find(function (item){console. Log(item)//consoLe. Log(item. name)// 
console. Log(111)return item.name==='华为'
})
const mi = arr.find(item =>item.name =='小米') 
console.log(mi)

const spec ={ size: '40cm*40cm', color:'黑色'} 
//1.所有的属性值回去过来数组
// console. Log(Object. values(spec)) 
//2.转换为字符串join('/')
// console. Log(Object. vaLues(spec). join('/))
document. querySelector('div'). innerHTML Object. values(spec). join('/') 

string

1.实例属性length用来获取字符串的度长(重点)1.常见实例方法

2.实例方法split(分隔符')用来将字符串拆分成数组(重点)

3.实例方法substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取(重点)

4.实例方法startswith(检测字符串[,检测位置索引号])检测是否以某字符开头(重点]

5.实例方法includes(搜索的字符串[,检测位置索引号])判断一个字符串是否包含在另一个字符串中,根据情况返回true 或false(重点)

6.实例方法toUpperCase用于将字母转换成大写

7.实例方法toLowerCase用于将就转换成小写

8.实例方法indexof检测是否包含某字符

9.实例方法endswith检测是否以某字符结尾

10.实例方法replace用于替换字符串,支持正则匹配

11.实例方法match查找字符串,支持正则匹配

 渲染商品案例

根据你的需求来,foreach是针对于所有的数据遍历,map是对数据进行修改和返回,for就偏向于大众化一点 

const gift='50g的茶叶,清洗球'
//1.把字符串拆分为数组
// console. log(gift.split(','))[,]
//2.根据数组元素的个数,生成对应span标签
// const str gift. split(', ') map(function (item){ 
return `<span>【品】${ item}</span><br>`
// ).join('')
// consoLe. log(str)
// document. querySeLector('div'). innerHTML=str
document.querySelector('div').innerHTML=gift.split(',').map(item=`><span>【赠品】${item}</ span><br>).join('')

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

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

相关文章

Milvus核心组件(1)- Architecture

目录 cluster 模式 数据请求处理流程 总流程 逻辑channel 到物理channel 数据维护流程 cluster 模式 上一篇其实已经说过 standalone 模式&#xff0c;其实集群模式大同小异&#xff0c;只是在不同机子间使用Kafka或者其他消息中间件保证数据及逻辑的一致性。 Log Broker…

Mac上配置多版本JDK

在Mac上配置多版本JDK可以通过以下步骤进行&#xff1a; 1. 下载并安装多个JDK版本 你可以从 Oracle 或 AdoptOpenJDK 下载你需要的JDK版本。安装完成后&#xff0c;这些JDK版本通常会被安装在 /Library/Java/JavaVirtualMachines 目录下。 2. 配置环境变量 你可以通过修改…

Mac 上安转文字转 SQL 利器 WrenAI

WrenAI 是一个开源的 Text-SQL 的工具&#xff0c;通过导入数据库结构&#xff0c;通过提问的方式生成 SQL。本文将讲述如何在 MacOS 上安装 WrenAI。要运行WrenAI&#xff0c;首先需要安装 Docker 桌面版。 下载 WrenAI https://github.com/Canner/WrenAI/releases/tag/0.7.…

中断相关知识

进程上下文&#xff1a; 当一个进程在执行时,CPU的所有寄存器中的值、进程的状态以及堆栈中的内容 一个进程的上下文可以分为三个部分:用户级上下文、寄存器上下文以及系统级上下文。 用户级上下文: 正文、数据、用户堆栈以及共享存储区&#xff1b; 寄存器上下文…

java数组之线性查找、二分法查找

一、线性查找 思想&#xff1a;如果想在一个数组中查找是否有某个元素&#xff0c;最容易想到的办法就是遍历数组&#xff0c;将数组中元素与想要查找的元素逐个对比&#xff0c;如果相等表示找到了&#xff0c;如果不等&#xff0c;则表示没找到。这就是线性查找的思想。 案例…

C++多线程和循环队列

假设我们不使用互斥锁&#xff0c;并且我们在两个线程中分别调用 enqueue 和 dequeue 方法。 #include <iostream> #include <thread>template <typename T> class Queue {private:static constexpr int MAX_SIZE 1000;T items[MAX_SIZE];int front, rear;…

算法导论 总结索引 | 第四部分 第十七章:摊还分析

1、数据结构的一个操作序列中 所执行的 所有操作的平均时间&#xff0c;来评估该操作的代价。摊还分析 不同于平均情况分析&#xff0c;它并不涉及概率&#xff0c;它可以保证最坏情况下每个操作的平均性能 它是一种平均情况下的 性能分析方法&#xff0c;用于 评估一系列操作的…

Java多态练习(2024.7.10)

动物类 package KeepPets20240710;public class Animal {private String color;private int age;public Animal(){}public Animal(String color, int age) {this.color color;this.age age;}public String getColor() {return color;}public void setColor(String color) {t…

开源流程表单设计器都有哪些值得一提的优势?

如果需要提质、增效、降本&#xff0c;不妨来了解下低代码技术平台、开源流程表单设计器的功能和优势特点。想要实现流程化办公&#xff0c;低代码技术平台是助力增效的理想工具。功能灵活、操作方便、好维修、可视化操作等优势都是其深受行业喜爱的优势特点。通过本文&#xf…

Errno2:No such file or directory,在当前文件确实没有该图片,怎么解决?

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

常用网络概念

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ​​ 目录 了解组织 局域网技术 …

高深宽比刻蚀和纳米级图形化推进存储器的路线图

随着市场需求推动存储器技术向更高密度、更优性能、新材料、3D堆栈、高深宽比 &#xff08;HAR&#xff09; 刻蚀和极紫外 &#xff08;EUV&#xff09; 光刻发展&#xff0c;泛林集团正在探索未来三到五年生产可能面临的挑战&#xff0c;以经济的成本为晶圆厂提供解决方案。 …

数组常用的方法

数组,是JavaScript中的一种数据格式,在JavaScript中经常使用。作为一名前端工程师,掌握Array的用法非常重要! 那么,常用的数组方法你知道几个呢? 如果不知道也没有关系,今天这篇文章将汇总详细介绍Array中常用的一些方法,一起来学习一下吧! 01、push 功能:向数组…

谷歌浏览器插件开发笔记0.1.022

谷歌浏览器插件开发笔记0.1.000 示例文件manifest.jsonpopup.htmloptions.jsoptions.htmlcontent.jsbackground.js 网页按钮快捷键插件参考链接 示例文件 共计有6个常用的文件 manifest.json background字段&#xff1a;随着浏览器的打开而打开&#xff0c;随着浏览器的关闭…

Qt 实战(2)搭建开发环境 | 2.2、.pro文件详解

文章目录 一、.pro文件详解1、.pro文件的作用2、项目管理3、编译配置4、依赖管理5、平台支持6、自动化编译7、示例8、总结 前言&#xff1a; 在Qt开发环境中&#xff0c;.pro文件是一个非常重要的项目文件&#xff0c;它全称为项目管理文件&#xff08;Project file&#xff09…

DHCPIP、Lan IPLan Static IP

一、什么是DHCP? DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络协议&#xff0c;用于自动分配IP地址和其他网络配置给设备&#xff08;如计算机、手机、网络打印机等&#xff09;&#xff0c;使得设备能够在网络上进行通信。 IP地址分配&#…

【进阶篇-Day7:JAVA中Date、LocalDate等时间API的介绍】

目录 1、概述2、JDK8(-) 时间类2.1 Date类&#xff1a;&#xff08;1&#xff09;构造方法&#xff1a;&#xff08;2&#xff09;常用成员方法&#xff1a; 2.2 SimpleDateFormat类&#xff1a;2.3 总结&#xff1a;2.4 Calendar类介绍&#xff1a; 3、JDK8() 时间类3.1 日历类…

fortran简单排序算法,对一维、二维矩阵进行正序或倒序排序

fortran简单排序算法&#xff0c;对一维、二维矩阵进行正序或倒序排序 0. 引言1. 算法实现1.1 一维数组排序1.2 二维数组排序1.2 module文件 2. 结语 0. 引言 排序算法是计算机科学中的一项重要技术&#xff0c;它将一组数据按照特定的顺序排列起来。排序算法有很多种&#xff…

设计模式探索:责任链模式

1. 什么是责任链模式 责任链模式 (Chain of Responsibility Pattern) 是一种行为型设计模式。定义如下&#xff1a; 避免将一个请求的发送者与接收者耦合在一起&#xff0c;让多个对象都有机会处理请求。将接收请求的对象连接成一条链&#xff0c;并且沿着这条链传递请求&…

samout 最新版本state 逐层控制加速收敛

代码 import torch import numpy as npclass MaxState(torch.nn.Module):def __init__(self, hidden_dim, heads, win):super(MaxState, self).__init__()assert hidden_dim % heads 0, "Hidden size must be divisible by the number of heads."self.head_size h…