浅谈数组

数组

• 我们平常在书写代码的时候遇到需要使用多个数据，通过定义多个变量太麻烦了，所以就定义了数组。

数组的概念和作用

• 数组是一组数据的集合，用来存放多个数据。适用于需要操控多个数据，但是只能使用一个数据的情况。

数组的创建

• 字面量
  • var arr = [];
• 构造函数
  • var arr = new Array();
• 注意事项
  • 当两种方式创建数组，数组参数为1时，如下代码所示

   var arr = [5]; //[5]代表数组里只有一个成员5    
   var arr1 = new Array(5);//[empty × 5] 代表数组长度为5，成员为五个空
   console.log(arr);
   console.log(arr1);
  

数组的常用方法

• push
  • 向数组的末尾增加一项，返回数组的长度。

  var arr = [1, 2, 3, 4];
  var length = arr.push(6);
  console.log(length);//5
  console.log(arr);//[1, 2, 3, 4, 6];
  

• unshift
  • 向数组的头部增加一项，返回数组的长度。

  var arr = [1, 2, 3, 4];
  var length = arr.unshift(6);
  console.log(length);//5
  console.log(arr);//[6, 1, 2, 3, 4];
  

• pop
  • 从数组的尾部移除一项，返回移去的这一项。

  var arr = [1, 2, 3, 4];
  var num = arr.pop();
  console.log(num);//4
  console.log(arr);//[1, 2, 3,];
  

• shift
  • 从数组的头部移除一项，返回移去的这一项。

  var arr = [1, 2, 3, 4];
  var num = arr.shift();
  console.log(num);//1
  console.log(arr);//[2, 3, 4];
  

• sort
  • 排列数组中的成员 改变原数组（适用于成员全为数字）有以下几种情况：
    • 传参（传函数 该函数必有两个参数）
      • 返回 a - b ，升序排列；

      var arr = [3, 7, 9, 8, 1, 6];
      arr.sort(function(a,b){
      return a - b;
      });//[1, 3, 6, 7, 8, 9]
      console.log(arr);
      

      • 返回 b - a ，降序排列；

      var arr = [3, 7, 9, 8, 1, 6];
      arr.sort(function(a,b){
      return b - a;
      });//[9, 8, 7, 6, 3, 1]
      console.log(arr);
      

    • 不传参
      • 按照第一个数字排列；

      var arr = [3, 7, 9, 8, 1, 6];
      arr.sort(function(){
      });//[3, 7, 9, 8, 1, 6]
      console.log(arr);
      

• join
  • 以参数作为间隔将数组转换为字符串，默认为","

  var arr = [1, 2, 3, 4, 5, 6];
  var str = arr.join();
  var str1 = arr.join("*");
  console.log(str);//1,2,3,4,5,6
  console.log(str1);//1*2*3*4*5*6
  

• concat
  • 连接作用 给数组连接新成员，如果新成员中有数组会先将这个数组拆开在连接,返回新数组

  var arr = [1, 2, 3, 4, 5, 6];
  var arr1 = arr.concat(7,8,9,[10,11,23]);
  console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23]
  

• slice
  • 用于截取数组中的一段成员 返回新数组。分为以下几类
    • slice()表示将整个数组截取

    var arr = [1, 2, 3, 4, 5, 6];
    var arr1 = arr.slice();
    console.log(arr1);//[1, 2, 3, 4, 5, 6]
    

    • slice(a)表示从下标a截取到最后

    var arr = [1, 2, 3, 4, 5, 6];
    var arr1 = arr.slice(2);
    console.log(arr1);//[3, 4, 5, 6]
    

    • slice(a,b)表示从下标a截取到下标b，[a,b)

    var arr = [1, 2, 3, 4, 5, 6];
    var arr1 = arr.slice(2,4);
    console.log(arr1);//[3, 4]
    

    • slice(负数)，表示从后往前数

    var arr = [1, 2, 3, 4, 5, 6];
    var arr1 = arr.slice(3,-2);
    console.log(arr1);//[4]
    

• reverse
  • 将一个数组倒序 影响原数组（原数组倒序排列）返回原数组

  var arr = [1, 2, 3, 4, 5, 6];
  arr.reverse();
  console.log(arr);//[6, 5, 4, 3, 2, 1]
  

• splice
  • 操作数组 接收的第一个参数表示操作数组的位置，第二个参数表示要删除的项数，之后的参数表示向第一个参数插入的成员（参数不固定）返回改变后的原数组

  var arr = [1, 2, 3, 4, 5, 6];
  arr.splice(1,2,7,8,9);
  console.log(arr);//[1, 7, 8, 9, 4, 5, 6]
  

ES5新增的数组方法

• indexOf
  • 查找数组中的某一个成员，存在返回下标，不存在返回-1
  • 第一个参数是查找的成员，第二个参数是查找元素的起始位置

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  var index = arr.indexOf(5,4);
  console.log(index);//4
  

• filter
  • 过滤 参数为函数 返回值为符合参数表达式的成员组成的数组
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  var arr1 = arr.filter(function(value,index,self){
      return value % 2 == 1;
  })
  console.log(arr1);//[1, 3, 5, 7]
  

• forEach
  • 该方法用于循环 参数为一个函数，执行次数为length次，没有返回值
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  arr.forEach(function(value,index,self){
      console.log(value,index,self);
  })
  

• map
  • 该方法也用于循坏参数为一个函数，执行length次，返回值为一个新数组，新数组的成员为参数函数的返回值
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = [10, 20, 30, 40, 50, 60, 70, 80];
  var arr1 = arr.map(function(value,index,self){
      return value * 1.5
  })
  console.log(arr1);//[15, 30, 45, 60, 75, 90, 105, 120]
  

• some
  • 用于判断数组是否存在符合条件的成员，参数为一个函数,返回值为布尔值（只要有一个成员符合就为true，全部不符合就为flase）
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  var result = arr.some(function(value,index,self){
      return value === 5;
  })
  console.log(result)//true
  

• every
  • 用于判断数组是否存在符合条件的成员，参数为一个函数,返回值为布尔值（只要有一个成员不符合就为flase，全部符合就为true）(对比some)
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  var result = arr.every(function(value,index,self){
      return value === 5;
  })
  console.log(result)//false
  

• fill
  • 填充数组 接收三个参数 改变原数组
  • 传一个参数a，就是将数组的每个成员都填充为a

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  arr.fill(9);
  console.log(arr);//[9, 9, 9, 9, 9, 9, 9, 9]
  

  • 传两个参数a，b 第一个参数为填充数，第二个参数是开始填充位置，往后都填充为a

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  arr.fill(9,3);
  console.log(arr);//[1, 2, 3, 9, 9, 9, 9, 9]
  

  • 传三个参数 第一个参数为填充数 第二个填充的起始位置 第三个参数填充的结束位置

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  arr.fill(9,3,6);
  console.log(arr);//[1, 2, 3, 9, 9, 9, 7, 8]
  

ES6新增的数组方法

• find
  • 查询数组中的成员，参数为一个函数，返回值为符合条件表达式的第一个成员，都不符合返回underfined
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = ["张三", "李四", "王五", "赵六", "田七", "刘八"];
  var username = arr.find(function(value,index,self){
      return value.indexOf("四") != -1;
  })
  console.log(username);//李四 
  

• findIndex
  • 查询数组成员的索引值，参数为一个函数，返回值为符合条件表达式的第一个成员的索引，没有就返回-1
  • 函数的第一个参数为数组成员 函数的第二个参数为数组成员的索引 第三个参数为数组本身

  var arr = ["张三", "李四", "王五", "赵六", "田七", "刘八"];
  var Index = arr.findIndex(function(value,index,self){
      return value.indexOf("四") != -1;
  })
  console.log(Index);//1
  

• copyWithin
  • 数组的内部复制，接收三个参数
  • 第一个参数为被替换位置 第二个参数为复制的起始位置 第三个参数为复制的结束位置(包含开始位置不包括结束位置)

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  arr.copyWithin(1,3,7);
  console.log(arr);// [1, 4, 5, 6, 7, 6, 7, 8]