首页技术文章正文

JavaScript数组的常用方法

更新时间:2022-03-25 来源:黑马程序员 浏览量:

数组是JavaScript中最常用的数据类型之一,为此Array对象中提供了许多内置方法,如栈方法、检索方法、数组转字符串的方法等。本节将针对数组的常用方法进行详细讲解。

栈方法

JavaScript中,除了前面讲解的添加与删除数组元素的方式外,还可以利用Array对象提供的栈方法实现在数组的末尾或开头添加数组的新元素,也称为入栈;在数组的末尾或开头删除数组元素,也称为出栈。具体如表3-1所示。
1648198585080_101.png

表3-1中需要注意的是,push()和unshift()方法的返回值是新数组的长度,而pop()和shift()方法返回的是移出的数组元素。

为了更好地理解数组元素栈方法的使用,接下来通过案例3-6进行演示。【例3-6】demo06.html

<script>
  var arr = ['Rose', 'Lily'];
  console.log('原数组:' + arr);
  var last = arr.pop();
  console.log('在末尾移出元素:' + last + ' -移出后数组:' + arr);
  var len = arr.push('Tulip', 'Jasmine');
  console.log('在末尾添加元素后长度变为:' + len + ' -添加后数组:' + arr);
  var first = arr.shift();
  console.log('在开头移出元素:' + first+ ' -移出后数组:' + arr);
  len = arr.unshift('Balsam', 'sunflower');
  console.log('在开头添加元素后长度变为:' + len + ' -添加后数组:' + arr);
</script>

从上述代码可以看出,push()和unshift()方法可以为指定数组在末尾或开头添加一个或多个元素,而pop()和shift()方法则只能移出并返回指定数组在末尾或开头的一个元素。输出结果如图3-12所示。

1.检索方法

在开发中,若要检测给定的值是否是数组,或是查找指定的元素在数组中的位置,则可以利用Array对象提供的检索方法,具体如表3-2所示。

1648198917666_103.png

表3-2中除了Array.isArray()方法外,其余方法默认都是从指定数组索引的位置开始检索,并且检索方式与运算符“===”相同,即只有全等时才会返回比较成功的结果。为了初学者更好的理解这些方法的使用,下面通过代码和案例进行演示。

(1)includes()和Array.isArray()方法

var data = ['peach', 'pear', 26, '26','grape'];
// 从数组下标为3的位置开始检索数字26
console.log(data.includes(26,3));     // 输出结果:false
// 从数组下标为data.length -3 的位置查找数字26
console.log(data.includes(26, -3));     // 输出结果:true
// 判断变量data是否为数组
console.log(Array.isArray(data));     // 输出结果:true

在上述代码中,includes()方法在使用时,第1个参数表示待查找的值,第2个参数用于指定在数组中查找的索引下标,当其值大于数组长度时,数组不会被检索,直接返回false;若将下标设置为小于0的数时,则检索的下标位置等于数组长度加上指定的负数,若结果仍是小于0的数,则检索整个数组。

(2)indexOf()方法

indexOf()用于在数组中从指定下标位置,检索到的第一个给定值,存在则返回对应的元素下标,否则返回-1。下面以判断一个元素是否在指定数组中,若不在则更新数组为例进行讲解。如例3-7所示。【例3-7】demo07.html

<script>
    var arr = ['potato', 'tomato', 'chillies', 'green-pepper'];
 var search = 'cucumber';
 if (arr.indexOf(search) === -1) { // 查找的元素不存在
    arr.push(search);
    console.log('更新后的数组为: ' + arr);
 } else if (arr.indexOf(search) > -1) { // 防止返回的下标为0,if判断为false
    console.log(search + '元素已在arr数组中。');
    } 
</script>

上述第2行代码用于创建待检索的数组arr,第3行利用search变量保存需要检索的值,第4~9行代码用于检索arr数组中是否含有search元素,若没有则执行第5~6行代码,在arr数组末尾添加该元素,效果如图3-13左侧所示;若有则执行第8行代码,在控制台输出对应的提示信息,如将search的值设置为tomato时,效果如图3-13右侧所示。

1648198398417_104.png

图3-13indexOf()方法示例

值得一提的是,indexOf()方法的第2个参数用于指定开始查找的下标,当其值大于或等于数组长度时,程序不会在数组中查找,直接返回-1;当其值为负数时,查找的下标位置等于数组长度加上指定的负数,若结果仍是小于0的数,则检索整个数组。

(3)lastIndexOf()方法

Array对象提供的lastIndexOf()方法,用于在数组中从指定下标位置检索到的最后一个给定值的下标。与indexOf()检索方式不同的是,lastIndexOf()方法默认逆向检索,即从数组的末尾向数组的开头检索。接下来以找出指定元素出现的所有位置为例进行讲解。如例3-8所示。【例3-8】demo08.html

<script>
  var res = [];
  var arr = ['a', 'b', 'a', 'c', 'a', 'd'];// 待检索的数组
  var search= 'a';// 要查找的数组元素
  var i = arr.lastIndexOf(search);
  while (i !==-1) {
  res.push(i);
  i = (i > 0 ? arr.lastIndexOf(search, i -1): -1);
}
  console.log('元素' + search + ' 在数组中的所有位置为:' + res);
</script>

上述第2行初始化的res变量,用于保存指定元素出现的所有索引下标。第5行用于获取arr数组中search变量最后一次出现的位置,第6~9行通过循环获取search变量出现的所有位置。其中,第7行用于从res数组的末尾添加找到的元素下标,第8行通过判断当前的下标是否大于0,确定arr中是否还有元素,若结果为true,则下标值i减1,继续从指定位置向前检索变量search的值最后一次出现的下标,直到检索完数组,将i设置为-1结束循环。输出结果如图3-14所示。

1648198386184_105.png

图3-14lastIndexOf()方法的示例

值得一提的是,lastIndexOf()方法的第2个参数用于指定查找的下标,且由于其采用逆向的方式检索,因此当其值大于或等于数组长度时,则整个数组都会被查找。当其值为负数时,则索引位置等于数组长度加上给定的负数,若其值仍为负数,则直接返回-1。

2.数组转字符串

在项目开发中,若需要将数组转换为字符串,则可以利用JavaScript提供的join()和toString()方法实现。具体如表3-3所示。

表3-3数组转字符串

1648198371452_107.png

为了让大家更加清楚的了解数组转字符串的使用,下面通过示例的方式演示。

console.log(['a','b','c'].join());    // 输出结果:a,b,c
console.log([[4,5],[1,2]].join('-')); // 输出结果:4,5-1,2
console.log(['a','b','c'].toString());// 输出结果:a,b,c
console.log([[4,5],[1,2]].toString());// 输出结果:4,5,1,2

从上述代码可知,join()和toString()方法可将多维数组转为字符串,默认情况下使用逗号连接。不同的是,join()方法可以指定连接数组元素的符号。另外,当数组元素为undefined、null或空数组时,对应的元素会被转换为空字符串。

3.其他方法

除了前面讲解的几种常用方法外,JavaScript还提供了很多其他常用的数组方法。例如,合并数组、数组浅拷贝、颠倒数组元素的顺序等。具体如表3-4所示。

表3-4其他方法

1648198344127_其他方法.jpg

表3-4中的slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会原数组产生影响。

接下来,以splice()方法为例演示如何在指定位置添加或删除数组元素。如例3-9所示。

【例3-9】demo09.html

<script>
    var arr = ['sky', 'wind', 'snow', 'sun'];
// 从数组下标2的位置开始,删除2个元素4arr.splice(2, 2);5console.log(arr);
// 从数组下标1的位置开始,删除1个元素后,再添加snow元素
arr.splice(1, 1, 'snow');
console.log(arr);
// 指定下标4大于数组的长度,则直接在数组末尾添加hail和sun元素
arr.splice(4, 0, 'hail', 'sun');
console.log(arr);
// 从数组下标3的位置开始,添加数组、null、undefined和空数组
arr.splice(3, 0, ['lala', 'yaya'], null, undefined, []);
console.log(arr);
</script>

在上述代码中,splice()方法的第1个参数用于指定添加或删除的下标位置;第2个参数用于从指定下标位置开始,删除数组元素的个数,将其设置为0,则表示该方法只添加元素。剩余的参数表示要添加的数组元素,若省略则表示删除元素。效果如图3-15所示。

1648198298217_108.png

图3-15splice()方法添加或删除数组元素

值得一提的是,splice()方法的第1个参数的值等于或大于数组长度时,从数组末尾开始操作;当该值为负数时,则下标位置等于数组长度加上指定的负数,若其值仍为负数,则从数组的开头开始操作。


分享到:
在线咨询 我要报名