ES6新语法

1.let 与 const

      /* 声明变量关键字
        1. ES5声明变量 var 
            1.1 有变量预解析
            1.2 没有块级作用域

        2.ES6声明变量 let const
            1.1 没有变量预解析
            1.2 有块级作用域

        3. let与const区别
            let : 变量。 可以修改
            const : 常量。 不可以修改
        * 实际开发中, 只要不修改的变量都用const,需要改的时候用let
      */

      //1. ES5声明变量 var
      // 1.1 预解析 :  变量的声明会提升到当前作用域最顶端
      console.log(num)
      var num = 10

      /* 
        var num
        console.log( num )
        num = 10
      */
    
      //1.2 没有块级作用域 :
      for (var i = 1; i <= 5; i++) {}
      console.log(i)

2.对象解构赋值（变量赋值简写）

1.取出对象的属性 赋值给变量

let {name,age,sex} = obj

2.取出变量的值赋值给对象

let user = {username,password}

        //1.取出对象的属性 赋值给 变量
        let obj = {
            name: '张三',
            age: 20,
            sex: '男'
        }
        // ES5
        // let name = obj.name
        // let age = obj.age

        // ES6
        //同时也在声明变量，不能重复声明
        let { name, age, sex: gender } = obj//把sex换为gender
        console.log(name, age, gender);

    // 2.取出变量的值 赋值给 对象
        let username = 'admin'
        let password = '123'
        let age1 = 20
        // ES5
        /* let user = {
            username:username,
            password:password
            age:20
        } */

        // ES6
        let user = {
            password,//属性名跟属性值一样的可以简写成一个
            username,
            age: age1,//不一样的就不简写
            eat() { }//方法：eat:function(){}
        }
        console.log(user)

3.数组解构赋值

1.取出数组元素 赋值给变量

     // 1.取出数组元素 赋值给变量    
    let arr = [10,20,30]
    let [n1,n2,n3] = arr
    console.log(n1,n2,n3);

2.取出变量的值 赋值给数组元素

    let num1 = 10
    let num2 = 20
    let num3 = 30
    let newArr = [num1,num2,num3]
    console.log(newArr)

4.函数参数解构：当函数参数是对象类型,就可以对形参进行解构

   function fn({name,age}){
        console.log(name,age);
    }
    fn({name:'张三',age:20})


    // 上面代码可以简写成一行   
    let {name,age} = {name:'张三',age:20}

5.箭头函数

1.箭头函数：

（1）把function改为箭头
（2）把（形参）写在箭头的左边

2.箭头函数语法注意点

（1）如果箭头函数形参只有一个，则可以省略形参小括号
（2）如果函数体只有一行，则可以省略大括号（此时必须要省略return）

      let fn = function fn(a,b){
        return a*b
      }
      // (1)把fuction改成箭头
      let fn1 = (a,b)=>{
        return a*b
      }
      console.log(fn(1,2))
      console.log(fn1(1,2))

      // (2)如果箭头函数只有一个形参，则省略形参小括号
      let fn2 = a => {
        console.log(a*2)
      }
      fn2(6)

      // (3)如果函数体只有一行代码，啧可以省略大括号（此时必须要省略return）
      let fn3 = (a,b) => a+b
      let res = fn3(1,2)
      console.log(res);

6.箭头函数this指向

1.function函数this指向有三种：

谁调用this就指向谁
（1）普通函数:函数名（） this->window
（2）构造函数：new 函数名（） this->new创建的实例对象
（3）对象方法：对象名.方法名（） this->Object

2.箭头函数this:箭头函数没有this

*箭头函数中使用this,本质是通过作用域链找上一级作用域的this

3.拓展：箭头函数没有this,对箭头函数影响

（1）箭头函数不能作为构造函数
（2）箭头函数不能修改this
（3）事件处理函数一般不用箭头函数

let obj = {
        name:'chnag',
        eat(){
            // 1级 this：function函数指向对象obj
            function fn1(){
                //fnction函数取决于调用  函数名（） this -> window
                console.log(this);//window
            }
            fn1()

            let fn2 = () => {
                // 2级 
                // this箭头函数，访问上级1级this
                console.log(this);
            }
            fn2()
        },
        learn:() => {
            // 1级 this箭头函数，访问上级window
            function fn1(){
            //fnction函数取决于调用  函数名（） this -> window 
                console.log(this);
            }
            fn1()

            let fn2 = () => {
                // 2级 this箭头函数，访问上级1级的this->window
                console.log(this);
            }
            fn2()
        }
    }
    obj.eat()
   obj.learn()

``

7.展开运算符：...

相当于遍历 数组/对象 简写
应用：（1）连接数组（2）求数组的最大值

    let arr1 = [10,20,30]
    let arr2 = [49,40,50]
    let arr3 = [70,80,89]
    
    // (1)连接数组
    arr1.push(...arr2,...arr3)
    console.log(arr1);

    // (2)求数组的最大值
    let arr = [20,50,66,80,1000,40]
    let max = Math.max(...arr)
    console.log(max);

8.数据类型Set :集合

相当于数组，唯一的区别是 Set不能存储重复元素

应用场景：数组去重

let newArr = [... new Set(数组)]

       let arr = [10,20,30,50,60,88,20,50,60,90]
        console.log(arr);
        

       /*  // (1)创建set实例
        let set = new Set(arr)
        console.log(set);
        // (2)把set转成array
        let newArr = [...set] */

        let newArr = [...new Set(arr)]
        console.log(newArr);

2.数组迭代方法

1.数组map方法

映射

   1.数组map方法作用:  映射数组，得到映射之后的新数组
        需求:全场商品打5折（映射：两个数组元素一一对应的）
        原数组：[10,20,30,40,50]
        映射数组：[5,10,15,20,25]

   2. map方法特点
    2.1  回调函数执行次数 == 数组长度
    2.2  回调函数内部的return作用
        return 新数组元素
    2.3  最终map方法的返回值
        *返回映射之后的新数组

      let arr = [88,90,50,60,70]
      
      //完整写法
        let newArr = arr.map((item,index)=>{
            console.log(item,index)
            return  item*0.5
        })

        // 简洁写法
        let newArr1 = arr.map(item=>item*0.5)
       console.log(newArr);

2.数组filter方法

筛选

 (1)数组 filter方法作用：筛选数组，得到满足筛选条件的新数组
        // 需求：根据价格筛选数组

（2）filter方法特点
    2.1回调执行次数 == 数组长度
    2.2回调函数return作用
        return true:满足筛选条件，会放入新数组中
        return false:不满足筛选条件，不会放入新数组中
    2.3 最终自身返回值
        *返回 满足筛选条件的新数组

    let arr = [30,560,666,678,99,288]
    //完整写法
       let newArr = arr.filter((item,index)=>{
           if(item <= 300){
               return true
           }
           else{
               return false
           }
       })
       console.log(newArr);

    //简洁写法
    let newArr1 = arr.filter(item => item<=300)
    console.log(newArr1);

3.数组forEach方法

遍历数组

      
       1.数组forEach方法作用：遍历数组
            相当于for循环
       2.forEach方法的特点
        2.1 回调执行次数 == 数组长度
        2.2 回调函数 return 作用
        无
        2.3 最终自身返回值 无
       
       
      let arr = [188,98,288,600,6868]
      arr.forEach((item,index)=>{
          console.log(item,index);
      })

4.数组some方法

逻辑或 一真则真，全假则假

    逻辑或  一真则真，全假则假

         * 应用场景:  非空判断（判断多个表单元素，有没有空文本）
         * 举例 ： 判断数组中有没有负数

       2. some方法特点
        2.1  回调函数执行次数  !=  数组长度
        2.2  回调函数return作用
        return新数组元素
            * return true : 循环结束。 找到了满足条件的元素,并且some的结果也是true
            * return false : 循环继续。 没有找到满足条件的元素， 如果所有元素全部遍历还是没找到为false，最终some结果也是false
        2.3  some方法的返回值
            * true : 有符合条件的元素
            * false : 没有符合条件的元素
   

      let arr = [2,30,5,68,77.11]
       //判断有没有奇数
       //完整代码
       let res = arr.some((item,index)=>{
           if(item % 2 == 1){
               return true
           }
           else{
               return false
           }
        })
        console.log(res);

        // 简洁代码
        let res1 = arr.some(item => item % 2 == 1)
        console.log(res1);

5.数组everry方法

逻辑与 一假则假，全真则真

1.数组every方法作用：判断 数组中是否所有的元素都满足条件（逻辑与&&）
        2.2every方法特点
            2.1 回调函数执行次数 != 数组长度
            2.2 回调函数return作用
                return true:循环继续，满足条件，如果所有的二元素都是true,最终every的结果也是true
                return false:循环结束，不满足条件，此时every的结果也是false
            2.3 最终自身返回值
                *true :所有元素都满足条件
                *false；有元素不满足条件

//    需求：判断数组是不是都是偶数
    let arr = [10,20,40,45,68]

    // 完整写法
    let res = arr.every((item,index)=>{
        if(item % 2 == 0){
            return true
        }else{
            return false
        }
    })
    console.log(res)

    // 简洁写法
    let res1 = arr.every(item=>item % 2 == 0)
    console.log(res1);

6.数组findIndex方法

1.数组findIndex方法作用：找元素下标
         findIndex与indexof作用一致，都是找元素下标，应用场景不同
         （1）数组中的元素是值类型：indexof
          (2)数组中的元素是引用类型;findIndex
         2.findIndex方法特点
             2.1 回调执行次数!=数组长度
             2.2 回调函数return作用
                 return true :循环循环。找到了，返回当前下标
                 return false:循环继续。没找到，如果全部都是false,最终默认返回-1
             2.3 最终自身返回值
               *下标：找到元素
               *-1：没有该元素

    // 需求：判断数组是不是都是偶数
        let arr = [
            { name: '张三', age: 20 },
            { name: '李四', age: 20 },
            { name: '王五', age: 20 }
        ]
        // 完整写法
        let index = arr.findIndex((item,index)=>{
            if(item.name == '李四'){
                return true
            }else{
                return false
            }
        })
        console.log(index);

        // 简洁写法
        let index2 = arr.findIndex(item=>item.name=='李四')
        console.log(index2);

7.数组reduce方法

1.数组reduce方法:给每一个元素执行一次回调
        2.reduce场景：数组求和
        */
        /* 
        第一个参数：回调函数
        (sum.item,index)=>{
            sum :累加和。本次循环的sum值就是上一次回调的返回值
            item；数组元素
            index:数组下标
        }
        第二个参数：初始值  一般传0
            *默认情况下reduce会从1下标开始，如果遇到空数组就会报错
        返回值：最后一次sum的结果

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .list {
      width: 990px;
      margin: 100px auto 0;
    }
    .item {
      padding: 15px;
      transition: all .5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }
    .item:nth-child(4n) {
      margin-left: 0;
    }
    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }
    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }
    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }
    .item .price , .item .sub-total{
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }
    .item .price::before, .item .sub-total::before, .amount::before {
      content: "¥";
      font-size: 12px;
    }
    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }
    .item .count {
      flex: 1;
      color: #aaa;
    }
    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }
    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>
<body>
  <div class="list">
    <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
  </div>
  <div class="total">
    <div>合计：<span class="amount">1000.00</span></div>
  </div>
  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: 289,
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
        count: 2,
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: 109,
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
        count: 3,
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: 488,
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        count: 1,
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: 139,
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
        count: 1,
      }
    ]

    //1.以前的思路:dom驱动。  遍历数组,创建dom元素，逐一添加
    


   //2.以后的思路:数据驱动。  遍历数组，拼接html字符串，然后替换元素的innerHTML
      // (1)把对象数组映射成html字符串 数组
            let newArr = goodsList.map(item=>`
            <div class="item">
                    <img src="${item.picture}" alt="">
                    <p class="name">${item.name} <span class="tag">【赠品】10优惠券</span></p>
                    <p class="price">${item.price}</p>
                    <p class="count">${item.count}</p>
                    <p class="sub-total">${item.price * item.count}</p>
              </div> 
            `)
      //（2）把数组中所有的html字符串拼接起来
            let newStr = newArr.join('')

      //（3）把html字符串渲染到页面
            document.querySelector('.list').innerHTML = newStr 

    

  // 封装函数调用
  const  renderData = arr=>
     document.querySelector('.list').innerHTML = arr.map(item=>`
      <div class="item">
                    <img src="${item.picture}" alt="">
                    <p class="name">${item.name} <span class="tag">【赠品】10优惠券</span></p>
                    <p class="price">${item.price}</p>
                    <p class="count">${item.count}</p>
                    <p class="sub-total">${item.price * item.count}</p>
              </div> 
      `).join('')
  
  renderData(goodsList)

  // reduce:求数组累加和
 document.querySelector('.amount').innerHTML =  goodsList.reduce((sum,item)=>sum+item.price*item.count,0)
  </script>
</body>
</html>