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

已于 2023-09-09 10:05:18 修改
阅读量72 收藏
点赞数
分类专栏： 前端javascript进阶 文章标签： javascript java 前端
于 2023-09-09 09:59:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52284271/article/details/132731019
版权

作用域
局部作用域：函数作用域、块作用域
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: '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',
      },
    ]

    // 声明一个字符串变量
    let str = ''
    // 遍历数组
    goodsList.forEach(item => {
      // 对象解构
      const { name, price, picture } = 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

  </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: '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: '100.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, price, picture } = item
        str += `
          <div class="item">
            <img src=${picture} alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
          </div>
        `
      })
      // 追加给list
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)     //页面一打开就需要渲染

    // 过滤筛选
    document.querySelector('.filter').addEventListener('click', e => {
      // 判断
      const { tagName, dataset } = e.target
      if (e.target.tagName === 'A') {
        // console.log(11)
        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>
瑜 ～
关注
专栏目录
day01-js高级第一天课件复习资料.rar
04-08
2. **闭包**：闭包是一种特殊的作用域，它允许函数访问并操作其外部作用域的变量，即使在其外部作用域已经被销毁后。闭包在模块化、异步编程和数据隐藏等方面有重要作用。 3. **函数作为一等公民**：在JS中，函数...
FE21-JS-DAY05-Vendula-Martin
03-10
2. **作用域**：理解全局和局部作用域，以及如何在函数和块级作用域中声明和访问变量。 3. **函数**：定义函数的不同方式，包括函数表达式和函数声明，以及参数和返回值的处理。 4. **控制流程**：条件语句（if/...
JavaScript 高阶 | 作用域&解构&箭头函数
csyldjy的博客
06-13 740
目录1 作用域1.1 局部作用域1.2 全局作用域1.3 作用域链1.4 JS垃圾回收机制1.4.1 什么是垃圾回收机制？1.4.2 内存的生命周期1.2.3 垃圾回收算法说明1.5 闭包​编辑 1.6 变量提升2 函数进阶2.1 函数提升2.2 函数参数2.2.1 动态参数2.2.2 剩余参数补充:展开运算符2.3 箭头函数（重要）2.3.1 语法2.3.2 箭头函数参数2.2.3 箭头函数 this3 解构赋值3.1 数组解构 作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变
一次彻底搞清楚js中变量和函数（包括箭头函数）提升
weixin_40073115的博客
01-08 1707
做前端的同学肯定对变量提升和函数提升不陌生，但实际应用中依然会有出错的情况，前端时间组内成员review代码发现很多小d在这个问题上没有彻底弄清楚，本篇博文详细做一次刨析。 变量提升 首先看下这个问题：输出结果是什么？ var x =20; function s() { console.log(x); var x = 10; console.log(x);return x; }; s(); 经...
利用let和箭头函数解决变量提升问题
qq_23864401的博客
03-06 596
name: " jsCoder"； skill: ["“es6”", "“react”", "angular”"]； for(let i = 0, len = this.skill.length; i&lt; len; i++){ setTimeout(()=&gt;{ console.log(i+1 + this.name); console.log(this.skill[i]); }, 0);...
09.01、js之函数定义-变量提升&自调用函数&箭头函数
weixin_44867717的博客
04-02 498
JavaScript 函数定义 1、函数声明 function functionName(parameters) { 要执行的代码 } 实例 function myFunction(a, b) { return a * b; } 分号用于分隔可执行的 JavaScript 语句 2、函数表达式 JavaScript 函数也可以使用表达式来定义。 函数表达式可以在变量中存储： 实例 var x = function (a, b) {return a * b}; 在变量中保存函数表达式
js高级（变量和函数提升，闭包，函数的参数（arguments，剩余参数...），箭头函数）
weixin_69749948的博客
05-11 496
变量和函数提升 1… 变量提升 变量使用：先声明，后访问 变量提升：先访问，后声明（let不存在变量提升的现象） 变量在声明之前被访问，变量的值为undefined 推荐：先声明，后使用 2… 函数提升 函数提升能够使函数的声明调用更灵活 函数表达式不存在提升的现象 闭包 定义：称为闭包函数，就是一个【能够访问别的作用域变量】的函数，作为返回值的函数 1-1… 语法格式的闭包函数 1-2… 经常使用的闭包函数： 2… 闭包函数的作用 延长变量的使用范围，在函数外部能访问函数内部的变量 3… 闭
day03-js高级资料.zip
10-01
2. **闭包**：闭包是一种特殊的作用域，它允许函数访问并操作外部作用域的变量，即使在其外部作用域已经结束之后。闭包在模块化、数据封装和内存管理等方面有广泛应用。 3. **异步编程**：JavaScript是单线程执行的...
js30:wesbose-javascript-30day-挑战
05-22
6. **闭包**：学习闭包的概念及其在函数和作用域中的应用。 7. **异步编程**：回调函数、Promise和async/await，处理非同步操作。 8. **CSS操作**：使用JavaScript修改CSS样式，实现动态布局和动画效果。 9. **ES6新...
day03-js高级讲义.zip
10-01
1. **闭包**：闭包是JS中的一个核心概念，它允许函数访问并操作其外部作用域的变量，即使在其外部函数已经执行完毕后。闭包常用于数据封装，模块化，以及创建私有变量。 2. **原型与原型链**：JS中的对象具有原型，...
箭头函数和普通函数的常见区别
曲鸟
08-05 5747
经过上述分析发现普通函数的功能会比箭头函数更强大一些，但这也不是说我们就要避免使用箭头函数。而是应该根据实际的应用场景来选择。对于使用react hooks来开发前端的我而言，基本很少使用普通函数，大部分的箭头函数使用也未造成开发的影响，代码反而简洁了不少。这两者也没有谁优谁劣的说法，看个人喜好来选择也是可以的。没必要在这些问题上花费过多的时间去争论，哪种让自己用起来更舒服用哪种就行。...
深入理解JavaScript箭头函数
倾城一笑stu
12-23 2万+
箭头函数就是个简写形式的函数表达式，并且它拥有词法作用域的this值（即不会新产生自己作用域下的this，arguments,super和new.target等对象）。此外，箭头函数总是匿名的。 语法 基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression
深入理解ES6箭头函数中的this
热门推荐
liwusen的博客
04-20 3万+
简要介绍：箭头函数中的this，指向与一般function定义的函数不同，比较容易绕晕，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。 1、何为定义时绑定 我们来看下面这个例子： （1） var x=11; var obj={ x:22, say:function(){ console.log(this.x) } }...
JavaScript的作用域，变量提升，闭包和箭头函数
qq_42248962的博客
04-10 473
JavaScript 重点 一、作用域 在JavaScript中，有全局作用域、局部作用域。 1、全局作用域：全局变量有全局作用域，网页中所有脚本和函数均可使用，都在全局作用域里。如果你尚为声明的变量赋值，此变量会自动成为全局变量，但在严格模式运行，是不会自动创建的全局变量的。全局变量会在你关闭页面时被删除。 2、局部作用域：局部作用域一般只在固定的代码片段可访问到，外部是无法访问的，它分为函数作...
ES6---箭头函数与function定义函数有什么区别？在箭头函数中，this指向，构造函数，变量提升是如何表现的？
Wbiokr的博客
07-20 8776
简洁 ///function定义函数 function aaa(a,b){ return a+b; }///箭头函数定义函数 var aaa=(a,b)=>{return a+b;} this指向function传统定义的函数，this指向随着调用环境的改变而改变，而箭头 函数中的指向则是固定不变，一直指向定义环境的。 ///function定义函数中的this指向 function aaa
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1149
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 213
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
Vue2+3
最新发布
m0_73557953的博客
11-04 61
创建Vue实例 Vue指令
JavaScript函数级作用域与变量提升详解
局部变量（函数级别作用域）的特点是，它们仅在定义它们的函数内部以及该函数内部嵌套的函数中可见，除非涉及到闭包的概念，这将在后续专题中详细讲解。 在JavaScript中，由于缺乏块级作用域（如C++或Java中的`{}`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值