js基础——js中数组方法总结篇

目录

数组的属性和方法

属性： length属性：获取数组的长度。

方法：

1、改变原数组的方法（！important）

2、不改变原数组的方法 

3、数组的位置方法

4、数组的迭代方法

---

---

数组的属性和方法

属性：
 length属性：获取数组的长度。

 var arr=["apple","red",12345,true,789];
 console.log(arr.length);//数组长度为5

方法：

1、改变原数组的方法（！important）

①push()   向数组中添加数组元素到数组最后，然后返回当前数组的长度（可以添加一个或多个）

②pop()    删除数组最后一个元素（每次只能删除一个），并返回删除的数据

这里我们可以发现，①②方法如果在一起用，就能实现类似于栈的数据结构。这在《JavaScript高级程序设计》这本书中也有讲解。

③unshift()  向数组头部添加数据,可以是单个元素也可以是数组，然后返回当前数组的长度

④shift()   删除数组第一个元素,每次只能删除一个，返回被删除的元素

有了前面实现栈操作的想法，这里我们看到shift()   删除数组第一元素，也能想到，将它和①push()方法搭配就能实现另一种数据结构---队列("first-in-first-out-先进先出"）的数据结构。课本讲解如下：

 var arr=["apple","red",12345,true,789];
 console.log(arr.length);//输出数组长度：结果 7
 arr.push("banana","yellow");//向数组中添加数组元素到数组最后，然后返回当前数组的长度
 console.log(arr);//结果：["apple", "red", 12345, true, 789, "banana", "yellow"]
 arr.pop();// 删除数组最后一个元素，每次只能删除一个
 console.log(arr);//["apple", "red", 12345, true, 789, "banana"]
 arr.unshift(['a','b','c']);
 arr.unshift("fruits");// 向数组头部添加数据,可以是单个元素也可以是数组，然后返回当前数组的长度
 console.log(arr);//结果：["fruits", Array(3), "apple", "red", 12345, true, 789, "banana"]
 arr.shift();//删除数组第一个元素,每次只能删除一个
 console.log(arr);//结果： [Array(3), "apple", "red", 12345, true, 789, "banana"]

⑤reverse()    对数组进行倒序处理（会修改原数组）

 var arr1=["apple","red",80,true];
 var arr2 = arr1.reverse();
 console.log(arr2);//结果：[true, 80, "red", "apple"]

⑥sort() 排序

    //sort排序
    var arr=[1,13,2,7,3,9,0];
    arr.sort();//默认按照字符串排序的
    console.log(arr);//[0,1,13,2,3,7,9]

应用一：sort自定义排序（冒泡排序）

    // 改变排序方式
    // 1.必须有两个形参(a,b)
    // 2.看返回值，返回值为负，前面的数放在前面；为正时，后面的数在前面；为0不动
    var arr=[1,13,2,7,3,9,0];
    arr.sort(function(a,b){//每次传两个值
         return a-b; //升序 前面和后面比较，生出正负值
        //return b-a; //降序
    });
    console.log(arr); // [0, 1, 2, 3, 7, 9, 13]

 应用二：用sort给一个有序数组乱序

   // 知识点：Math.random()//返回[0,1)开区间数,包括0不包括一
    var arr=[1,2,3,4,5,6];
    arr.sort(function(){
        return Math.random()-0.5;
    });
    console.log(arr);//随机排序

例子：定义三个对象，每个对象有姓名，年龄，性别属性，实现按属性值排序。

                 根据年龄排序，根据姓名长度排序，根据姓名字节长度排序。

    var person1={
        name:"mynameisshort",
        age:18,
        sex:"male",
    }
    var person2={
        name:"我的名字最长yeah",
        age:28,
        sex:"female"
    }
    var person3={
        name:"我的名字还好",
        age:38,
        sex:"male"
    }
    var arr=[person1,person2,person3];
    //计算字节函数
    function nameBytes(str){
        var num=str.length;
        for(var i=0;i<str.length;i++){
            if(str.charCodeAt(i)>255){
                num++;
            }
        }
        return num;
    }
    //排序
    arr.sort(function(a,b){
        // return a.age-b.age;//按年龄升序
        // return a.name.length-b.name.length;//按姓名字符串长度排序
        // return nameBytes(a.name)-nameBytes(b.name);//按姓名字符串字节长度排序
    })
    console.log(arr);

⑦splice()   删除、修改或向数组中添加数据。

• 删除数据：第一个参数是从什么位置开始，第二个参数是删除多少个元素

  var arr1 = [1,2,3,4];
  console.log(arr1);

  var arr2 = arr1.splice(1,2);//从下标为1的位置开始删除，删除2个元素
  console.log(arr1) // [1,4] 
  console.log(arr2) // [2,3]  返回被删除的元素

• 修改数据：第一位是从什么位置开始，第二位是需要替换多少位，第三位开始是替换成的新的内容

  var arr2 = arr1.splice(1,2,'aa');//从下标为1的地方开始，将之后的2个元素修改为 'aa'
  console.log(arr1) // [1, "aa", 4]

  var arr2 = arr1.splice(1,2,'aa','bb','cc');
  //从下标为1的地方开始将之后的2个元素修改为 'aa','bb','cc'
  console.log(arr1) // [1, "aa", "bb", "cc", 4]

• 添加数据：综合了删除数据和修改数据，三个参数分别是，第一位是从什么位置开始（0代表从头部开始，arr.length代表从尾部开始），第二位参数改为0，表示不替换，第三位开始是要添加的内容。

  var arr2 = arr1.splice(1,0,'aa');
  console.log(arr1) // [1, "aa", 2, 3, 4]

  var arr2 = arr1.splice(1,0,'aa','bb','cc'); // 除了头部和尾部的添加
  console.log(arr1) // [1, "aa", "bb", "cc", 2, 3, 4]

  var arr2 = arr1.splice(0,0,'aa','bb','cc'); // 头部添加
  console.log(arr1) // ["aa", "bb", "cc", 1, 2, 3, 4]

  var arr2 = arr1.splice(arr2.length,0,'aa','bb','cc'); // 尾部添加
  console.log(arr1) // [1, 2, 3, 4, "aa", "bb", "cc"]

 ⑧清空数组：

• arr=[];
• arr.length=0;
• splice(0,arr.length)

2、不改变原数组的方法 

①concat()   将两个或多个数组组合成一个数组。

var arr1=["apple","red",80,true];
var arr2=["banana","yellow",100,false];
var arr3=["melon","green",800,true];
var arr4 = arr3.concat(arr2, arr1);//arr3连接arr2和arr1
console.log(arr4)
//结果：["melon", "green", 800, true, "banana", "yellow", 100, false, "apple", "red", 80, true]

数组连接也可以用数组解构扩展符来实现，同样不会修改原有数组

      var arr1=["apple","red",80,true];
      var arr2=["banana","yellow",100,false];
      var res=[...arr1,...arr2]
      console.log(res)//(8) ["apple", "red", 80, true, "banana", "yellow", 100, false]

②slice(m,n) 截取数组 从m位开始截取,截取到n位，负数表示倒数第几位（包含开始的m，不包含结束的n）

  var arr1 = [1,2,3,4];
  console.log(arr1);
  var arr2=arr1.slice(0,2);//从第0位开始截取到第2位，负数表示倒数第几位
  console.log(arr2);

③ join()    将数组转换为字符串（可以在括号里指定连接符号，例如join("-"）如果没有指定参数，默认调用toString()方法

逆方法<——>split()字符串方法，spilt() 将字符串拆分成数组，与join()可逆

  var arr1 = [1,2,3,4];
  console.log(arr1);
  console.log(typeof arr1);// object
  var str = arr1.join();//连接
  console.log(str);//1,2,3,4
  console.log(typeof str);// string
  var str = arr1.join('-');//可以在括号里指定连接方式，用-连接
  console.log(str);//1-2-3-4
  var str = arr1.join('');/空字符串连接
  console.log(str);//1234

split() 将字符串拆分成数组，与join可逆

    var arr1 = [1,2,3,4];
    var str = arr1.join('-');//可以在括号里指定连接方式，用"-"连接
    console.log(str);//1-2-3-4
    var arr2=str.split("-");//让截取符消失
    console.log(arr2);//["1", "2", "3", "4"]

join方法应用

//题目：拼接下列企业名称字符串
    var str1="alibaba";
    var str2="tencent";
    var str3="toutiao";
    var str4="wangyi";
    var str5="meituan";

//方法一：使用循环连接（不建议）
//理由：字符串：栈中存储，使用for循环拼接，特点："first in last out" (频繁拿出，内存占用过多，不建议)

//方法二：join()方法
    var arr=[str1,str2,str3,str4,str5];
    // 数组：散列结构，在堆中，效率高，占用内存小
    var str=arr.join(" ");//传空字符串,省略连接符;不传，默认按","连接;这里用空格作为连接符
    console.log(str);//alibaba tencent toutiao wangyi meituan

3、数组的位置方法

 

数组类型有两个位置方法：indexOf和lastIndexOf。这两个方法都接收两个参数，要查找的项和（可选的）表示查找起点位置的索引。 indexOf 方法从数组开头（位置0）开始向后查找，lastIndexOf 方法则是从数组末尾向前查找。

下面是参数的详细信息：

•     searchValue : 一个字符串，表示要搜索的值
•     fromIndex : 在调用字符串内的位置，从开始搜索。它是介于0-字符串的长度任意整数。缺省值是0。

返回值:

这两个方法都返回要查找的项在数组中的位置,找到了就会停止查找,或者在没找到的情况下返回 -1。在比较第一个参数与数组中的每一项时，使用全等操作符（===）。

直白一点的理解就是：

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，是正向查询。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，是逆向查询。

这里有一个问题：

indexOf与lastIndexOf的区别仅仅在于顺序的问题，一个是从前往后查询该项第一次出现的位置，一个是从后往前查找该项第一次出现的位置。但这个位置是指的在原数组中的位置,不以方向为改变的。也就是当indexOf的参数只出现一次时,lastIndexOf与indexOf是一样的。

数组中没有重复值时，

  var arr=[11,22,33,44,55,66];
  console.log(arr.indexOf(11));//0
  console.log(arr.indexOf(44));//3
  console.log(arr.lastIndexOf(11));//0
  console.log(arr.lastIndexOf(44));//3

数组中存在重复值时， 

  var arr1=[11,22,33,11,44,55,44,66];
  console.log(arr1.indexOf(11));//0
  console.log(arr1.indexOf(44));//4
  console.log(arr1.lastIndexOf(11));//3
  console.log(arr1.lastIndexOf(44));//6

利用这一点也可以判断重复数组。原理：indexOf()和lastIndexOf()所返回的index不一致则说明有重复值

function isRepeat(array,val){
    if (!Array.isArray(array)) return false;
    if(array.indexOf(val)===array.lastIndexOf(val)){
        return false;
    }
    return true;
}

4、数组的迭代方法

具体例子：

var arr=[1,0,3,2,6,0.5];
//筛选数组中>2的元素
var filterResult=arr.filter(function(item,index,array){return (item>2);});
console.log(filterResult);//[3, 6]

//对数组元素进行-2处理并输出处理后的新数组
var mapResult=arr.map(function(item,index,array){return (item-2);});
console.log(mapResult);// [-1, -2, 1, 0, 4, -1.5]

//判断数组中是否每一项都>2 ,如果成立，返回true，不成立，返回false
var everyResult=arr.every(function(item,index,array){return (item>2);});
console.log(everyResult);//false

//判断数组中是否存在有一项>2 ,如果成立，返回true，不成立，返回false
var someResult=arr.some(function(item,index,array){return (item>2);});
console.log(someResult);//false

//遍历数组
 var forEachResult=arr.forEach(function(item,index,array){console.log(index,array);})
 console.log(forEachResult);

 结果：