浅谈数组

时间:2019-09-30
本文章向大家介绍浅谈数组,主要包括浅谈数组使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

数组

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

    数组的概念和作用

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

    数组的创建

  • 字面量
    • 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]

原文地址:https://www.cnblogs.com/tongmeng/p/11610023.html