JavaScript数组创建、常用方法及类数组原理详解

作者:青柠时间:2026-10-23 23:09:35浏览:134

本文详细解析JavaScript中数组的两种创建方式,重点介绍push、pop、sort等改变原数组的方法及concat、slice等不改变原数组的方法。同时深入探讨类数组对象的概念、特征及其通过Array.prototype模拟数组行为的原理,帮助开发者深入理解JS数据结构。

JavaScript数组的创建方式

在JavaScript中,创建数组主要有两种途径。

第一种方式是通过字面量语法,即使用方括号直接定义:var arr = []。

第二种方式是通过构造函数实例化:var arr = new Array()。

当使用构造函数并仅传入一个参数时,该参数会被解释为数组的长度。需要注意的是,这个参数必须是整数类型。

例如,var arr = new Array(10) 会创建一个长度为10的空数组。如果传入非整数如 var arr = new Array(10.2),则会报错。若传入多个参数,如 var arr = new Array(1, 2, 3),则数组内容为 [1, 2, 3]。

数组常用方法详解

JavaScript提供了丰富的数组操作方法,根据是否修改原数组可分为两类。

改变原数组的方法包括:push、pop、shift、unshift、sort、reverse和splice。

不改变原数组的方法包括:concat、join(配合split)、toString和slice。

以push方法为例,其具体实现逻辑如下所示。


var arr = [1, 2, 3]
arr.push(4, 5) //arr = [1, 2, 3, 4, 5] 向数组最后一位添加元素,参数可以多个
//实现原理
Array.prototype.push = function() {
  for(var i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i]
  }
}

push方法的功能是将一个或多个元素添加到数组末尾,并返回新的长度。其底层实现原理通常涉及遍历arguments对象,将每个参数依次赋值给this数组的对应索引位置。


arr.pop()  //arr = [1, 2, 3, 4] 删除数组最后一位
arr.unshift(-1, 0) //arr = [-1, 0, 1, 2, 3, 4] 向数组最前面一位添加元素, 参数也可以多个
arr.shift() //arr = [0, 1, 2, 3, 4] 删除数组最前面一位
arr.reverse() //arr = [4, 3, 2, 1, 0] 数组取反,倒序
arr.splice(0, 3, 2, 2) //arr = [2, 2, 1, 0] 参数1(可以为负数, 从倒数第几位起),从第参数1位开始,参数2,删除参数2位, 参数3后面的, 从删除处添加参数3及后面的参数数据
arr.sort(function(a, b) { //排序 参数时一个函数,函数参数1为数组前一个,参数2为数组后一个, 返回 小于0,前面数放前面 返回大于0,前面数放后面 返回0,不用动
  return a > b //升序
  // return a < b //降序
})

以下示例展示了如何利用sort方法实现数组元素的随机乱序排列。


var arr = [1, 2, 3, 4, 5, 6, 7]
arr.sort(function(a, b) {
  return Math.random() - 0.5
})
console.log(arr)

另一个常见应用场景是计算字符串的字节数,具体实现代码如下。


function retBytes(str) {
  var num = str.length
  for(var i = 0; i < str.length; i++) {
    if(str.charCodeAt(i) > 255) num++
  }
  return num
}

此外,还有一些不修改原数组的常用操作示例,包括拼接、类型转换和截取等。


var arr = [1, 2, 3]
console.log(arr.concat(4, 5))
console.log(arr.concat([4, 5])) //一样 ,拼接两个数组返回新的数组,不改变原数组

console.log(arr.toString()) //1, 2, 3 字符串化

console.log(arr.slice(0, 2)) //[1, 2] 参数1,从参数1截取, 参数2,截取到参数2位
console.log(arr.slice(1))  //从第1位开始截取到最后一位

console.log(arr.slice()) //不变, 但是用于将一个类数组截取为一个数组, 比如arguments

console.log(arr.join(',')) //1,2,3 以参数1相连形成字符串

var str = '1,2,3'
console.log(str.split(',')) //[1,2,3] 以参数1分割成数组,与join互逆

var arr = [str, str1, str2, str3] //多个str相连 散列
arr.join('')


类数组对象原理与操作

除了标准数组,JavaScript中还存在一种称为“类数组”的对象结构。

典型的类数组例子是函数内部的arguments对象。

下面展示一个手动构造的类数组对象示例,它具备索引属性和length属性。


var obj = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  'length': 3,
  'push': Array.prototype.push,
  'splice': Array.prototype.splice
}
//属性要为索引(数字)属性,必须有length属性,最好有push方法

对类数组进行push操作时,其行为类似于标准数组,但需注意索引覆盖问题。


var obj = {
  '2': 'a',
  '3': 'b',
  'length': 2,
  'push': Array.prototype.push
}
obj.push('c')   //obj[obj.length] = 'c' -> 此时 属性'2'的值被覆盖为 'c', length变成3
obj.push('d')   //obj[obj.length] = 'd' -> 此时 属性'3'的值被覆盖为 'd', length变成4
console.log(obj) //{2: 'c', 3: 'd', length: 4, push: Array.prototype.push}

类数组对象除了具备数组特有的属性和方法外,还可以添加其他自定义属性。


var obj = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  'length': 3,
  'push': Array.prototype.push,
  'splice': Array.prototype.splice,
  'name': 'lyj',
  'age': 18
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章