JS进阶--JS听到了不灭的反响
作用域作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问
作用域分为局部和全局
局部作用域
局部作用域分为函数和块
https://i-blog.csdnimg.cn/direct/a96859928cd74676937822a9eff8022a.png
那 什么是块作用域呢？
在 JavaScript 中使用 { } 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问
https://i-blog.csdnimg.cn/direct/e821cdade4234657b8211135f753f5b0.png
https://i-blog.csdnimg.cn/direct/cb4f839385f746629425421103998842.png
全局作用域
写到script和.js文件的最外层就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问
全局作用域中声明的变量在任何其他作用域中都可以被访问https://i-blog.csdnimg.cn/direct/691e830320d742eca83ecae7dfa8fc6a.png
1. 为 window 对象动态添加的属性默认也是全局的，不保举！
2. 函数中未使用任何关键字声明的变量为全局变量，不保举！！！
3. 尽可能少的声明全局变量，防止全局变量被污染
https://i-blog.csdnimg.cn/direct/62dbc26160f5458d9d475b7a08b630aa.png
作用域链
https://i-blog.csdnimg.cn/direct/926aa250438d4900a8aae3732c3f232f.png
包没错误的，效果是2
作用域链本质上是底层的变量查找机制。
在函数被执行时，会优先查找当前函数作用域中查找变量，假如当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
1. 嵌套关系的作用域串联起来形成了作用域链
2. 雷同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域
从小到大捏
https://i-blog.csdnimg.cn/direct/97bbd261d56646fe9574b88f308d7ecc.png
JS垃圾回收机制
什么是垃圾回收机制？
https://i-blog.csdnimg.cn/direct/a9f2ae09ba354caeb59bb48d96e53aa9.png
让我们来了解一下内存的生命周期：
https://i-blog.csdnimg.cn/direct/561e7a3e981e4971ae47abd45e2cf353.png
https://i-blog.csdnimg.cn/direct/a1415c16507a4306924740dfd545fee6.png
内存泄漏是指程序中分配的内存由于某种缘故原由未开释或者无法开释
总结：
https://i-blog.csdnimg.cn/direct/834d3446138e4cc4a9d013179edd42b5.png
下面对垃圾回收机制做一个算法阐明：
堆栈空间分配区别：
1. 栈（操作系统）: 由操作系统自动分配开释函数的参数值、局部变量等，基本数据范例放到栈里面。
2. 堆（操作系统）: 一般由程序员分配开释，若程序员不开释，由垃圾回收机制回收。复杂数据范例放到堆里面。
之前都学过，不多说了
垃圾回收算法有两种：引用计数法和标志清除法
引用计数：
IE采用的引用计数算法, 定义“内存不再使用”，就是看一个对象是否有指向它的引用，没有引用了就回收对象
算法：
1. 跟踪记载被引用的次数
2. 假如被引用了一次，那么就记载次数1,多次引用会累加 ++
3. 假如减少一个引用就减1 --
4. 假如引用次数是0 ，则开释内存
https://i-blog.csdnimg.cn/direct/238a473c951c429485059252066be2b7.png
引用计数法也是有一定缺陷的，假如两个对象相互引用，尽管他们不再使用，垃圾回收器也不会进行回收，从而导致内存泄漏
https://i-blog.csdnimg.cn/direct/0106228ceb6f4795972ad88a5cbe78ec.png
如许的引用不假如很大量，那就会导致大量的内存泄漏
如今的浏览器已经不用引用计数算法了，而是使用标志清除法：
https://i-blog.csdnimg.cn/direct/618c002d11554ab68f58ff1545170ed5.png
看看小表现图：
https://i-blog.csdnimg.cn/direct/c1a7d5bbf4dc49adb0276298c18810ed.png
https://i-blog.csdnimg.cn/direct/7cea564e4ca34f54a2f4e3d9cbec1697.png
不错
标志清除法的焦点：从根部扫描对象，能查找到的就是使用的，查找不到的就要回收
闭包
那么问题来了，什么是闭包？
是一个函数对四周状态的引用捆绑在一起，内层函数中，访问到其外层函数的作用域
闭包=内层函数+外层函数的变量
先来看看代码：
https://i-blog.csdnimg.cn/direct/87f9824e6298462cb49f9d01d1b09a3b.png
https://i-blog.csdnimg.cn/direct/bed1f829fc9f4f96880e77fccf578f2e.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function outer()
{
let a =10
function fn()
{
console.log(a)
}
fn()
}
outer()
</script>
</body>
</html> https://i-blog.csdnimg.cn/direct/f9fe3d6f4f214feb87c04e4e2eeee154.png
这个什么closure(outer)就是闭包的意思
闭包可以：封闭数据、提供操作，外部也可以访问函数内部的变量
闭包的基本格式：
https://i-blog.csdnimg.cn/direct/2364dda6468048e3854b9a27100a2f36.png
闭包可以实现数据的私有，好比我们要做统计函数调用次数，调用一次，就++
https://i-blog.csdnimg.cn/direct/0e00fe1320c845b19181b72a0e283135.png
光是这个函数就可以实现对应的功能，可是问题就在于count是一个全局变量很容易被修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn()
{
let count = 1
function fun(){
count++
console.log(`函数被调用${count}次`)
}
return fun
}
const result = fn()
result()
result()
</script>
</body>
</html> 如许就可以实现数据的私有了，由于没办法直接修改count
outer = fn = function fn() { }
我们详细表明：
闭包 = 内层函数 + 外层函数的变量
闭包：
封闭数据，实现数据私有，外部也可以访问函数内部的变量
闭包很有效，由于它允许将函数与其所操作的某些数据（环境）关联起来
闭包可能引起内存泄漏
变量提升
什么是变量提升？
变量提升是JS中 的一种征象，允许变量在声明致歉就被访问（仅仅存在于var声明变量）：
https://i-blog.csdnimg.cn/direct/ad6fdd43d6174b9aa7a6fd832c60c4d3.png
tips：
https://i-blog.csdnimg.cn/direct/903896d3c7974e95ba4cfd11d8d60750.png
JS初学者常常花很多时间才能风俗变量提升，还常常出现一些意想不到的bug，正由于如此，ES6 引入了块级作用域， 用let 或者 const声明变量，让代码写法更加规范和人性化
总结：
https://i-blog.csdnimg.cn/direct/133fe7d675d1480981e50ab68b4fef36.png
函数进阶
函数提升
我们学习函数提升的目标是能够说出函数提升的过程
函数提升与变量提升比较相似，是指函数在声明之前就可以被调用
https://i-blog.csdnimg.cn/direct/63c86b44610b475aafd85ed43ee5d417.png
函数 提升：
1、函数提升能够使函数的声明调用 更加机动
2、函数表达式不存在提升的征象
3、函数提升出如今雷同的作用域当中
函数参数
1、产物需求：写一个求和函数
不管用户传入几个实参，都要把和求出来
那么怎么 写形参呢？
有一个东西叫做动态参数：arguments
可以得到传过来的参数，是伪数组
arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的全部实参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getSum() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments
}
console.log(sum)
}
getSum(2, 3, 4)
</script>
</body>
</html> https://i-blog.csdnimg.cn/direct/a10db98c08414068937d0fa5dc7958f3.png
而除了动态参数，其实剩余参数也能办理这个问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getSum(...arr)
{
console.log(arr)
}
getSum(2,3)
getSum(1,2,3)
</script>
</body>
</html> 假如如许的话，那剩余参数和动态参数又有什么区别呢？
其实剩余参数是剩下的参数
...是语法符号，至于最末的函数形参之前，用于获取多余的实参
获取的剩余实参是真的数组
开发中提倡使用剩余参数，可以如许取样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getSum(a, b, ...arr) {
console.log(arr)
}
getSum(2, 3)
getSum(1, 2, 3)
</script>
</body>
</html> 总结：
https://i-blog.csdnimg.cn/direct/f6b3f5e9d9e64ca39176dbc500f210ea.png
https://i-blog.csdnimg.cn/direct/f530cdb32e1441a3b509cc77be9888f5.png
接下来讲一下睁开运算符
睁开运算符可以将一个数组进行睁开
https://i-blog.csdnimg.cn/direct/39d6724960984b6fb009b7db2f2ac798.png
它只是进行睁开，并不会修改原数组
可以很方便的求数组的最大值最小值，或者合并数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr =
console.log(Math.max(...arr))
console.log(Math.min(...arr))
</script>
</body>
</html> 睁开运算符和剩余参数的区别：
https://i-blog.csdnimg.cn/direct/72fe61d63d2340ea92903f56052da1a0.png
箭头函数
引入箭头函数的目标是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简便
更适用于那些原来需要匿名函数的地方
基本语法
https://i-blog.csdnimg.cn/direct/02b87d8caaf04511b624e444818757ec.png
当函数只有一个形参的时间可以省略小括号：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const fn = x =>{
console.log(x)
}
fn(1)
</script>
</body>
</html> https://i-blog.csdnimg.cn/direct/7a750d04af114d5db2da70de00f29ab6.png
当函数体只有一行代码的时间，可以写到一行上，并且无需使用return（直接返回值）
https://i-blog.csdnimg.cn/direct/b45daf9ce2974a41a3ccb11fe8978f11.png
有更加简便的语法，这是阻止表单的默认提交变乱：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const form = document.querySelector('form')
form.addEventListener('click',ev=>ev.preventDefault())
</script>
</body>
</html> 另有一种语法是：加括号的函数体返回对象字面量表达式
https://i-blog.csdnimg.cn/direct/8d925947113d4a969130cede9ccbc764.png
由于对象的大括号和箭头函数的冲突了，所以拿小括号包裹起来
箭头函数参数
普通函数有arguments动态参数
箭头函数没有arguments动态参数，但是有剩余参数...args
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 利用箭头函数求和
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr
}
console.log(sum)
return sum
}
getSum(2, 3)
</script>
</body>
</html> 就是没有arguments动态参数，但是有剩余参数
箭头函数this
在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值， 非常令人讨厌。 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this
https://i-blog.csdnimg.cn/direct/dde6a549cf45405f8ca1cee85f22da8b.png
https://i-blog.csdnimg.cn/direct/c06de4aeabef4c9f9246870bdeebbf4d.png
https://i-blog.csdnimg.cn/direct/97534f2be415435eb913c78715e33a89.png
https://i-blog.csdnimg.cn/direct/c40d8163a6ac439dba591ab1c15f28be.png
在开发中【使用箭头函数前需要考虑函数中 this 的值】，变乱回调函数使用箭头函数时，this 为全局的 window，因此 DOM变乱回调函数为了简便，还是不太保举使用箭头函数
https://i-blog.csdnimg.cn/direct/9805a85808e34d438e023448d7f62084.png
Ø 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this
DOM变乱回调函数不保举使用箭头函数，特殊是需要用到this的时间
Ø 变乱回调函数使用箭头函数时，this 为全局的 window
解构赋值
https://i-blog.csdnimg.cn/direct/0bda13fd41974a93b44663f2f5ffdbfc.png
数组解构
解构赋值是一种快速为变量赋值的简便语法，本质上仍然是为变量赋值
数组解构是将数组的单元值快速批量赋值给一系列变量的简便语法
基本语法：
1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的次序对应数组单元值的位置依次进行赋值操作
https://i-blog.csdnimg.cn/direct/e99e97eabedc43e28a9d787d9be81794.png
可以如许进行快速的交换两个变量：
https://i-blog.csdnimg.cn/direct/ec7e87fbe6d446e5b862ea8b0767b395.png
看看，这是冒泡排序的简便写法：
https://i-blog.csdnimg.cn/direct/e073b2c0734e4efd841e6a72095c0d47.png
数组解构是将数组的单元值快速批量的赋值给一系列变量的简便语法
JS前面有必须要加分号的情况：
1.立即执行函数：
https://i-blog.csdnimg.cn/direct/27a5885f2db741538d5437ce21735433.png
2、数组解构
https://i-blog.csdnimg.cn/direct/3161624cc9e048eb82b521f4437b7546.png
总结：
https://i-blog.csdnimg.cn/direct/a18297a0863942d6981bc7fafae6eaed.png
让我们看看不同的情况吧：
https://i-blog.csdnimg.cn/direct/3811b01405024c4893f71a4331f83638.png
变量的数目大于单元值的数目的时间，多余的变量将被赋值为undefined
另有别的情况：
https://i-blog.csdnimg.cn/direct/e8caa7719c514df8952addc885cd893c.png
https://i-blog.csdnimg.cn/direct/3f4b3644cf3747dea7dd133ad32d9923.png
允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效https://i-blog.csdnimg.cn/direct/01fbff5d7fd743958938b4a220776eb0.png
https://i-blog.csdnimg.cn/direct/2fd18c7f5da54619b4553634f46f4335.png
对象解构
对象解构是指将对象的属性和方法快速批量赋值给一系列变量的简便语法
基本的语法：
1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名雷同的变量
3. 留意解构的变量名不要和外面的变量名冲突否则报错
4.对象中找不到与变量名同等的属性时变量值为 undefined
https://i-blog.csdnimg.cn/direct/85d906c627f94d4ea897138ac3fa6570.png
对象解构是将对象的属性和方法快速批量的赋值给一系列变量的简便语法
可以从一个对象中提取变量并且同时修改新的变量名
我们可以通过对象解构给新的变量名赋值：
https://i-blog.csdnimg.cn/direct/ae99c4a9fa71460c9f31310f10ad7dda.png
:表现赋值给谁
让我们看看数组对象的结构：
https://i-blog.csdnimg.cn/direct/eb13dd19b858488694c25a614ab6f33f.png
https://i-blog.csdnimg.cn/direct/b114a380491d4da9819ead9d2f52633e.png
https://i-blog.csdnimg.cn/direct/ce7cacf1f63843b8921d4b9526a84c38.png
https://i-blog.csdnimg.cn/direct/682b77f971984efcb2dc00a2b9928171.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//这是后台传递过来的数据，请选出data里面的数据方便后面渲染w
const msg = {
"code":200,
"msg":"获取新闻列表成功",
"data":[
{
"id":1,
"title":"5G商用自己，三大运用商收入下降",
"count":58
},
{
"id":2,
"title":"国际媒体头条速览",
"count":56
},
{
"id":3,
"title":"乌克兰和俄罗斯持续冲突",
"count":1669
},
]
}
function render({data:MyData}){
console.log(MyData)
}
render(msg)
</script>
</body>
</html> 遍历数组的foreach方法
foreach方法用于调用数组的每个元素，并将元素转达回给参数
https://i-blog.csdnimg.cn/direct/a1d6b11e6be74452a0d9ba0ccb49d41e.png
tips：
1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的， 索引号可选
适合遍历数组对象
综合案例
接下来做案例，进行渲染，foreach+对象解构
//1.声明一个空字符串变量先
let str = ' '
goodsList.forEach(item => {
console.log(item) //可以得到每一个数组元素对象
}) https://i-blog.csdnimg.cn/direct/28f33f33fc3148d190bc9c21a0e69314.png
只有一个参数的箭头函数可以省略小括号
然后我们进行追加，并在html中表现：
//1.声明一个空字符串变量先
let str = ' '
goodsList.forEach(item => {
// console.log(item) //可以得到每一个数组元素对象
str += `<div class="item">
<img src="" alt="">
<p class="name">111</p>
<p class="price">111</p>
</div>`
})
document.querySelector('.list').innerHTML = str 艺术就是解构：
//1.声明一个空字符串变量先
let str = ' '
goodsList.forEach(item => {
// console.log(item) //可以得到每一个数组元素对象
const {name,price,picture} = item //解构就是id
str += `<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>`
})
document.querySelector('.list').innerHTML = str https://i-blog.csdnimg.cn/direct/357ebf6a43fa44c8ab4dbefa4e947084.png
代码：
<!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>商品渲染</title><style> * { margin: 0; padding: 0; box-sizing: border-box; } .list { width: 990px; margin: 0 auto; display: flex; flex-wrap: wrap; padding-top: 100px; } .item { width: 240px; margin-left: 10px; padding: 20px 30px; transition: all .5s; margin-bottom: 20px; } .item:nth-child(4n) { margin-left: 0; } .item:hover { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); transform: translate3d(0, -4px, 0); cursor: pointer; } .item img { width: 100%; } .item .name { font-size: 18px; margin-bottom: 10px; color: #666; } .item .price { font-size: 22px; color: firebrick; } .item .price::before { content: "¥"; font-size: 14px; }</style></head><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 = ' '
goodsList.forEach(item => {
// console.log(item) //可以得到每一个数组元素对象
const {name,price,picture} = item //解构就是id
str += `<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>`
})
document.querySelector('.list').innerHTML = str</script></body></html> 接下来还需要实现一个可以筛选的模块
筛选数组有一个filter方法
它可以创建一个新的数组，新的数组中的元素是通过检查指定命组中符合条件的全部元素
主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组
语法：
https://i-blog.csdnimg.cn/direct/f8db5d22bd81480c8ca65f699106c0ec.png
例子：
https://i-blog.csdnimg.cn/direct/838e31d7aaf741fc88ea44c0ca6a7f4c.png
https://i-blog.csdnimg.cn/direct/d0780cf166f94124aa09d703fec3f5c7.png
filter() 筛选数组
返回值：返回数组，包含了符合条件的全部元素。假如没有符合条件的元素则返回空数组
参数：currentValue 必须写， index 可选
由于返回新数组，所以不会影响原数组
首先做初始的页面渲染
渲染页面 使用forEach 遍历数据里面的 数据，并渲染数据列表
根据 filter 选择不同条件表现不同商品
步骤一和前面雷同，不赘述
//渲染函数封装
function render(arr)
{
//声明空字符串
let str = ' '
//遍历数组 增加字符串
arr.forEach(item => {
//解构
const {name,picture,price} = item
str+=`
<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>
`
});
document.querySelector('.list').innerHTML = str
}
render(goodsList) 步骤2：
https://i-blog.csdnimg.cn/direct/9a6fb54a4f584912a14be0700b09d52d.png
全部代码：
<!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>商品渲染</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 990px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 240px;
margin-left: 10px;
padding: 20px 30px;
transition: all .5s;
margin-bottom: 20px;
}
.item:nth-child(4n) {
margin-left: 0;
}
.item:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -4px, 0);
cursor: pointer;
}
.item img {
width: 100%;
}
.item .name {
font-size: 18px;
margin-bottom: 10px;
color: #666;
}
.item .price {
font-size: 22px;
color: firebrick;
}
.item .price::before {
content: "¥";
font-size: 14px;
}
.filter {
display: flex;
width: 990px;
margin: 0 auto;
padding: 50px 30px;
}
.filter a {
padding: 10px 20px;
background: #f5f5f5;
color: #666;
text-decoration: none;
margin-right: 20px;
}
.filter a:active,
.filter a:focus {
background: #05943c;
color: #fff;
}
</style>
</head>
<body>
<div class="filter">
<a data-index="1" href="javascript:;">0-100元</a>
<a data-index="2" href="javascript:;">100-300元</a>
<a data-index="3" href="javascript:;">300元以上</a>
<a href="javascript:;">全部区间</a>
</div>
<div class="list">
<!-- <div class="item">
<img src="" alt="">
<p class="name"></p>
<p class="price"></p>
</div> -->
</div>
<script>
// 2. 初始化数据
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',
},
]
//渲染函数封装
function render(arr) {
//声明空字符串
let str = ' '
//遍历数组 增加字符串
arr.forEach(item => {
//解构
const { name, picture, price } = item
str += `
<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>
`
});
document.querySelector('.list').innerHTML = str
}
render(goodsList)
//过滤筛选
document.querySelector('.filter').addEventListener('click', e => {
const { tagName, dataset } = e.target
//判断
if (e.target.tagName === 'A') {
let arr = goodsList
if (dataset.index === '1') {
arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
}else if(dataset.index === '2')
{
arr = goodsList.filter(item=>item.price >=100 && item.price <= 300)
}else if(dataset.index === '3')
{
arr = goodsList.filter(item=>item.price >=300)
}
render(arr)
}
})
</script>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]