JavaScript数组方法

叶子yes

已于 2022-08-20 11:38:28 修改

阅读量810

点赞数 2

分类专栏：前端 JavaScript 文章标签： javascript 前端开发语言

于 2022-08-13 22:15:20 首次发布

本文链接：https://blog.csdn.net/lq313131/article/details/126315166

版权

前端同时被 2 个专栏收录

63 篇文章 7 订阅

订阅专栏

JavaScript

34 篇文章 0 订阅

订阅专栏

一、数组的创建

js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。

1、字面量创建数组

var a = "yezi"
// 可以接收任何类型的数据当做数组的元素
var arr = [a, 18, true, "叶子yes", {name: "张三"}, function () {}, [1,2], null];
// 获取数组的长度
console.log(arr.length);// 8

2、构造函数创建数组

var arr = new Array();   // 等价于 var names = [];

括号中可以添加参数，不同类型参数有不同含义：
1、如果只有一个参数，并且是number类型的整数，则代表的是数组的长度；
2、如果是只有一个number类型的小数，则报错；
3、其他情况，则当做数组元素放进去。

//1、如果只有一个参数，并且是number类型的整数，则代表的是数组的长度。
var arr = new Array(3)
console.log(arr.length) // 3

//2、如果是只有一个number类型的小数，则报错。
var arr = new Array(3.2) //报错

//3、其他情况，则当做数组元素放进去。
var arr = new Array(3.2,1.3)
console.log(arr) //[ 3.2, 1.3 ]
var arr1 = new Array('hello')
console.log(arr1); //[ 'hello' ]

二、数组的访问

通过 数组名 [ 索引值 ] 的方式访问数组元素，数组的索引值从0开始

//1、如果索引值小于数组的长度，返回对应项的值
var arr = ['zhangsan', 'lisi', 'wangwu', 'yezi'];
arr[0] ;  //访问数组中第一个元素,返回值为zhangsan

//2、如果索引值大于等于数组的长度，返回undefined
arr[4]; //返回undefined

//3、如果给索引值大于等于数组的长度的位置设置了值，数组自动增加到该索引值加1的长度
arr[10] = 'hello'
console.log(arr); //[ 'zhangsan', 'lisi', 'wangwu', 'yezi', <6 empty items>, 'hello' ]
console.log(arr.length); //11

//4、如果给索引值小于数组的长度的位置设置了值，则是修改数组元素对应位置的值
arr[2] = 18
console.log(arr); //[ 'zhangsan', 'lisi', 18, 'yezi', <6 empty items>, 'hello' ]

//5、通过 数组名[数组名.length-1] 访问数组最后一个元素
console.log(arr[arr.length-1]); // hello

//6、开辟新空间
arr.length = 20
console.log(arr); //[ 'zhangsan','lisi', 18,'yezi', <6 empty items>,'hello', <9 empty items>] 

//7、数组元素删除
arr.length = 3
console.log(arr); //[ 'zhangsan', 'lisi', 18 ]

三、数组序列化

toString()

在默认情况下都会以逗号分隔字符串的形式返回数组项

var arr = ['zhangsan', 'lisi', 'wangwu', 'yezi'];
console.log(arr.toString()); //zhangsan,lisi,wangwu,yezi

join()

使用指定的字符串用来分隔数组字符串

var arr = ['zhangsan', 'lisi', 'wangwu', 'yezi'];
//不写参数，默认以逗号分隔
console.log(arr.join()); //zhangsan,lisi,wangwu,yezi
//指定分隔符
console.log(arr.join('')); //zhangsanlisiwangwuyezi
console.log(arr.join(' ')); //zhangsan lisi wangwu yezi
console.log(arr.join('-')); //zhangsan-lisi-wangwu-yezi
console.log(arr.join('6')); //zhangsan6lisi6wangwu6yezi

此外，数组也可以使用序列化工具进行转换，并且，数组也存在深拷贝浅拷贝的现象，也可以使用序列化工具解决此问题

var arr = [23, 56, 11, 18];
var arrStr = JSON.stringify(arr)
console.log(arrStr, typeof arrStr); //'[23,56,11,18]' string
console.log(JSON.parse(arrStr)); //[ 23, 56, 11, 18 ]

四、构造函数的方法

Array.isArray()

用来判断某个变量是否是一个数组对象

var a = 'hello'
var b = [1,2]
console.log(Array.isArray(a)); //false
console.log(Array.isArray(b)); //true

function foo(){
  console.log(Array.isArray(arguments)); //false, arguments是一个类数组对象，不是数组
}
foo()

Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例
（类数组对象、字符串、数组都属于可迭代对象，可以用 for…of 遍历）

var arr = Array.from('hello yezi')
console.log(arr);//['h', 'e', 'l', 'l', 'o', ' ', 'y', 'e', 'z', 'i']

function foo(){
  var arr = Array.from(arguments)
  console.log(arr); //[ 1, 2, 3, 4 ]
}
foo(1,2,3,4)

Array.of()

根据一组参数来创建新的数组实例，支持任意的参数数量和类型

console.log(Array.of(1,2)); //[1, 2]
console.log(Array.of()); //[]
console.log(Array.of('hello',1)); //[ 'hello', 1 ]

五、栈与队列方法

Array.prototype.push()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的数组长度。

此方法改变原数组。

var arr = [1, 2, 3, 4, 5]
console.log(arr.push(6, 7, 'hello')); //8 ,返回了新数组长度
console.log(arr); //[ 1, 2, 3, 4, 5, 6, 7, 'hello' ] ,原数组被改变

Array.prototype.pop()

pop() 方法用于删除数组的最后一个元素，并返回删除的元素。

此方法改变原数组。

var arr = [1, 2, 3, 4, 5]
console.log(arr.pop()); // 5
console.log(arr); // [ 1, 2, 3, 4 ]

Array.prototype.shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

此方法改变原数组。

var arr = [1, 2, 3, 4, 5]
console.log(arr.shift()); // 1
console.log(arr); // [ 2, 3, 4, 5 ]

Array.prototype.unshift()

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

此方法改变原数组。

var arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(7,8)); // 7
console.log(arr); // [7, 8, 1, 2, 3, 4, 5]

六、排序方法

Array.prototype.reverse()

reverse() 方法用于颠倒数组中元素的顺序，返回颠倒后的数组。

此方法改变原数组。

var arr = [1, 2, 3, 4, 5]
console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]
console.log(arr); // [ 5, 4, 3, 2, 1 ]

Array.prototype.sort()

sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按字母顺序（Ascall编码）对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果要想进行升序或是降序排序的话，要提供比较函数。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

此方法改变原数组。

var arr1 = ['zhangsan', 'lisi', 'wangwu', 'yezi', 'hello']
var arr2 = [10, 23, 1, 18, 20, 100]

//默认按照Ascall编码进行排序
console.log(arr1.sort()); //[ 'hello', 'lisi', 'wangwu', 'yezi', 'zhangsan' ]
console.log(arr1); //[ 'hello', 'lisi', 'wangwu', 'yezi', 'zhangsan' ]
console.log(arr2.sort()); //[ 1, 10, 100, 18, 20, 23 ]
console.log(arr2); //[ 1, 10, 100, 18, 20, 23 ]

上述例子，并没有实现升序或者降序，下面在 sort 函数中添加比较函数实现升序和降序：

语法：

array.sort(function(a, b){})

传入a和b两个参数进行比较，若函数返回值大于0 则交换 a 和 b 的位置，小于0 则不交换a 和 b 的顺序，等于0 则顺序不变。（可以类比冒泡排序，两两进行比较）

接下来，我们简单写一下这个比较函数：

var arr = [10, 23, 1, 18, 20, 100]

// 升序
arr.sort(function(a, b){
  if(a > b){
    return 1  //返回的是正数即可
  }else{
    return -1  //返回的是负数即可
  }
})
console.log(arr); //[ 1, 10, 18, 20, 23, 100 ]

// 降序
arr.sort(function(a, b){
  if(a > b){
    return -1
  }else{
    return 1
  }
})
console.log(arr); //[ 100, 23, 20, 18, 10, 1 ]

我们可以对上面的代码优化一下：

var arr = [10, 23, 1, 18, 20, 100]

// 升序
arr.sort(function(a, b){
  return a - b
})
console.log(arr); //[ 1, 10, 18, 20, 23, 100 ]

// 降序
arr.sort(function(a, b){
  return b - a
})
console.log(arr); //[ 100, 23, 20, 18, 10, 1 ]

总结：

升序使用：

array.sort(function(a, b){
  return a - b
})

降序使用：

array.sort(function(a, b){
  return b - a
})

七、操作方法

Array.prototype.concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变原有的数组

var arr1 = [10, 23, 1, 18, 20, 100]
var arr2 = ['zhangsan', 'lisi', 'wangwu']
var arr3 = ['yezi']

console.log(arr1.concat(arr2)); //[ 10, 23, 1, 18, 20, 100, 'zhangsan', 'lisi', 'wangwu' ]
console.log(arr1.concat(arr2, arr3)); //[ 10, 23, 1, 18, 20, 100, 'zhangsan', 'lisi', 'wangwu', 'yezi' ]
console.log(arr1.concat('hello', 1, 2)); //[ 10, 23, 1, 18, 20, 100, 'hello', 1, 2 ]

Array.prototype.slice()

1、slice() 方法可从已有的数组中返回选定的元素，返回新数组
2、slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

该方法不会改变原有的数组

var arr = [10, 23, 1, 18, 20, 100]

// 从索引值为1的元素开始，截取到索引值为2的元素
console.log(arr.slice(1,3)); //[ 23, 1 ]

// 从索引值为1的元素开始，截取到最后一个
console.log(arr.slice(1)); //[ 23, 1, 18, 20, 100 ]

// 数组最后一个元素索引值为-1,往前依次递减,所以-2表示倒数第二位,从倒数第二位往后截取到最后一位
console.log(arr.slice(-2)); //[ 20, 100 ]

// 从索引值为-5的元素开始，截取到索引值为-3的元素
console.log(arr.slice(-5,-2)); //[ 23, 1, 18 ]

截取字符串：

var str = 'hello yezi'
console.log(str.slice(1,4)); //ell
console.log(str.slice(1)); //ello yezi
console.log(str.slice(-3)); //ezi

Array.prototype.splice()

splice() 方法用于添加或删除数组中的元素。

此方法会改变原数组。

语法：

array.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

返回值：
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

var arr = ['zhangsan', 'lisi', 'wangwu']

//添加
//从索引值1处开始，删除0个，添加元素'hello'、'yezi'
console.log(arr.splice(1,0,'hello','yezi')); //[]
console.log(arr); //[ 'zhangsan', 'hello', 'yezi', 'lisi', 'wangwu' ]

//删除并添加
//从索引值1处开始，删除2个，添加元素'lihua'、'yes'、1、2、3
console.log(arr.splice(1,2,'lihua','yes', 1, 2, 3)); //[ 'hello', 'yezi' ]
console.log(arr); //[ 'zhangsan', 'lihua', 'yes', 1, 2, 3, 'lisi', 'wangwu' ]

//删除
//从索引值1处开始，删除2个
console.log(arr.splice(1,2)); // [ 'lihua', 'yes' ]
console.log(arr); //[ 'zhangsan', 1, 2, 3, 'lisi', 'wangwu' ]

//从索引值1处开始，删除到最后一个
console.log(arr.splice(1)); // [ 1, 2, 3, 'lisi', 'wangwu' ]
console.log(arr); //[ 'zhangsan' ]

八、位置方法

Array.prototype.indexOf()

indexOf() 方法可返回数组中某个指定的元素位置。

语法：

//从start开始往后找item
array.indexOf(item,start)

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

var arr = [18, 23, 10, 23, 2, 19]
console.log(arr.indexOf(23)); // 1
console.log(arr.indexOf(23,1)); // 1
console.log(arr.indexOf(23,2)); // 3
console.log(arr.indexOf(99)); // -1

Array.prototype.lastIndexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该数组的后面向前查找。如果要检索的元素没有出现，则该方法返回 -1。

语法：

//从start开始往前找item
array.lastIndexOf(item,start)

参数	描述
item	必需。规定需检索的字符串值。
start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

var arr = [18, 23, 10, 23, 2, 19]
console.log(arr.lastIndexOf(23)); // 3
console.log(arr.lastIndexOf(23,2)); // 1
console.log(arr.lastIndexOf(23,3)); // 3
console.log(arr.lastIndexOf(99)); // -1

九、迭代方法

Array.prototype.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：
1、如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2、如果所有元素都满足条件，则返回 true。

every() 不会对空数组进行检测。
every() 不会改变原始数组。

语法：

array.every(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数见下表
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值：
布尔值。如果所有元素都通过检测返回 true，否则返回 false。

var arr = [10, 17, 5, 29, 19]
var result = arr.every(function(item, index, array){
  console.log(item + ' -- ' + index + ' -- ' + array); 
  //设置条件，只有当数组的每一项都大于3时，才返回 true
  return item > 3
})
console.log(result); //true

//第三行代码输出结果为：
// 10 -- 0 -- 10,17,5,29,19
// 17 -- 1 -- 10,17,5,29,19
// 5 -- 2 -- 10,17,5,29,19 
// 29 -- 3 -- 10,17,5,29,19
// 19 -- 4 -- 10,17,5,29,19

var arr = [10, 17, 5, 29, 19]
var result = arr.every(function(item, index, array){
  console.log(item + ' -- ' + index + ' -- ' + array); 
  //设置条件，只有当数组的每一项都大于9时，才返回 true
  return item > 9
})
console.log(result); //false

//第三行代码输出结果为：
// 10 -- 0 -- 10,17,5,29,19
// 17 -- 1 -- 10,17,5,29,19
// 5 -- 2 -- 10,17,5,29,19

Array.prototype.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：
1、如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。
2、如果没有满足条件的元素，则返回 false。

some() 不会对空数组进行检测。
some() 不会改变原始数组。

语法：

array.some(function(currentValue,index,arr),thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数见下表
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值
布尔值。如果数组中有元素满足条件返回 true，否则返回 false。

var arr = [10, 17, 5, 19, 29]
var result = arr.some(function(item, index, array){
  console.log(item + ' -- ' + index + ' -- ' + array); 
  //设置条件，只要数组中有一个元素大于100，就返回true，如果没有就返回false
  return item > 100
})
console.log(result); //false

//第三行代码输出结果为：
// 10 -- 0 -- 10,17,5,19,29
// 17 -- 1 -- 10,17,5,19,29
// 5 -- 2 -- 10,17,5,19,29
// 19 -- 3 -- 10,17,5,19,29
// 29 -- 4 -- 10,17,5,19,29

var arr = [10, 17, 5, 19, 29]
var result = arr.some(function(item, index, array){
  console.log(item + ' -- ' + index + ' -- ' + array); 
  //设置条件，只要数组中有一个元素大于12，就返回true，如果没有就返回false
  return item > 12
})
console.log(result); //true

//第三行代码输出结果为：
// 10 -- 0 -- 10,17,5,19,29
// 17 -- 1 -- 10,17,5,19,29

Array.prototype.filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。（即元素过滤）

filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

语法：

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数见下表
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值
返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

var arr = [10, 17, 5, 19, 29]
var result = arr.filter(function(item, index, array){ 
  //找出所有大于12的元素
  return item > 12
})
console.log(result); // [ 17, 19, 29 ]

// 对象数组
// 过滤出年龄大于18岁的同学
var stuArr = [
  { id: 1, name: 'zhangsan', age: 17 },
  { id: 2, name: 'lisi', age: 22 },
  { id: 3, name: 'wangwu', age: 32},
]
var res = stuArr.filter(function (item) {
  return item.age >= 18
})
console.log(res); 
/*
输出结果：
[
  { id: 2, name: 'lisi', age: 22 }, 
  { id: 3, name: 'wangwu', age: 32 }
]
*/

Array.prototype.map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

map() 不会对空数组进行检测。
map() 不会改变原始数组。

语法：

array.map(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数见下表
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值：
返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var arr = [10, 17, 5, 19, 29]
var result = arr.map(function(item, index, array){ 
  //对数组中的每个元素进行平方
  return item * item
})
console.log(result); // [ 100, 289, 25, 361, 841 ]

Array.prototype.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

forEach() 对于空数组是不会执行回调函数的。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数	描述
function(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数见下表
thisValue	可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

返回值
undefined

//遍历数组，求数组元素之和
var arr = [10, 17, 5, 19, 29]
var sum = 0
var result = arr.forEach(function(item, index, array){ 
   sum += item
})
console.log(sum); //80
console.log(result); // undefined

叶子yes

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数组方法

sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按字母顺序（Ascall编码）对数组中的元素进行排序，说得更精确点，是**按照字符编码的顺序进行排序**。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果要想进行升序或是降序排序的话，要提供比较函数。...
复制链接

扫一扫