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

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个需求 

DOCTYPE html>
 
  
  
  
  
 
  
 

4、foreach方法（重点）

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

语法： 

例如：

注意：

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

5、渲染商品列表

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

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

DOCTYPE html>