JS——作用域、解构、箭头函数

Axuangogo

已于 2024-04-16 23:29:58 修改

阅读量481

点赞数 9

文章标签： javascript 前端

于 2024-04-07 18:49:01 首次发布

本文链接：https://blog.csdn.net/Axuangogo/article/details/137434425

版权

一、作用域知识点

1、作用域：包括局部作用域、全局作用域

2、局部作用域：包括函数作用域、块作用域

3、块作用域：JavaScript 中使用 { } 包裹的代码称为代码块

let 声明的变量会产生块作用域，var 不会产生块作用域
const 声明的常量也会产生块作用域
不同代码块之间的变量无法互相访问
推荐使用 let 或 const

4、全局作用域：<script>标签和.js 文件

5、作用域链：本质上是底层的变量查找机制

【就近原则】优先查找当前函数作用域中查找变量，若当前作用域查不到，则依次逐级查找父级作用域，直到全局作用域。

6、垃圾回收机制（GC）：JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。

全局变量一般不会回收(关闭页面回收)
一般情况下局部变量的值, 不用了, 会被自动回收掉

7、内存的生命周期：

内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
内存使用：即读写内存，也就是使用变量、函数等
内存回收：使用完毕，由垃圾回收自动回收不再使用的内存

8、内存泄漏：不再用到的内存，没有及时释放

9、垃圾回收算法: 引用计数法、标记清除法

10、闭包 = 内层函数 + 外层函数的变量

闭包的作用：封装数据，实现数据的私有，使外部也可以访问函数内部的变量；将函数与其所操作的某些数据关联起来。
闭包可能引起：内存泄漏

11、变量提升（不是好的，所以es6引入了let和const声明，使代码更加人性化）

把所有var声明的变量提升到当前作用域的最前面
只提升声明，不提示赋值

二、函数进阶知识点

1、函数提升：

把所有函数声明提升到当前作用域的最前面
只提升函数声明，不提升函数调用
函数表达式必须先声明和赋值，否则报错（如下图右）

2、函数参数-动态参数：arguments 是函数内部内置的伪数组变量，当不确定传入几个参数时使用。

    function getSum(){
      //arguments动态参数，只存在于函数里面
      //本质是一个伪数组，通过for循环来求和
      let sum = 0
      for (let i=0;i<arguments.length;i++){
        sum+=arguments[i]
      }
      console.log(sum);
    }
    getSum(2,3)
    getSum(1,2,3,4,5,6,7,8,9,10)

3、函数参数-剩余参数：可以将一个不定数量的参数表示为一个真数组，可以用于获取多余的实参，在开发中提倡使用。

    function getSum(a,b,...arr){
      console.log(arr);
    }
    getSum(2,3)
    getSum(1,2,3,4,5,6,7,8,9,10)

4、展开运算符：将一个数组展开

    //使用场景

    const arr1 = [1,2,3]
    // 1.求最大值和最小值
    //...arr === 1,2,3
    console.log(Math.max(...arr1))
    console.log(Math.min(...arr1))
    
    // 2.合并数组
    const arr2 = [3,4,5]
    const arr = [...arr1,...arr2]
    console.log(arr)

5、箭头函数（重要）：简化代码

    // 基本语法
    const fn1 = () => {
      return 1
    }
    // 只有一个形参时可以省略小括号
    const fn2 = x => {
      return x + x
    }
    // 只有一行代码时可以省略大括号
    // 只有一行代码时可以省略return
    const fn3 = (x, y) => x + y
    // 可以直接返回一个对象
    const fn = (uname) => ({name:uname})

6、箭头函数的this：

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this。

三、数组解构和对象解构：

将数组的单元值快速批量赋值给一系列变量；

将对象属性和方法快速批量赋值给一系列变量。

1、forEach()遍历数组

    const arr = ['red','pink','blue']
    //适合于遍历数组对象
    arr.forEach(function(item,index){
      console.log(item);//打印数组元素
      console.log(index);//打印索引号0 1 2
    })

2、filter()筛选数组

    const arr = [20,30,10]
    // 返回一个新数组
    const newArr = arr.filter(function(item,index){
      return item >= 20
    })

四、综合案例

1、价格筛选

<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>
  <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',
      },
    ]
    
    // 渲染数据
    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>
        `
      });
      document.querySelector('.list').innerHTML = str
    }
    // 页面一打开就加载
    render(goodsList)

    // 过滤筛选
    document.querySelector('.filter').addEventListener('click',e => {
      const {tagName,dataset} = e.target
      if (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>