提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

盘点JavaScript哪些常用的数组对象

JavaScript 数组 代码
2023-04-18 14:44:37 时间

回顾

上一篇中我们盘点了 js 哪些最常用的内置对象，对Math、random以及Date对象进行了详细的讲解，这三个对象在往后的工作中也是发挥着举足轻重的位置，都是非常常用的对象，可以自己在编辑器中多加练习

这篇中我们对 js 中的数组对象进行说明，同样数组对象中也包含了非常多的元素方法，对数组的处理也扮演很重要的角色。

数组对象（Array）

在前端中数组和字符串是处理信息最常用的两种方式，所以对于数组和字符串的内置方法也需要烂熟于心。

创建数组的两种方式

  • 利用数组字面量
  • 利用 new Array() 
// 创建数组的两种方式
// 1、利用数组字面量创建
var arr = [1, 2, 3]
console.log(arr[0]);

// 2、利用 new Array()
var arr2 = new Array(1, 2, 3)
console.log(arr2);
复制代码

检测是否为数组

  • instancof 运算符 它可以用来检测是否为数组
  • Array.isArray(参数) H5方法，ie9以上支持 
// 检测是否为数组

var arr = new Array(1, 2, 3)
var arr2 = new Object(1, 2, 3);

// 1、使用 instanceof 检测
console.log(arr instanceof Array);  // true
console.log(arr2 instanceof Array);  // false

// 2、使用 isArray 检测
console.log(Array.isArray(arr))  // true
console.log(Array.isArray(arr2)) // false
复制代码

添加删除数组元素的方法

push() 在数组的末尾 添加一个或多个数组元素

  1. push是可以在数组末尾追加新的元素
  2. push() 参数可以直接写数组元素就可以
  3. push完毕之后 返回的结果是新数组长度
  4. 原数组也会发生变化 
// 1、push() 在我们数组的末尾，添加一个或者多个数组元素  push  推
var arr = [1, 2, 3]
var arr2 = arr.push(4, 'blue')
console.log(arr)  // 1, 2, 3, 4, 'blue'
console.log(arr2) // 5 数组长度
复制代码

unshift() 在数组的开头添加一个或多个数组元素

  1. unshift 是可以给数组前面追加新的元素
  2. unshift() 参数直接写数组元素就可以了
  3. unshift完毕之后，返回的结果是新数组的长度
  4. 原数组也会发生变化 
// 2、unshift() 在我们数组最前面 添加一个或者多个数组元素
arr.unshift(0)
console.log(arr) // 0, 1, 2, 3, 4, 'blue'
复制代码

pop() 删除数组中末尾的一个元素，后面不跟参数

  1. pop是删除数组的最后一个元素，一次只能删除一个
  2. pop() 没有参数
  3. pop完毕之后，返回的结果是删除的那个元素
  4. 原数组也会发生变化 
// 3、pop() 它可以删除数组的最后一个元素
arr.pop()
console.log(arr);  // 1, 2, 3, 4  没有blue
复制代码

shift() 删除数组中开头的元素，后面不跟参数

  1. shift 是以可删除数组的第一个元素，记住一次只能删除一个元素
  2. shift() 没有参数
  3. shift() 完毕之后，返回的结果是删除的那个元素
  4. 原数组也会发生变化 
// 4、shift() 它可以删除最前面数组元素
arr.shift()
console.log(arr);  // 1, 2, 3, 4
复制代码

完整代码片段

<script>
// 1、添加删除数组元素方法

// 1、push() 在我们数组的末尾，添加一个或者多个数组元素  push  推
var arr = [1, 2, 3]
var arr2 = arr.push(4, 'blue')
console.log(arr)  // 1, 2, 3, 4, 'blue'
console.log(arr2) // 5

// 2、unshift() 在我们数组最前面 添加一个或者多个数组元素
arr.unshift(0)
console.log(arr) // 0, 1, 2, 3, 4, 'blue'

// 3、pop() 它可以删除数组的最后一个元素
arr.pop()
console.log(arr);  // 1, 2, 3, 4  没有blue

// 4、shift() 它可以删除最前面数组元素
arr.shift()
console.log(arr);  // 1, 2, 3, 4
</script>
复制代码

数组排序

除了上述这些数组中添加或者删除元素之后，数组对象中还内置了更为好玩的方法。例如 排序、反转等方法。

reverse() 反转数组中元素的顺序，无参数

// 1、翻转数组 reverse
var arr = ['张飞', '赵云', '黄忠']
arr.reverse()
console.log(arr)
复制代码

sort() 对数组的元素进行排序（仅支持个位数）

// 1、数组排序 sort
var arr2 = [5, 4, 3, 2, 1]
arr2.sort()
console.log(arr2)
复制代码

sort() 解决方案，支持十位等多位

// 对数组的多位进行排序
var arr3 = [111, 22, 33, 44]
arr3.sort(function (a, b) {
  // console.log('111', a)
  // console.log('222', b)
  return a-b
})
console.log(arr3);
复制代码

这个就对 sort() 方法进行了进一步的拓展，支持了多位数组用 sort() 方法进行排序

对于很多初次学前端的朋友肯定会问，为什么这些数组或者字符串方法中内置了排序的方法我们还需要冒泡排序或者学别的排序。因为随着业务中的数据量越来越大，常规方法这些内置的排序方法对于性能不便的，伴随数据越来越多可能需要几秒才能排序出来，所以对于用户来说体验就非常不好，所以才会有快排冒泡这些排序算法降低性能负荷。

数组索引方法

indexof() 数组中查找给定元素的第一个索引

lastindexOf() 返回数组中的元素（从后往前）

// 获取数组索引的方法
// 返回数组元素索引号方法 indexOf，如果没有的话 返回 -1
var arr = ['red', 'green', 'yellow', 'blue']
console.log(arr.indexOf('red'));  // 0
console.log(arr.indexOf('blue'));  // 3
console.log(arr.indexOf('orange')); // -1

// 返回数组元素索引（从后往前查找，索引号是不变的） lastIndexOf
console.log(arr.lastIndexOf('green'))
复制代码

注意：只返回第一个满足索引的元素，如果找不到元素就返回 -1

数组转换为字符串

toString() 把数组转换成字符串，逗号分隔每一项

// 1、toString() 将我们的字符转换字符串
var arr = [1, 2, 3]
console.log(arr.toString());  // 1, 2, 3
复制代码

join('分隔符') 方法用于把数组中的所有元素转换为一个字符串

// 2、join(分隔符)  将数组转换字符串并且更换分隔符
var arr1 = ['green', 'blue', 'pink']
console.log(arr1.join('|')) 
复制代码

concat() 链接两个或多个数组，不影响原数组

// 3、concat()  链接两个或多个数组，不影响原数组 - 返回一个新数组
var array1 = [1, 2, 3]
var array2 = [4, 5, 6]
console.log(array1.concat(array2));
复制代码

slice() 数组截取slice(begin, end)

// 4、slice()   数组截取 - 返回被截取的新数组
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
console.log(fruits.slice(1, 3));
复制代码

splice() 数组删除splice(第几个开始，要删除的个数)

// 5、splice()  数组删除 splice（第几个开始，要删除个数） - 返回被删除项目的原数组，注意：这个会影响原数组
var months = ['Jan', 'March', 'April', 'June'];
// months.splice(1, 0, 'Feb')
months.splice(0, 2)
console.log(months);
复制代码

全部代码片段

// 数组转换字符串
// 1、toString() 将我们的字符转换字符串
var arr = [1, 2, 3]
console.log(arr.toString());  // 1, 2, 3

// 2、join(分隔符)  将数组转换字符串并且更换分隔符
var arr1 = ['green', 'blue', 'pink']
console.log(arr1.join('|')) 

// 3、concat()  链接两个或多个数组，不影响原数组 - 返回一个新数组
var array1 = [1, 2, 3]
var array2 = [4, 5, 6]
console.log(array1.concat(array2));

// 4、slice()   数组截取 - 返回被截取的新数组
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
console.log(fruits.slice(1, 3));

// 5、splice()  数组删除 splice（第几个开始，要删除个数） - 返回被删除项目的原数组，注意：这个会影响原数组
var months = ['Jan', 'March', 'April', 'June'];
// months.splice(1, 0, 'Feb')
months.splice(0, 2)
console.log(months);
复制代码

好了，今天对于数组的处理方法就这些了。有什么问题欢迎随时留言，共勉！

相关文章