js进阶 Day01作用域,作用域链,垃圾回收机制,闭包,变量提升,箭头函数*,解构,filter方法,（包含面试题）

编程入门行业动态更新时间:2024-10-28 00:21:23

js<a href=https://www.elefans.com/category/jswz/34/1769503.html style= 进阶 Day01作用域,作用域链,垃圾回收机制,闭包,变量提升,箭头函数*,解构,filter方法,（包含面试题）"/>

js进阶 Day01作用域,作用域链,垃圾回收机制,闭包,变量提升,箭头函数*,解构,filter方法,（包含面试题）

作用域
局部作用域：函数作用域、块作用域
1.函数作用域：函数内部声明的变量，在函数外部无法访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕后，函数内部的变量实际被清空了

作用域链像链子一样从小到大查找

标记清除法核心思路：从根部扫描对象，能查找到的就是使用的，查找不到的就要回收

闭包

函数表达式必须先声明和赋值后调用，否则报错

箭头函数

箭头函数的this是上一层作用域的this指向
在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，非常令人讨厌。
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

数组解构

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

for each只能遍历数组，不能遍历对象
for each就是遍历
map可以返回空数组，而foreach指示遍历

数组有序，对象无序

渲染商品案例

<!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: '.jpg',},{id: '4001594',name: '日式黑陶功夫茶组双侧把茶具礼盒装',price: '288.00',picture: '.jpg',},{id: '4001009',name: '竹制干泡茶盘正方形沥水茶台品茶盘',price: '109.00',picture: '.png',},{id: '4001874',name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',price: '488.00',picture: '.png',},{id: '4001649',name: '大师监制龙泉青瓷茶叶罐',price: '139.00',picture: '.png',},{id: '3997185',name: '与众不同的口感汝瓷白酒杯套组1壶4杯',price: '108.00',picture: '.jpg',},{id: '3997403',name: '手工吹制更厚实白酒杯壶套装6壶6杯',price: '99.00',picture: '.jpg',},{id: '3998274',name: '德国百年工艺高端水晶玻璃红酒杯2支装',price: '139.00',picture: '.jpg',},]// 声明一个字符串变量let str = ''// 遍历数组goodsList.forEach(item => {// 对象解构const { name, price, picture } = itemstr += `<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>

价格筛选综合案例

<!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: '300.00',picture: '.jpg',},{id: '4001594',name: '日式黑陶功夫茶组双侧把茶具礼盒装',price: '288.00',picture: '.jpg',},{id: '4001009',name: '竹制干泡茶盘正方形沥水茶台品茶盘',price: '109.00',picture: '.png',},{id: '4001874',name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',price: '488.00',picture: '.png',},{id: '4001649',name: '大师监制龙泉青瓷茶叶罐',price: '139.00',picture: '.png',},{id: '3997185',name: '与众不同的口感汝瓷白酒杯套组1壶4杯',price: '100.00',picture: '.jpg',},{id: '3997403',name: '手工吹制更厚实白酒杯壶套装6壶6杯',price: '99.00',picture: '.jpg',},{id: '3998274',name: '德国百年工艺高端水晶玻璃红酒杯2支装',price: '139.00',picture: '.jpg',},]// 渲染函数  封装函数function render(arr) {// 声明空字符串let str = ''// 遍历数组arr.forEach(item => {// 解构const { name, price, picture } = itemstr += `<div class="item"><img src=${picture} alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`})// 追加给listdocument.querySelector('.list').innerHTML = str}render(goodsList)     //页面一打开就需要渲染// 过滤筛选document.querySelector('.filter').addEventListener('click', e => {// 判断const { tagName, dataset } = e.targetif (e.target.tagName === 'A') {// console.log(11)let arr = goodsListif (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>