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

1、作用域

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

1.1 局部作用域

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

1.1.1 函数作用域

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

总结：

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

1.1.2 块作用域

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

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

1.2 全局作用域

       

3.1.2 变量多 单元值少的情况 

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

3.1.3 变量少 单元值多的情况

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

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

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

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

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

3.1.7 支持多为数组的结构

3.2 对象解构

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

3.2.1 基本语法

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

3.2.2 给新的变量名赋值

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

对象解构的变量名 可以重新改名  旧变量名：新变量名

3.2.3 数组对象解构

3.2.3 练习对象解构赋值

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

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

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

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

 3.2.4 多级对象解构

3.2.5 练习 完成对象解构赋值

将数据完成3个需求 

4、foreach方法（重点）

• forEach()方法用于调用数组的每个元素，并将元素传递给回调函数
• 主要使用场景：遍历数组的每个元素 

语法： 

例如：

注意：

1. forEach主要是遍历数组
2. 参数当前数组元素是必须要写的，索引号可选

5、渲染商品列表

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

1. 利用forEach遍历数据里面的数据
2. 拿到数据，利用字符串拼接生成结构添加到页面中
3. 注意：传递参数的时候，可以使用对象解构

6、 筛选数组filter方法（重点）

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

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

语法：

参数：currentValue必须写，index可选

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

例如：

 

7、综合案例

需求：

1. 渲染数据列表  分析：
   1. 根据filter选择不同条件显示不同商品
   2. 渲染页面利用forEach遍历数据里面的数据，并渲染数据列表

商品列表价格筛选

1. 根据选择不同条件显示不同商品
   1. 点击采取事件委托方式.filter
   2. 利用过滤函数filter筛选出符合条件的数据，因为生成的是一个数组，传递给渲染函数即可
   3. 筛选条件是根据点击的data-index来判断
   4. 可以使用对象解构，把事件对象解构
   5. 因为全部区间不需要筛选，直接把goodList渲染即可

  
  
  
  
  



  

    0-100元
    100-300元
    300元以上
    全部区间