数组方法总结

130 阅读7分钟

一.数组的概念

  • 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
  • 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
  • 简单来说:数组就是用于储存多个相同类型数据的集合。

二.数组中的方法

1.toString();

将数组转化为字符串

const arr = ["1","2","3","4"]
//toString()将数组变为字符串,不改变原有数组
const string = arr.toString();
console.log(arr);
//["1","2","3","4"]
console.log(string);
//1,2,3,4

2.join();

用特定的字符,将数组拼接形成字符串

var list = ["a","b","c","d"];
var result = list.join("-");
// a-b-c-d 
var result = list.join("/");
// a/b/c/d 
var result = list.join("");
// abcd
var result = list.join();
//a,b,c,d

3.join();

实现重复字符串

 function repeatStr(str, n) {
    return new Array(n + 1).join(str);
}
 console.log(repeatStr("嗨",3)); //嗨嗨嗨
 console.log(repeatStr("Hi",3)); //HiHiHi
 console.log(repeatStr(1,3));    //111
 

4. push();

在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组(添加多个元素用逗号隔开)

   var arr = [1, 2, "c"];var arr = [1, 2, "3"];
   var rel = arr.push("4","5");
   console.log(arr);//[1,2,"3","4","5"]
   console.log(rel); //  5  (数组长度)
   

5.pop();

删除数组的最后一位,并且返回删除的数据,会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)    

pop()删除最后一个元素,改变原来数组,返回被删除的元素
var arr = [12"3"];
var rel = arr.pop();
console.log(arr); // [1, 2]
console.log(rel); // 3

    

6.shift();

删除数组的第一位数据,并且返回新数组的长度,会改变原来的数组(该方法同pop();一样不接受参数,且每次只能删除数组的第一个,但是该方法和pop()返回值不同)

shift()删除第一个元素,改变原来数组,返回被删除的元素
var arr = [12"3"];
var rel = arr.shift();
console.log(arr);
//[2,"3"]
console.log(rel);
//1

   

7.unshift();

方法可向数组的开头添加一个或更多元素,并返回新的长度。   

// unshift()在首位添加一个元素, 改变原来数组,返回数组的长度
  var arr = ["1", "2", "3"];
  const arr2 = arr.unshift("zhihu");
   console.log(arr);
   //["zhihu","1","2","3"]
   console.log(arr2);
   //4

    

8.splice();

在数组中添加,或从数组中删除,或替换数组中的元素,然后返回被删除或者被替换的元素,可以实现数组的增改删;

 var arr = ["张三","李四","王五","小明","小红"];
 //删除王五
 var arrReplace1 = arr.splice(2,1);	
 console.log(arrReplace1);  // ["王五"] 
 console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)
 // 删除多个
 var arrReplace2 = arr.splice(1,2);	
 console.log(arrReplace2);  //  ["李四", "王五"] 
 console.log(arr);  // ["张三", "小明""小红"]
 //添加小刚
 var arrReplace3 = arr.splice(1,0,"小刚");
 console.log(arrReplace3);  // [] (没有删除元素,所以返回的是空数组)
 console.log(arr);  // ["张三", "小刚","李四","王五","小明", "小红"]
 //添加多个
 var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
 console.log(arrReplace4);  // []
 console.log(arr);  // ["张三", "李四","王五","刘一","陈二","赵六", "小明", "小红"]

9.reverse();

将数组的数据进行反转,并且返回反转后的数组,会改变原数组

var arr = [1, 2, 3, "a""b""c"];
var rel = arr.reverse();
console.log(arr);//    ["c","b","a","3","2","1",]
console.log(rel); //   ["c""b""a", 3, 2, 1]

 

10.sort();

方法用于对数组的元素进行排序,并返回数组,默认排序顺序是根据字符串Unicode码点

//sort()方法是最强大的数组方法之一
var arr1 = [101523];
arr1.sort();
console.log(arr1);//(5)[1,10,2,3,5]

结果并不是我们想要的排序结果,因为它是根据unicode编码来排序的,这也显示了其不稳定性。

语法: arr.sort(function(a,b)) 参数: function可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 具体用法:

  • 如果 function(a, b) {return: a - b;} ,=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)

  • 如果 function(a, b) {return: b - a;} ,=> b - a > 0 那么b会被排列到 a 之前; (从大到小排序)

那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:

   

    var arr = [10, 1, 5, 2, 3];
    arr.sort(function (ab) {
    return a - b;
      });
    console.log(arr);
    // 打印结果为:(5)[1,2,3,5,10]
    

元素为对象时(可按其中某个属性来排序):   

   var arr1 = [    { name: "懒洋洋", age: "7" },    { name: "美羊羊", age: "6" },    { name: "喜洋洋",age:"8"},    ];
     arr1.sort(function (ab) {
     return b.age - a.age;
        });
      console.log(arr1);

        打印结果为:

   edge Translation started
   (3[{…}, {…}, {…}]
   0: {name: '喜洋洋', age: '8'}
   1: {name: '懒洋洋', age: '7'}
   2: {name: '美羊羊', age: '6'}
   length: 3[[Prototype]]:      Array(0)

11.concat();

数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组, 如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中。 如果是其他类型, 直接放到新数组中, 另外,如果不给该方法任何参数,将返回一个和原数组一样的数组 。

   var arr1 = [123];
   var arr2 = ["a""b""c"];
   var arr3 = ["A""B""C"];
   var rel = arr1.concat(arr2, arr3);
   console.log(arr1); //原数组
   console.log(rel);//新数组

      打印结果:      

   (3[1, 2, 3]
   (9) [1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C']

   可以看到原数组 arr1() 并没有被改变,该方法不改变原数组,后续不改变原数组方法将不再打印原数组 

12.valueOf();

返回数组的原始值(一般情况下其实就是数组自身)

  var list = [1234];
  var rel = list.valueOf();
  console.log(list); // [1, 2, 3, 4]
  console.log(rel); // [1, 2, 3, 4]

13.indexOf();

 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

   var list = [1234]
   var index = list.indexOf(4); //3
   var index = list.indexOf("4"); //-1
   console.log(index);

   

14.Array.from();

功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组

注意: 将一个类数组对象转换为一个真正的数组,必须具备以下条件:

(1)、该 伪数组 / 类数组 对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

(2)、该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字

 var all = {
 0"熊二",
 1"2",
 2"男",
 3: ["蜂蜜""熊大""光头强"],
 length: 4,
      };
   var list = Array.from(all);
   console.log(all);
   console.log(list,Array.isArray(list));

   

打印结果:

   {0: '熊二', 1: '2', 2: '男', 3: Array(3), length: 4}
   (4['熊二', '2', '男', Array(3)]  true

15.lastIndexOf();

 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

      var list = [1234];
      var index = list.lastIndexOf(4); //3
      var index = list.lastIndexOf("4"); //-1
      console.log(index);

   

16.forEach();

遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.

参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;

数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

实例1:

    var list = [329377533887];
    var res = list.forEach(function (item, index, array) {
    console.log(item, index, array);
        });
    console.log(res);

打印结果:    

    32 0 (6[32, 93, 77, 53, 38, 87]
    93 1 (6[32, 93, 77, 53, 38, 87]
    77 2 (6[32, 93, 77, 53, 38, 87]
    53 3 (6[32, 93, 77, 53, 38, 87]
    38 4 (6[32, 93, 77, 53, 38, 87]
    87 5 (6[32, 93, 77, 53, 38, 87]
    
    

实例二:数组中元素的和:

     var list = [329377533887];
     var sum = 0;
     list.forEach(function (item) {
     console.log(item);
          sum += item;
             });
     console.log(sum);

  打印结果:

        32
        93
        77
        53
        38
        87
        380  
    
    

17.includes();

功能: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

      let site = ['runoob''google''taobao'];
      site.includes('runoob'); 
      // true 
      site.includes('baidu');
      // false

 

以上就是数组常用方法有哪些的详细内容。