JavaScript进阶day1

1.作用域

1.1 局部作用域

1.2 全局作用域

1.3 作用域链

1.4 JS垃圾回收机制

1.4.1 什么是垃圾回收机制？

1.4.2 内存的生命周期

1.4.3 算法说明

1.5 闭包

1.6 变量提升

2.函数进阶

2.1 函数提升

2.2 函数参数

2.2.1 动态参数

2.2.2 剩余参数

2.2.3 展开运算符

2.3 箭头函数

2.3.1 基本语法

2.3.2 箭头函数参数

2.3.3 箭头函数this

3.解构赋值

3.1 数组解构

3.1.1 基本语法

3.1.2 数组解构可能带来的问题

3.2 对象解构

3.2.1 基本语法

3.2.2 对象解构的一些操作

3.2.3 遍历数组 forEach 方法（重点）

3.2.4 筛选数组 filter 方法（重点）

4.综合案例

1.作用域

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问。

作用域分为：

Ø 局部作用域
Ø 全局作用域

1.1 局部作用域

局部作用域分为函数作用域和块作用域。

1. 函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

总结：

1. 函数内部声明的变量，在函数外部无法被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法互相访问
4. 函数执行完毕后，函数内部的变量实际被清空了（垃圾回收机制）

2. 块作用域

在 JavaScript 中使用 { } 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。

总结：

1. let 声明的变量会产生块作用域{ }，var 不会产生块作用域，而是产生全局作用域
2. const 声明的常量也会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用 let 或 const

1.2 全局作用域

全局作用域中声明的变量，任何其它作用域都可以被访问。

注意：

1. 为 window 对象动态添加的属性默认也是全局的，不推荐！
2. 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
3. 尽可能少的声明全局变量，防止全局变量被污染（立即执行函数）

1.3 作用域链

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

Ø 在函数被执行时，会优先查找当前函数作用域中查找变量
Ø 如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

执行流程：

总结：

1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域

1.4 JS垃圾回收机制

1.4.1 什么是垃圾回收机制？

垃圾回收机制(Garbage Collection) 简称 GC，JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。

正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题

但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况

不再用到的内存，没有及时释放，就叫做 内存泄漏。

1.4.2 内存的生命周期

JS环境中分配的内存, 一般有如下生命周期：

1. 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
2. 内存使用：即读写内存，也就是使用变量、函数等
3. 内存回收：使用完毕，由垃圾回收自动回收不再使用的内存
4. 说明：
- Ø 全局变量一般不会回收(关闭页面回收)；
- Ø 一般情况下局部变量的值, 不用了, 会被自动回收掉

1.4.3 算法说明

堆栈空间分配区别：

1. 栈（操作系统）: 由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型放到栈里面。
2. 堆（操作系统）: 一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面。

下面介绍两种常见的浏览器垃圾回收算法 : 引用计数法和标记清除法

引用计数法

IE采用的引用计数算法, 定义“ 内存不再使用 ”，就是看一个对象是否有指向它的引用，没有引用了就回收对象。

算法：

1. 跟踪记录被引用的次数
2. 如果被引用了一次，那么就记录次数1，多次引用会累加 ++
3. 如果减少一个引用就减1 --
4. 如果引用次数是0 ，则释放内存

这里还存在引用次数就不会被回收

这里没有了引用次数就会被回收

问题：

但它却存在一个致命的问题： 嵌套引用 （循环引用）

如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。

因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露。

标记清除法

现代的浏览器已经不再使用引用计数算法了。

现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。

核心：

1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
2. 就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。从根部找到后，只要根部里面的函数局部变量需要用到，也不会被回收。
3. 那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

标记所有的引用

根部已经访问不到，所以自动清除。

1.5 闭包

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域。

简单理解： 闭包 = 内层函数 + 使用外层函数的变量

先看个简单的代码：

闭包作用：封闭数据，提供操作，外部也可以访问函数内部的变量

闭包的基本格式：

闭包应用：实现数据的私有

比如，我们要做个统计函数调用次数，函数调用一次，就++

实现数据私有。

缺点：可能出现内存泄漏。

1.6 变量提升

变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问（仅存在于var声明变量），因为存在变量提升问题，所以不会报错。

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

变量提升的效果：

注意：

1. 变量在未声明即被访问时会报语法错误
2. 变量在var声明之前即被访问，变量的值为 undefined，存在变量提升
3. let/const 声明的变量不存在变量提升
4. 变量提升出现在当前作用域中
5. 实际开发中推荐先声明再访问变量

2.函数进阶

2.1 函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

总结：

1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同（当前）作用域当中

2.2 函数参数

学习路径：

1. 动态参数
2. 剩余参数

2.2.1 动态参数

arguments 是函数内部内置的 伪数组 变量，它包含了调用函数时传入的所有实参。

2.2.2 剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组。用于获取多余的实参。

得到的是一个真数组

剩余参数获取到的参数更加灵活。

2.2.3 展开运算符

展开运算符(…),将一个数组进行展开

注意：不会修改原数组，默认展开之后，值与值之间有逗号

典型运用场景：求数组最大值(最小值)、合并数组等

剩余参数和展开运算符的比较：

剩余参数：函数参数使用，得到真数组

展开运算符：数组中使用，数组展开

2.3 箭头函数

学下箭头函数先再复习一下之前的有关函数的知识：

下面是几种常见的函数样式，包括函数声明、函数表达式、箭头函数等：

函数声明（Function Declaration）：
```
function greet(name) {
    return `Hello, ${name}!`;
}
```
- 这种方式定义的函数在代码执行之前已经存在，可以在定义之前调用。
函数表达式（Function Expression）：
```
const greet = function(name) {
    return `Hello, ${name}!`;
};
```
- 函数表达式将函数赋值给一个变量，这种函数只能在定义之后调用。
箭头函数（Arrow Function）：
```
const greet = (name) => {
    return `Hello, ${name}!`;
};
```
- 箭头函数是函数表达式的一种简写形式，不具有自己的 this、arguments、super 或 new.target。
立即调用函数表达式（IIFE, Immediately Invoked Function Expression）：
```
(function() {
    console.log('This function runs immediately.');
})();
```
- IIFE 是一种自执行的函数表达式，用于创建一个独立的作用域。

方法定义（Method Definition）：

const person = {
    name: 'John',
    greet() {
        return `Hello, ${this.name}!`;
    }
};

在对象中定义的方法可以直接使用简写语法。

学习路径：

1. 基本语法
2. 箭头函数参数
3. 箭头函数this

2.3.1 基本语法

语法1：基本写法

语法2：只有一个参数可以省略小括号

语法3：如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值

语法4：加括号的函数体返回对象字面量表达式

注意：这里返回对象，因为对象是{}包裹的，会被认为是函数体的{}，因此函数体的{}用（）来表示

2.3.2 箭头函数参数

1.普通函数有arguments 动态参数

2. 箭头函数没有 arguments 动态参数，但是有剩余参数 ..args

2.3.3 箭头函数this

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

经验：

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此

DOM事件回调函数为了简便，还是不太推荐使用箭头函数。

3.解构赋值

3.1 数组解构

数组解构的了解：

目标：知道解构的语法及分类，使用解构简洁语法快速为变量赋值

以上要么不好记忆，要么书写麻烦，此时可以使用解构赋值的方法让代码更简洁。

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

3.1.1 基本语法

1. 赋值运算符 = 左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作

典型应用：交互2个变量

注意： js 前面必须加分号情况

1.立即执行函数

2. 数组解构

案例：

独立完成数组解构赋值

需求①：有个数组： const pc = ['海尔', '联想', '小米', '方正']

解构为变量: hr lx mi fz

需求②：请将最大值和最小值函数返回值解构 max 和min 两个变量

<body>
    <!--     需求①： 有个数组： const pc = ['海尔', '联想', '小米', '方正']
                解构为变量: hr lx mi fz
         需求②：请将最大值和最小值函数返回值解构 max 和min 两个变量 -->
    <script>
        const [hr, lx, mi, fz] = ['海尔', '联想', '小米', '方正']
        console.log(hr)

        function fn(x, y) {
            return [x, y]
        }

        const [max, min] = fn(20, 10)
        console.log(max)
        console.log(min)
    </script>
</body>

3.1.2 数组解构可能带来的问题

1.变量多单元值少的情况

变量的数量大于单元值数量时，多余的变量将被赋值为 undefined。

2. 变量少单元值多的情况

3. 利用剩余参数解决变量少单元值多的情况

剩余参数返回的还是一个数组。

4. 防止有undefined传递单元值的情况，可以设置默认值

允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效。

5. 按需导入，忽略某些返回值

6. 支持多维数组的结构

3.2 对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。

3.2.1 基本语法

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 注意解构的变量名不要和外面的变量名冲突否则报错
4.对象中找不到与变量名一致的属性时变量值为 undefined

3.2.2 对象解构的一些操作

1.给新的变量名赋值：

可以从一个对象中提取变量并同时修改新的变量名

2.数组对象解构：

案例：

需求①：有个对象： const pig = { name: '佩奇',age: 6 }

结构为变量: 完成对象解构，并以此打印出值

需求②：请将pig对象中的name，通过对象解构的形式改为 uname，并打印输出

需求③：请将数组对象, 完成商品名和价格的解构

代码：

 <script>
        // 需求①： 有个对象： const pig = { name: '佩奇',age: 6 }
        const { name, age } = { name: '佩奇', age: 6 }
        console.log(name, age)

        // 需求②：请将pig对象中的name，通过对象解构的形式改为 uname，并打印输出
        const { name: uname, age: ages } = { name: '佩奇', age: 6 }
        console.log(uname)

        // 需求③：请将 数组对象, 完成 商品名和价格的解构
        const goods = [
            {
                goodsName: '小米',
                price: 1999
            }
        ]

        const [{ goodsName, price }] = goods
        console.log(goodsName, price)

    </script>

3.多级对象解构：

只获取msg里面的data数据。

案例：

渲染商品列表案例

请根据数据渲染以下效果、

代码：

 <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',
      },
    ]

    // 有多少个对象，就生成多少个div
    // <!-- <div class="item">
    //   <img src="" alt="">
    //   <p class="name"></p>                                 
    //   <p class="price"></p>
    // </div> -->

    let str = ''
    const list = document.querySelector('.list')

    goodsList.forEach((e) => {
      const { name, price, picture } = e
      str += `
      <div class="item">
        <img src="${picture}" alt="">
        <p class="name">${name}</p>
        <p class="price">${price}</p>
      </div>
      `
    })


    list.innerHTML = str

  </script>

3.2.3 遍历数组 forEach 方法（重点）

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

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

语法：

注意：

1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的，索引号可选。
3.跟map有些类似，但是不返回新数组

案例：

渲染商品列表案例

核心思路：有多少条数据，就渲染多少模块，然后生成对应的 html结构标签，赋值给 list标签即可

①：利用forEach 遍历数据里面的数据

②：拿到数据，利用 字符串拼接 生成结构添加到页面中

③：注意：传递参数的时候，可以使用对象解构

代码：

  <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',
      },
    ]

    // 有多少个对象，就生成多少个div
    // <!-- <div class="item">
    //   <img src="" alt="">
    //   <p class="name"></p>                                 
    //   <p class="price"></p>
    // </div> -->

    let str = ''
    const list = document.querySelector('.list')


    goodsList.forEach((e) => {
      const { name, price, picture } = e
      str += `
      <div class="item">
        <img src="${picture}" alt="">
        <p class="name">${name}</p>
        <p class="price">${price}</p>
      </div>
      `
    })


    list.innerHTML = str

  </script>

3.2.4 筛选数组 filter 方法（重点）

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景： 筛选数组符合条件的元素 ，并返回筛选之后元素的新数组。

语法：

例：

返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

参数： currentValue 必须写， index 可选

因为返回新数组，所以不会影响原数组

4.综合案例

实现效果：

需求：

①：渲染数据列表

②：根据选择不同条件显示不同商品

分析：

①：渲染页面利用forEach 遍历数据里面的数据，并渲染数据列表

②：根据 filter 选择不同条件显示不同商品

代码：

<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: '100.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. 渲染函数  封装
    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> 
        `
      })
      // 追加给list 
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)  // 页面一打开就需要渲染

    // 2. 过滤筛选  
    document.querySelector('.filter').addEventListener('click', e => {
      // e.target.dataset.index   e.target.tagName
      // 这里可以用对象解构
      const { tagName, dataset } = e.target
      // 判断 
      if (tagName === 'A') {
        // console.log(11) 
        // arr 返回的新数组
        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>