日期:1月23日 夜

1. es6 中的数组扩展 都是不改变原数组的 返回新的内容

       1.1 数组常用的静态函数

                from: ƒ from() 将伪数组转为真实数组

                isArray: ƒ isArray() 判断当前变量是否是一个数组类型

                of: ƒ of() 将散列的变量 收集成一个数组 (会返回一个数组类型)

const myArray = {
             0:"上元教育",
             1:"上元it",
             2:"上元会计",
             length:3
         }

// 没有Symbol(Symbol.iterator) 这个属性 就无法延展成数组
         // const myArray02 = [...myArray]  无法延展
      //   console.log(myArray02);


const myArray07 = from(myArray)   //ES6中伪数组转换真数组
       console.dir(myArray07);
       console.log("------------------------------");

const myArray08 = Array.of(1,2,3,4,5,6,7)  //数组对象的静态函数
       console.dir(myArray08);

Array.myOf = (...rest) => rest   //给数组对象添加静态函数,效果如(myArray08)一样
const myArray09 = Array.myOf(1,2,3,4,5,6,7)
       console.dir(myArray09);

      1.2 数组常用的实列函数  (罗列的方法,非常常用,需要记住,并灵活使用

                 find: ƒ find()  从数组中检索出某个元素

                 findIndex: ƒ findIndex()  从数组中检索出某个元素 的位置

                 every: ƒ every()  判断数组中的元素是否都满足某一个条件  类似于逻辑与

                 some: ƒ some()   判断数组中的元素是否有一个是满足条件的   类似于逻辑或者

                 map: ƒ map()     将数组中的每个元素重新整理 并且返回一个新数组

                 filter: ƒ filter() 过掉数组中的某些元素 并且返回新数组

                 reduce: ƒ reduce()   递归   (会在下文中,演示reduce 的使用)

                 forEach: ƒ forEach()  遍历数组

 keys: ƒ keys()        获取数组所有的key

                 values: ƒ values()     获取数组所有的value

                 entries: ƒ entries()    获取数组所有的key和value

 find/findIndex/every/some/map/filter/forEach 写法固定的

                   函数内部会嵌套一个匿名函数

                   该匿名函数可以对原数组的元素进行隐式迭代   (隐式迭代: 在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用,这就叫做隐式迭代 

                   该匿名函数有三个参数

                     参数1 : 遍历出的每个值

                     参数2 ;遍历出值所对应的索引

                     参数3 : 当前数组本身

        案例:

const arr = ["上元教育", "上元it", "小x明", "上元会计"];

    // const r =  arr.find(function(item,index,arr) {
    //       console.log(item,index,arr);
    //       // 函数给我们返回一个boolean值  返回的是true 那么他就会返回当前的 元素 item
    //       return index === 1;
    //   })
    //   console.log(r);

      // 检索出数组中第一个姓小的 
      const r1 = arr.find(item => item.startsWith("小"))
      console.log(r1);
      // 检索出数组中第一个姓小的位置
      const r2 = arr.findIndex(item => item.startsWith("小"))
      console.log(r2);
      // 判断数组中所有的元素是否都包含上元
      const r3 = arr.every(item => item.includes("上元"))
      console.log(r3);
      // 判断数组中所有的元素是否有包含小明

      const r4 = arr.some(item => item.includes("小明"))
      console.log(r4);
      // 将数组中所有元素的前面加上苏州市 
      const r5 = arr.map(item => "苏州市"+item)
      console.log(r5);

      const r6 = arr.map((item,index) => {
             if(index <= 1) {
               return "苏州市"+item
             }
             return "江苏省"+item
      })
      console.log(r6);
      // 将数组中包含上元都取出来
      const r7 = arr.filter(item => item.includes("上元"))
      console.log(r7);
      // 遍历数组 
      arr.forEach((value,index) => console.log(index,value))
      // 获取数组中所有的索引 
      const keys = arr.keys()  // 返回key的迭代器
      console.log( keys);

      const  values= arr.values()
      console.log(values);

      const entries = arr.entries()
      console.log(entries);

               reduce函数的使用方法:

/*
           语法
          arr.reduce(function(prev,cur,index,arr){
            ...
            }, init);
        其中,
        arr 表示原数组;
        prev 表示上一次调用回调时的返回值,或者初始值 init;
        cur 表示当前正在处理的数组元素;
        index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
        init 表示初始值。


          求数组中的元素的和 
          reduce

          传入1个参数
             function(preValue,curValue) {

             }

          第一次迭代: preValue 数组的第0个元素  
                      curValue 数组的第1个元素

          从第2次开始: preValue 表示上一次函数结果的返回值 
                       curValue 表示当前的值

          传入2个参数
            参数1   function(preValue,curValue) {

                    }
            参数2:  number

         第一次迭代  preValue 是被参数2赋值的 即为 preValue = number
                   curValue 是数组中第0个元素
          从第2次开始: preValue  表示上一次函数结果的返回值 
                       curValue 表示数组中当前的元素

        */
       const arr = [10,20,30,40,50,60,70]

       // 用法1
      const result =  arr.reduce((preValue,curValue) => {
           //console.log(preValue,curValue);  
           return preValue + curValue

           
       })

       console.log(result);
       console.log("----------------------------");

       // 用法2
       const result2 =  arr.reduce((preValue,curValue) => preValue * curValue,1)

        //用法2的扩展

       const result3 = arr.reduce((a,b) =>{    //这个扩展是为了初学者更能理解此函数的用法,其中a,b可以用其他来代替
           return a*b
       },1)

       console.log(result2);
       console.log(result3);

       

/*
         [{
              name:"火龙果",
              num:10,
              price:5.5
          },{
              name:"橙子",
              num:2,
              price:8
          },{
              name:"西红柿",
              num:5,
              price:7
          },{
              name:"xxxx",
              num:20,
              price:3
          }]
        
          reduce((result,obj) => {

            return result +   obj.num * obj.prie
              
          },0)
        */
       const goodses = [{
              name:"火龙果",
              num:10,
              price:5.5
          },{
              name:"橙子",
              num:2,
              price:8
          },{
              name:"西红柿",
              num:5,
              price:7
          },{
              name:"xxxx",
              num:20,
              price:3
          }]

        //  const totalPrice =  goodses.reduce((preValue,curValue) => {

        //       return preValue.num*preValue.price + curValue.num +curValue.price
        //   })

          const totalPrice =  goodses.reduce((preValue,curValue) => preValue + curValue.num*curValue.price,0)

          console.log(totalPrice);

          案例2总结:此案例难点在于数组中的对象的初始值是否能理解,返回的值必须都为数字,才能进行运算,否则会报错。

此案例小结: reduce会进行遍历,学完es6后,会有多种遍历方式,一时间不知道该用哪种遍历了,我会专门进行学习,有时间会专门写一篇遍历的内容。