ECMAScript5P4(数组)

最新推荐文章于 2025-06-05 21:40:57 发布

今天你四百冷了吗

最新推荐文章于 2025-06-05 21:40:57 发布

阅读量362

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48931100/article/details/126479403

版权

本文详细介绍了JavaScript数组的基础概念、创建方式及各类操作方法，包括数组的序列化、排序、操作、位置和迭代方法等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

数组创建
- 字面量创建、Array构造函数创建
数组API

js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。
数组也是一个对象，和普通对象功能类似，用来存储一些值，不同的是普通对象使用字符串作为属性名，数组使用数字来作为索引操作元素；索引：从0开始的整数；

数组创建

字面量创建、Array构造函数创建

由一对包括元素的方括号"[]“表示，元素之间以逗号”,"隔开

通过索引访问数组，数组的索引从0开始，数组的索引超过数组长度会访问到undefined值而不会报错。数组的长度通过length属性获取

//数组中的元素可以是任意的数据类型
//字面量创建
const arr1 = [1, 2, 3, '123', 'spylent', [1, 2, 3], { name: 'cym' }]
//构造函数创建
 创建一个包含5个元素的数组 var arr = [undefined,undefined,undefined,undefined,undefined];
const arr2 = new Array(5)
//可以同时添加元素，将要添加的元素中作为构造函数的参数传递
const arr3 = new Array('123', 'spylent', [1, 2, 3], 3, 4, 5)
console.log(arr1, arr2, arr3)
//[ 1, 2, 3, '123', 'spylent', [ 1, 2, 3 ], { name: 'cym' } ] [undefined,undefined,undefined,undefined,undefined] [ '123', 'spylent', [ 1, 2, 3 ], 3, 4, 5 ]

console.log(arr2[0])//undefined
如果索引大于等于数组的长度，返回undefined
console.log(arr1[10])//undefined

arr2[0] = "spylent"
console.log(arr2)
//[ 'spylent', undefined,undefined,undefined,undefined]

//如果修改的length大于原长度，则多出部分会空出
//如果修改的length小于原长度，则多出元素会被删除
arr2.length = 1
console.log(arr2)//[ 'spylent' ]

数组API

数组序列化的方法

toString() 在默认情况下都会以逗号分隔字符串的形式返回数组项
join() 使用指定的字符串用来分隔数组字符串，默认也是逗号分隔

const arr1 = [1, 2, 3, '123', 'spylent', [1, 2, 3], { name: 'cym' }]
console.log(arr1.toString(), typeof arr1[0], typeof arr1, typeof arr1.toString())
//1,2,3,123,spylent,1,2,3,[object Object] number object string

console.log(arr1.join(), typeof arr1[0], typeof arr1, typeof arr1.join())
//1,2,3,123,spylent,1,2,3,[object Object] number object string
console.log(arr1.join(""), typeof arr1[0], typeof arr1, typeof arr1.join())
//123123spylent1,2,3[object Object] number object string
console.log(arr1.join("--"), typeof arr1[0], typeof arr1, typeof arr1.join())
//1--2--3--123--spylent--1,2,3--[object Object] number object string

//数组也可以使用序列化工具进行转换
const jStr = JSON.stringify(arr1)
console.log(jStr, typeof arr1[0], typeof arr1, typeof jStr)
//[1,2,3,"123","spylent",[1,2,3],{"name":"cym"}] number object string
const jArr = JSON.parse(jStr)
console.log(typeof jArr)//object

构造函数的方法

Array.isArray()：判断某个变量是否是一个数组对象。
Array.from()：可以将类数组对象或者可迭代对象中创建一个新的数组实例。
Array.of()：根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

function fun () {
  console.log(arguments, Array.isArray(arguments))
  //[Arguments] { '0': 1, '1': 2, '2': 3, '3': 'spylent' } false
  
  const arr = [...arguments]
  console.log(arr, Array.isArray(arr))
  //[ 1, 2, 3, 'spylent' ] true

  const arr1 = Array.from(arguments)
  console.log(arr1, Array.isArray(arr1))
  //[ 1, 2, 3, 'spylent' ] true
}
fun(1, 2, 3, "spylent")

const strArr = Array.from('spylent')
console.log(strArr, Array.isArray(strArr))
/**
 * [
  's', 'p', 'y',
  'l', 'e', 'n',
  't'
] true
 */

const arr = Array.of(1)
const arr1 = Array.of(1, 2, 3, 'spylent', false)
console.log(arr, arr1)
//[ 1 ] [ 1, 2, 3, 'spylent', false ]

栈和队列方法

都会改变原数组

Array.prototype.push()：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意：
新元素将添加在数组的末尾
此方法改变数组的长度
Array.prototype.pop()：pop() 方法用于删除数组的最后一个元素并返回删除的元素
注意：
此方法改变数组的长度
Array.prototype.shift()：shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
注意：此方法改变数组的长度
Array.prototype.unshift()：unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
注意：
该方法将改变数组的数目。

const arr = [1, 2, 3]
arr.push('spylent', true, false)
console.log(arr)
//[ 1, 2, 3, 'spylent', true, false ]
console.log(arr.push(999))//7
console.log(arr)
//[ 1, 2, 3, 'spylent', true, false, 999 ]

arr.pop()
console.log(arr)
//[ 1, 2, 3, 'spylent', true, false ]
console.log(arr.pop())//false
console.log(arr)
//[ 1, 2, 3, 'spylent', true ]

const a = arr.shift()
console.log(a, arr)
//1 [ 2, 3, 'spylent', true ]

const l = arr.unshift('青紫')
console.log(l, arr)
//5 [ '青紫', 2, 3, 'spylent', true ]

排序方法

都会改变原数组

Array.prototype.reverse()：reverse() 方法用于颠倒数组中元素的顺序
Array.prototype.sort()：sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按字母顺序（Ascall编码）对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果要想进行升序或是降序排序的话，要提供比较函数。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
```
 当 a>b 时，
 a - b > 0  ，排序结果 ===> b，a （升序）
 b - a < 0  ，排序结果 ===> a，b （降序）

 当 b>a 时，
 a - b < 0  ，排序结果 ===> a，b （升序）
 b - a > 0  ，排序结果 ===> b，a （降序）
```

当 a=b 时，
a - b = b - a =0 , 排序结果 ===> 保持不变

const arr = [1, 2, 3, 'spylent', true, false]
console.log(arr.reverse(), arr)
//[ false, true, 'spylent', 3, 2, 1 ] [ false, true, 'spylent', 3, 2, 1 ]

const arr1 = [1, 6, 3, 89, 23, 1, 0]
arr1.sort(function (a, b) {
  return a - b
})
console.log(arr1)
//[0,1,1,3,6,23,89]
arr1.sort(function (a, b) {
  return b - a
})
console.log(arr1)
//[89,23,6,3,1,1,0]

操作方法

concat、slice不会改变原数组
splice会改变原数组

Array.prototype.concat()：concat() 方法用于连接两个或多个数组。
注意：该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
```
 语法：array1.concat(array2,array3,...,arrayX)
```
Array.prototype.slice()：slice() 方法可从已有的数组中返回选定的元素；slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
```
 语法：array.slice(start, end)
```
Array.prototype.splice()：splice() 方法用于添加或删除数组中的元素。
**注意：**这种方法会改变原始数组。
```
 语法：array.splice(index,howmany,item1,.....,itemX)
```

const arr1 = [1, 2, 3, 4]
const arr2 = [5, 6, 7, 8]
const arr3 = arr1.concat(arr2)
console.log(arr1, arr3)
//[ 1, 2, 3, 4 ] [1, 2, 3, 4, 5, 6, 7, 8]

const arr4 = arr1.slice(0, 3)
console.log(arr4, arr1)
//[ 1, 2, 3 ] [ 1, 2, 3, 4 ]
const arr5 = arr2.slice(-1)
const arr6 = arr2.slice(0)
console.log(arr5, arr6, arr2)
//[ 8 ] [ 5, 6, 7, 8 ] [ 5, 6, 7, 8 ]

console.log(arr6.splice(-1), arr6)
//[ 8 ] [ 5, 6, 7 ]
console.log(arr6.splice(0), arr6)
//[ 5, 6, 7 ] []

arr5.splice(1, 0, "spylent", 1, 2, 3)
console.log(arr5)
//[ 8, 'spylent', 1, 2, 3 ]

位置方法

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

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

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

语法：array.indexOf(item,start)

Array.prototype.lastIndexOf()：lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

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

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

语法：array.lastIndexOf(item,start)

const arr = [1, 2, 3, 'spylent', '十七碎块', 2]
const index = arr.indexOf('spylent')
console.log(index)//3
const index1 = arr.indexOf('spylent', 3)
console.log(index1)//3
const index2 = arr.indexOf('spylent', 4)
console.log(index2)//-1
console.log(arr.lastIndexOf(2))//5
console.log(arr.lastIndexOf(2, 3))//1

迭代方法

以下几种迭代方法中参数的含义如下：
在这里插入图片描述

都不会改变原数组

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

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

	语法：array.every(function(currentValue,index,arr), thisValue)

const arr = [1, 2, 3, 4, 67, 45, 23]
let result = arr.every(function (item) {
  return item > 4
})
console.log(result, arr)
//false [1,2,3,4,67,45,23]

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

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

语法：array.some(function(currentValue,index,arr),thisValue)

const arr = [1, 2, 3, 4, 67, 45, 23]
let result1 = arr.some(function (item) {
  return item > 4
})
console.log(result1, arr)
//true [1,2,3,4,67,45,23]

Array.prototype.filter()：
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
```
 语法：array.filter(function(currentValue,index,arr), thisValue)
```

const arr = [1, 2, 3, 4, 67, 45, 23]
const result4 = arr.filter(function (item) {
  return item > 2
})
console.log(result4, arr)
//[ 3, 4, 67, 45, 23 ] [1,2,3,4,67,45,23]

Array.prototype.map()：
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

语法：array.map(function(currentValue,index,arr), thisValue)

const arr = [1, 2, 3, 4, 67, 45, 23]
const reArr = arr.map(function (item) {
  return Math.sqrt(item)
})
console.log(reArr, arr)
/*[
  1,
  1.4142135623730951,
  1.7320508075688772,
  2,
  8.18535277187245,
  6.708203932499369,
  4.795831523312719
] [
   1,  2,  3, 4,
  67, 45, 23
]

Array.prototype.forEach()
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
```
 语法：array.forEach(function(currentValue, index, arr), thisValue)
```

const arr = [1, 2, 3, 4, 67, 45, 23]
arr.forEach(item => {
  console.log(item)
})
/**
 - 1
2
3
4
67
45
23
 */