06day-数组进阶

Array

数组常用方法 2

所有方法都不会改变原数组，以返回值的形式给到结果

concat()

• 语法：arr.concat(数据，数组…);
• 作用：进行数组的拼接
• 返回值：拼接好的数组

    var arr = ['hello','world'];
    var arr2 = [100,200]
    var arr3 = [300,400]
    var res = arr.concat('新来的',arr2,arr3);
    // 更多的作用是进行数组的拼接
    console.log(arr);
    console.log(arr2);
    console.log(res);

join()

• 作用：使用连接符把数组里面的每一项连接成一个字符串
• 语法：arr.join(“连接符”)
  • 也可以不写参数，默认使用逗号(,)
    返回值：连接好的字符串

    var arr = [10,20,30,40];
    var res = arr.join();
    console.log(res);
    var res2 = arr.join("^.^");
    console.log(res2); 
    var res3 = arr.join("");
    console.log(res3);
    console.log(arr);
    console.log(arr.join(" "));
    console.log(arr.join("ZD"));

slice()

• 语法：arr.slice(开始索引，结束索引)
  • 开始索引：默认是0
  • 结束索引：默认为length
• 特点：
  • 包前不包后
  • 可以写负数，等价于 负整数 + 数组的length
• 返回值：一个新的数组
  • 如果你截取了数据，那截取的数据都会在新数组内
  • 如果没有截取，那就是一个空数组

    var arr = [10,20,30,40,50];
    var res = arr.slice(0,5); // [10, 20, 30, 40, 50]
    console.log(res);
    // 包前不包后的意思是，截取是会将开始索引位置的数据截取进来，但不会截取结束索引位置的数据。
    var res2 = arr.slice(0,4) // [10, 20, 30, 40]
    var res3 = arr.slice(1,-2)// [20,30]
    console.log(res3);
    console.log(arr.slice(1,-6)); // []

indexOf()

• 作用：从开始的索引向后检索数组中是否存在某个数据
• 返回值：
  • 如果检索到了该数据，那么返回的就是该数据第一次出现的索引值
  • 如果没有检索到，那就返回-1
• 语法：arr.indexOf(要查找的数据，开始索引)
  • 开始索引为选填，默认为0

    var arr = [100, 200, 300, 400, 500, 300, 400, 500, 300, 400];
    var res = arr.indexOf(500);
    console.log(res);
    // 找第二个500的索引
    var res2 = arr.indexOf(500,res + 1);
    console.log(res2);

    var res3 = arr.indexOf(1000);

    console.log(res3); // -1

lastIndexOf()

• 作用：从开始索引位置向前检索数组中是否存在某个值
• 返回值：
  • 如果检索到了该数据，那么返回的就是该数据第一次出现的索引值
  • 如果没有检索到，那就返回-1
    语法：arr.lastIndexOf(要查找的数据，开始索引)
  • 开始索引选填：默认为 length

    var arr = [100, 200, 300, 400, 500, 300, 400, 500, 300, 500];
    var res = arr.lastIndexOf(500);
    console.log(res); // 7
    var res2 = arr.lastIndexOf(500,arr.length)
    console.log(res2);

数组常用方法3

不会改变原数组，但是这里的方法相对复杂一些，以返回值的形式给出结果

forEach

• 语法：arr.forEach(function(item,index,arr){})
  • item：表示数组内的每一项
  • index：表示每一项数据的索引
  • arr：被遍历的数组
• 作用：遍历数组
• 返回值：undefined

    var arr = [100,200,300,400,500];
    // arr.forEach(function(item,index,arr){
    //   // 这个函数执行次数取决于数组内成员的个数
    //   console.log("我执行了");
    //   console.log(item,"----",index,"----",arr);
    // })

    // 求和
    var sum = 0;
    // for(var i = 0; i <= arr.length - 1; i++){
    //   sum += arr[i];
    // }
    // console.log(sum);

      arr.forEach(function(item){
        sum += item;
      })
      console.log(sum);

map

• 语法：arr.map(function(item,index,arr){})
• 作用：映射数组
• 返回值：
  • 是一个新数组，并且和原数组长度一致
  • 新数组内的每一个元素是根据原数组中的每一个元素映射出来的
  • 映射的条件以 return 的形式书写。

      // var arr = [100,200,300,400,500];

      // var res = arr.map(function a(item){
      //   console.log(item);
      //   // 以return 的形式书写 映射条件
      //   return item * 0.1
      // })
      // console.log(res);
      var arr = [1,2,3,4,5];
      // var arr2 = arr.slice();
      // arr2[0] = 100;
      // console.log(arr);
      // console.log(arr2);
      var arr2 = [];
      for(i = 0; i < arr.length; i++){
        arr2.push(arr[i]);
      }
      arr2[0] = 100;
      console.log(arr);
      console.log(arr2);
        /* 
        map的原理
          1. 准备一个新数组
          2. 根据原始数组进行遍历
            =》第一次调用a(100，0，arr) 
              - 根据映射条件 return item * 0.1
              - 返回值10
              - 把这个返回值放到了新数组里面 [10]
            =》第一次调用a(200，1，arr) 
              - 根据映射条件 return item * 0.1
              - 返回值20
              - 把这个返回值放到了新数组里面 [10,20]
            ......
          3. 把最终的数组当作map的返回值给到res
      */

filter

• 作用：过滤数据
• 语法：arr.filter(function(item,index,arr){})
• 返回值：
  • 是一个新数组
  • 新数组内的数据就是原数组内所有满足条件的项
  • 条件以 return 书写

      var arr = [111,222,333,444,555];
      // 开始过滤
      var res = arr.filter(function a(item){
        // 以return形式书写条件
        return item % 2 === 0;
      })
      console.log(res);

      /* 
        filter原理
          1. 准备一个新数组 []
          2. 开始根据原属内有多少个成员调用多少次a函数
            - a(111,0,arr) 
              - 根据过滤条件 
              - item % 2 === 0;
              - 111 % 2 !== 0
              - 结果值：false
              那111就不回加到新数组里面（不做任何操作）[]
            - a(222,0,arr)
              - 根据过滤条件 
              - item % 2 === 0;
              - 结果值：true
              - 就将222加到新数组内[222]
            .....
            5次走完以后[222,444]
          3. 把[222,444]返回给res
      */

every

• 作用：判断数组中是不是每一个都满足条件
• 返回值：一个布尔值
  • 如果都满足条件，返回true
  • 如果有一个不满足，返回false；
• 条件以 return 形式书写
• 语法：arr.every(function(item,index,arr){})

some

• 作用：判断数组中是不是有某一个满足条件
• 返回值：一个布尔值
  • 如果有一个满足条件，返回true
  • 如果都不满足，返回false
• 条件以 return 形式书写
• 语法：arr.some(function(item,index,arr){})

      var arr = [100,200,300,400,500];
      var res = arr.every(function(item){
        return item > 100;
      })
      console.log(res); //false
      var res2 = arr.some(function(item){
        return item > 100;
      })
      console.log(res2);// true

find()

• 作用：查找数组中某一个数据
• 返回值：
  • 数组中你找到的数据
• 查找的条件以 return 形式书写
• 往往用来在复杂数据类型中查找
• 语法：arr.find(function(item,index,arr){})

      var objArr = [
        {
          id:1,
          name:"ZD",
          age:8,
        },
        {
          id:2,
          name:"QT",
          age:3,
        },
        {
          id:3,
          name:"RB",
          age:1,
        },
      ]

      var id = prompt("请输入你要查询的id") - 0;

      var res = objArr.find(function(item){
        return item.id === id;
      })
      console.log("这是你查询的全部信息",res);

reduce()

• 语法：arr.reduce(function(prev,item,index,arr){},初始值)
• prev ：初始值或者每一次叠加后的结果
• item：每一项
• index：索引
• arr：原始数组
• 初始值 默认值为数组的第0项索引上的值
• 作用：进行叠加累计

      var arr = [100,200,300,400,500];
      // var res = arr.reduce(function(prev,item){
      //   return prev + item
      // },0)
      // console.log(res); // 1500
      // var res = arr.reduce(function(prev,item){
      //   return prev + item
      // })
      // console.log(res); // 1500
      var res = arr.reduce(function a(prev,item){
        return prev + item
      },1000)
      console.log(res); // 2500

      /* 
        reduce原理
          1. 准备一个初始值，按照你的第二参数 来定
            - 如果没有给定第二参数，那初始值就为 arr[0]
            - 100

            2. 根据arr来调用a函数，
              =》第一次调用 a(100,200,1,arr); return 100 + 200 返回值赋值给 初始值 
              - 300
              =》第二次调用 a(300,300,2,arr); return 300 + 300返回值赋值给 初始值 
              - 600
              .....
              =》最后调用到第四次，结束之后
            3. 把初始值当作结果，当作reduce的返回值给到res
            res = 1500

            - 如果给定第二参数，那初始值就等于
            - 1000

            2. 根据arr来调用a函数
              =》第一次调用，a(1000,100,0,arr); return 1000 + 100 返回值赋值给 初始值 
              - 1100
              =》第二次调用，a(1100,200,1,arr); return 1100 + 200 返回值赋值给 初始值 
              - 1300
              .....
              =》最后调用5次，结束之后
            3. 把初始值当作结果，当作reduce的返回值给到res
      */

           var arr = ['a','d','c','b','d','a','d','c','b','b','a','d','c'];

      var obj = arr.reduce(function(prev,item){
        // if(prev[item]){
        //   prev[item] += 1;
        // }else{
        //   prev[item] = 1;
        // }
        // prev[item] ? prev[item] += 1 : prev[item] = 1;
        prev[item] = prev[item] + 1 || 1;
        return prev;
        // return 
      },{})
      console.log(obj);

数组塌陷

概念

• 当你在删除数组内容的时候，就会发生塌陷

    var arr = [1,2,3,4];
    // 需求：一个数组，每次删除一个内容，把所有内容删除完毕
    for(i = 0; i < arr.length;i++){
      arr.splice(i,1);
      console.log(i);
    }
    console.log(arr);

    /* 
      [1,2,3,4]
      当你把1删除以后
      原先的2，会往前移，数据2，原来的索引1，现在的索引0
      代码执行
      [1,2,3,4] len == 4
      i == 0
      arr.splice(0,1)
      [2,3,4] len == 3
      i == 1
      arr.spilce(1,1)
      
      [2,4] len == 2
      i == 2
      arr.splice(2,1)

      i == 3
      
      循环结束了
    */

解决

• 方案1 倒着循环数组

    var arr = [1,2,3,4];
    for(var i = arr.length -1; i >= 0; i--){
      arr.splice(i,1);
    }
    console.log(arr);

    /* 
      代码执行
      [1,2,3,4] len === 4
      i == 3
      arr.splice(3,1)

      [1,2,3] len = 3
      i = 2
      arr.splice(2,1);

      [1,2] len = 2
      i = 1
      arr.splice(1,1)

      [1] len == 1
      i = 0
      arr.splce(0,1)

      [] len == 0
      i = -1

      循环结束
    */

• 方案2:让i也跟着变化

    var arr = [1,2,3,4];
    // for(i = 0; i < arr.length; i++){
    //   arr.splice(i,1)
    //   i--;
    // }
    // console.log(arr);
    while(arr.length > 0){
      arr.splice(0,1)
    }
    console.log(arr);