ES6第一章（作用域、函数、参数、箭头函数、解构赋值、forEach以及filter）的使用

什么是ES6？

ES6是一个泛指，他指的是ES2015之后的新版本，是JavaScript的版本更新的迭代，里面有着许多JS的新特性

ES6新增的两种声明变量的方式

let关键字

let关键字是块级作用域，声明变量的一种方式

const关键字

const关键字也是块级作用域 声明变量的一种方式 且必须赋初始值，值不能修改

变量提升

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

函数提升

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

   fn();
        function fn() {
            // fn1();
            function fn1() {
                console.log('fn1');
            }
        }
        fn1(); //报错，不在同一作用域内
        // console.log(fn);

函数参数

灵活使用函数参数 可以提高函数的应用

默认值

<script>
  // 设置参数默认值
  function sayHi(name="小明", age=18) {
    document.write(`
大家好，我叫${name}，我今年${age}岁了。`);
  }
  // 调用函数
  sayHi();
  sayHi('小红');
  sayHi('小刚', 21);
</script>

1. 声明函数时为形参赋值即为参数的默认值
2. 如果参数未自定义默认值时，参数的默认值为 undefined
3. 调用函数时没有传入对应实参时，参数的默认值被当做实参传入

动态参数 arguments

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

 <script>
        console.log(getSum(1, 2, 3));
        console.log(getSum(1, 2, 3, 4));
        console.log(getSum(1, 2, 3, 4, 5));

        function getSum() {
            let sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
    </script>

1. arguments 是一个伪数组
2. arguments 的作用是动态获取函数的实参

剩余参数 …

  <script>
        console.log(getSum(1, 2, 3));
        console.log(getSum(1, 2, 3, 4));
        console.log(getSum(1, 2, 3, 4, 5));

        function getSum(...other) {
            let sum = 0;
            other.push(14)
            console.log(other.pop());
            for (var i = 0; i < other.length; i++) {
                sum += other[i];
            }
            console.log(other);
            return sum;
        }

        // other 剩余参数
        /*
            other与arguments的区别：
                other：是一个数组，可以使用数组中的方法，
                而arguments是一个伪数组，则不能使用数组中的方法
        */
    </script>

1. ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助 ... 获取的剩余实参，是个真数组

箭头函数

箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

<script>
        // 需求1 点击div 2s 之后颜色变为粉色
        let ad = document.querySelector('#ad');
        // 绑定点击事件
        ad.addEventListener('click', function () {
            // 保存this的值
            // let _this = this;
            // 加入定时器
            setTimeout(() => {
                // 修改背景颜色
                this.style.backgroundColor = 'pink';
            }, 2000)
        })
        // 需求2 从数组中返回偶数元素

        const arr = [1, 4, 5, 6, 621, 100];
        // 之前的做法
        // const result = arr.filter(function (item) {
        //     if (item % 2 == 0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
        // console.log(result);
        // 现在的做法（箭头函数）
        const result = arr.filter(item => item % 2 == 0)
        console.log(result);
        // 箭头函数适合于this无关的回调，定时器 数组方法的回调
        // 箭头函数不适合this相关的问题 事件回调 对象的方法


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

        const getSum = (...args) => {
            console.log(args);
            let sum = 0
            for (var i = 0; i < args.length; i++) {
                sum += args[i]
            }
           console.log(sum);;
        }
        getSum(1,2,3)
        getSum(1,2,3,4)
        getSum(1,2,3,4,5)


        // 使用forEach遍历数据
        let arr1 = [1,2,3,4,5];

        let sum1 = 0;

        arr1.forEach(item=>sum1+=item)
        console.log(sum1);

        // 箭头函数中是没有this指向的，它是沿用自己作用域链的上一层this
        // 带实际中，大部分的this指向的都是调用者


    </script>

1. 箭头函数属于表达式函数，因此不存在函数提升
2. 箭头函数只有一个参数时可以省略圆括号 ()
3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

解构赋值

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

数组解构

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

 <script> 
        // ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
        // 这称为结构赋值
        // 1.数组的结构
        // const F4 = ['小沈阳', '刘能', '赵四', '宋小宝'];

        // let [xiao, liu, zhao, song] = F4;
        // console.log(xiao);
        // console.log(liu);
        // console.log(zhao);
        // console.log(song);


        // 对象的结构
        const zhao = {
            name: '赵本山',
            age: '不详',
            xiaopin: function () {
                console.log('不差钱');
            }
        };
        // let { name, age, xiaopin } = zhao;
        // console.log(name);
        // console.log(age);
        // console.log(xiaopin);
        // xiaopin();
        let { xiaopin } = zhao;
        xiaopin();

        // 4.防止有undefined 可以设置默认值
        // let [a = '华为', b = '苹果'] = ['小米']
        // console.log(a);
        // console.log(b);
        // 5.按需引入 可以忽略某些返回值
        // let [a, , b, c] = ['小米', '苹果', '华为', 'oppo']
        // console.log(a);
        // console.log(b);
        // console.log(c);
        // 6.支持多维数组的结构哦
        let [a, [b, c]] = ['pink', ['green', 'red']]
        console.log(a);
        console.log(b);
        console.log(c);

    </script>

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

对象结构

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

 <script>
        // 对象结构：是将对象属性和方法快速批量赋值的一系列简介方法
        /* 
            类似于key-value 左边是变量 右边是属性值
            解构里面的值不要与外面的值冲突
            对象的变量找不到该属性值的时候是undefined

        
        
        */
        // username = 'ls'
        // let obj = {
        //     name: 'zs',
        //     age: 29,
        //     gender: '男'
        // }
        // let { name, age, gender } = obj
        // console.log(name);
        // console.log(age);
        // console.log(gender);

        // let { uname = username } = obj
        // console.log(uname)


        // 数组对象结构
        const obj = [{ uname: 'zs', age: 20 }]
        // let [{ uname, age }] = obj
        // console.log(uname);
        // console.log(age);


        const pig = { name: '佩奇', age1: 6 }
        // let { name, age1 } = pig
        // console.log(name);
        // console.log(age1)
        let { name: uname1, age: personAge } = { name: '佩奇', age1: 6 };

        console.log(uname1);
    </script>

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 对象中找不到与变量名一致的属性时变量值为 undefined
4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

多级对象解构

    <script>

            const person = [
                {
                    name: '佩奇',
                    family: {
                        mother: '猪妈妈',
                        father: '猪爸爸',
                        sister: '乔治'
                    },
                    age: 6
                }
            ]
            const [{ name, family: { mother, father, sister } }] = person
            console.log(name)
            console.log(mother)
            console.log(father)
            console.log(sister)
        </script>

对象解构案例

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

      ]
    }

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

    const {data} = msg
    console.log(data);
 
    // 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
    function render({data}){// {data} = msg
      console.log(data);
    }
   render(msg)

    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
    function render({data:myData}){// 
    
      console.log(myData);

    }
   render(msg)
  </script>

forEach()遍历数组

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

 <script>
       /* 
         forEach()主要是遍历数组元素
            里面有三个参数，第一个参数是元素对象 必须写 ，第二个参数是索引号 第三个参数是对应的原数组
        
        */
        let arr = ['张三','李四','王五','赵六']

        arr.forEach((item,i,arr1)=>{
            console.log(item);
            console.log(i);
            console.log(arr1);
        })
    </script>

使用forEach遍历元素，并渲染页面的案例

  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: './images/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: './images/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: './images/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: './images/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: './images/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: './images/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: './images/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: './images/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: './images/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ];
    // 声明一个字符串
    // let str = "";

    // // 遍历数据
    // goodsList.forEach(item => {
    //   // 解构里面的元素
    //   const { name, price, picture } = item;

    //   str += `
    //   

    //       
    //       
${name}
    //       
${price}
    //   
    //   `
    // });
    // let list = document.querySelector('.list');
    // list.innerHTML = str;

    // 如果数据存在较多的情况下 使用数组遍历数据更高效
    let arr = []
    goodsList.forEach(item => {
      const { name, price, picture } = item;
      arr.push(`

       ${picture}" alt="">
          
${name}
          
${price}
      `)
    })
    document.querySelector('.list').innerHTML = arr.join('')

  </script>

filter筛选数组元素

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
主要使用场景： 筛选数组符合条件的元素，并返回筛选之后元素的新数组

    <script>
        let arr = [19, 25, 21, 34, 252, 123]

        let newArr = arr.filter(item => item >= 30
        )

        // 返回的符合条件的新数组
        console.log(newArr);
    </script>

综合案例：商品价格列表筛选案例

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品渲染title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  style>
head>

<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>
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: './images/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: './images/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: './images/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: './images/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: './images/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: './images/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: './images/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: './images/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: './images/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ];
    // 将数据加载渲染封装一个函数
    function render(arr1) {
      let arr = []
      arr1.forEach(item => {
        const { name, price, picture } = item;
        arr.push(`

       ${picture}" alt="">
          
${name}
          
${price}
      `)
      })
      document.querySelector('.list').innerHTML = arr.join('')
    }

    // 页面加载渲染数据
    render(goodsList)

    // document.querySelector('.filter').addEventListener('click', e => {
    // const { tagName, dataset } = e.target
    // if (tagName === 'A') {
    //   // console.log(123)
    //   // arr 返回的新数组
    //   let arr = goodsList
    //   console.log(dataset);
    //   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)
    // }
    // })


    document.querySelector('.filter').addEventListener('click', e => {
      // dataset H5新增自定义属性 且保证自定义属性是以data-开头的
      // console.dir(e.target);
      // console.dir(e.target.dataset);
      const { tagName, dataset } = e.target
      if (tagName === 'A') {
        // 返回一个新的数组，filter 筛选数组
        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>

html>