Pink老师JS进阶DAY1学习记录-作用域，闭包，变量提升，函数提升，箭头函数，数组解构，对象解构以及练习案例

Pink老师JS进阶DAY1学习记录-作用域，闭包，变量提升，函数提升，箭头函数，数组解构，对象解构以及练习案例

因为某些原因昨天学习没能带电脑做笔记，写在纸上，也懒得誊抄啦，直接放在这儿。

六. 箭头函数（重要，简洁）

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

1. 箭头函数基本语法

     //1. 箭头函数 基本语法
     const fn = () => {
       console.log(123)
     }

2. 箭头函数参数
   只有一个形参的时候，可以省略小括号
   只有一行代码的时候，我们可以省略大括号
   只有一行代码的时候，可以省略return
   箭头函数可以直接返回一个对象

    // 1. 只有一个形参的时候，可以省略小括号
    // const fn = x => {
    //   console.log(x)
    // }
    // fn(1)
    // 2. 只有一行代码的时候，我们可以省略大括号
    // const fn = x => console.log(x)
    // fn(1)
    // 3. 只有一行代码的时候，可以省略return
    // const fn = x => x + x
    // console.log(fn(1))
    // 4. 箭头函数可以直接返回一个对象
    // const fn = (uname) => ({ uname: uname }) 这里的()是避免对象的大括号和省略的大括号混淆
    // console.log(fn('刘德华'))

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

    // 1. 利用箭头函数来求和
    const getSum = (...arr) => {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      return sum
    }
    const result = getSum(2, 3, 4)
    console.log(result) // 9

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

    const obj = {
      uname: 'pink老师',
      sayHi: function () {
        console.log(this)  // obj
        let i = 10
        const count = () => {
          console.log(this)  // obj 
        }
        count()
      }
    }
    obj.sayHi()

七. 解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

1）数组解构

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

  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = [1, 2, 3]
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3

1. 注意分号（JS中就两个需要加分号的，一个是立即执行函数，另一个是数组结构前有代码时）

let a = 1
let b = 3;
[b, a] = [b, a]
console.log(a) // 3
console.log(b) // 1

2. 注意参数（比较简单，这里就不举例了）
   a. 变量多 单元值少的情况
   b. 变量少 单元值多的情况
   c. 利用剩余参数解决变量少 单元值多的情况
   d. 防止有undefined传递单元值的情况，可以设置默认值
   e. 按需导入，忽略某些返回值
   f. 支持多维数组的结构const [a, [b, c]] = ['苹果', ['小米', '华为'] ]

2）对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
跟数组解构的用法是类似的，只是变量名必须要跟对象里的属性名一样，也可以根据语法改名字
掌握以下代码就可以了：

    // 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己，三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },
      ]
    }

需求一：请将以上msg对象 采用对象解构的方式 只选出 data 方便后面使用渲染页面

     const { data } = msg
     console.log(data)

需求二：我们需要把data选出当做参数传递给 函数

function render({ data }){
    console.log(data)
}
render(msg)

需求三：为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData

function render({ data: myData }){
    console.log(myData)
}
render(msg)

八. forEach遍历数组

语法：

    const arr = ['red', 'green', 'pink']
    const result = arr.forEach(function (item, index) {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })

forEach和map的区别:
相同点：
forEach 和 map都相当于封装好的单层for循环，三个值都相同
不同点：
1、forEach()方法没有返回值，而map()方法有返回值。
2、forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化。（？？？没懂hh）
3、map遍历的后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。
应用场景：
1、forEach适合于你并不打算改变数据的时候。
2、map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)。

forEach和map的区别 原文链接：https://blog.csdn.net/lhm666666/article/details/126657703

九. 筛选数组filter方法

运用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组。
怎么用：

const score = [10, 50, 3, 40, 60]
const re = score.filter(item => item >=20) // 箭头函数
console.log(re) // [50, 40, 60]

十. 案例

1. 渲染商品案例（主要是用字符串和forEach来渲染，之前学的是用for循环和数组对象）

    // 1. 声明一个字符串变量
    let str = ''
    // 2. 遍历数据 
    goodsList.forEach(item => {
      // const {id} =  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>
      `
    })
    // 3.生成的 字符串 添加给 list 
    document.querySelector('.list').innerHTML = str

2. 价格筛选（这里的tab栏切换是用的css）
   需求：1. 渲染商品（上面） 2. 根据不同条件显示不同商品
   效果如下：
   

    // 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. 过滤筛选（根据自定义属性进行条件判断再filter筛选）
    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)
      }
    })