JS:数组类型及常用的方法使用

简介: JS:数组类型及常用的方法使用

01 如何定义?

 

JS的数组类型和python的列表有很多相似的地方,可以联想记忆。

 

let num = [1, '你好', 1.2]  // 存储的元素可以是不同的数据类型

02 常用方法使用

2.1 重要方法

 

length方法 ==> 返回数组的长度

let num = [1, 2, 3, 4]  // 定义数组num
num_len = num.length  // 数组num中有4个元素, 所以num_len值为4
// 注意, 不需要加上括号, 即num.length()是不需要的


push(value)方法 ==> 数组末端添加元素value

1. let num = [1, 2, 3]
2. num.push(4)  // 数组num更新为[1, 2, 3, 4]


pop(index)方法 ==> 删除数组索引为index的元素并将该元素值返回 ,不传参默认删除数组末端元素并将该元素值返回。

let num = ['q', 'w', 'e', 'r']
num_pop1 = num.pop(2)  // 删除数组中索引为2的元素(即字符'e'), 数组更新为['q', 'w', 'r']
// 函数返回被删除的元素, 所以num_pop1 = 'e'
num_pop2 = num.pop()  // 删除数组中末端的最后一个元素(即字符'r'), 数组更新为['q', 'w']
// 函数返回被删除的元素, 所以num_pop2 = 'r'


unshift(value)方法 ==> 在数组开头添加value并返回添加之后新数组的元素个数(即数组.length)

let num = [1, 2, 3, 4]
num_len = num.unshift(123)  // 在数组开头添加元素123, 数组更新为[123, 1, 2, 3, 4]
// 由于新的数组长度为5, 所以函数返回值为5, 所以num_len = 5


shift()方法 ==>  删除数组开头的第一个元素并返回删除之后新数组的元素个数(就数组.length)

let num = [1, 2, 3, 4]
num_len = num.shift()  // 删除数组开头的第一个元素(即1), 所以删除之后的数组为[2, 3, 4]
// 删除之后的数组长度为3, 所以num_len = 3


slice()方法 ==> 切片

let num = [1, 2, 3, 4, 5]
num_slice = num.slice(1, 4)  // 取索引范围为[1:3]的数组, 所以num_slice = [2, 3, 4]
// 注意, 原数组不会发生改变, 即还是[1, 2, 3, 4, 5]
// 该函数只有start和end,没有步长,支持负数切片
num_slice1 = num.slice(0, -1)  // 取索引范围为[0, 3]的数组, 所以num_slice1 = [1, 2, 3, 4]


reverse()方法 ==> 逆序返回数组

let num = ['q', 1, 'w', 2]
num_reverse = num.reverse()  // 将num数组重新排列, 逆序(从后往前), 并将排列好的数组返回
// 返回的数组num_reverse = [2, 'w', 1, 'q']。 注意, 原数组也是这个


join(link)方法 ==> 连接字符串, 子字符串之间的连接字符为link

let num = ['q', 111, 'www', 34.45]  // 注意, 并没有数组内所有元素必须是字符串(和python不一样)
num_link = num.join('***')  // 用'***'作为连接字符串,去连接数组内各个元素
// num_link = 'q***111***www***34.45'
// 注意, 原数组没有发生变化, 依旧是['q', 111, 'www', 34.45]


concat()方法 ==> 将数组相加,或者说将两个数组连接在一起变成一个更长的数组

let num1 = [1, 2, 3]
let num2 = ['q', '2', 111.111]
num_concat = num1.concat(num2)  // 将两个数组连接在一起,并将该组合的新数组返回
// 所以新数组num_concat = [1, 2, 3, 'q', '2', 111.111]
// 原数组num1, num2均没有改动


 sort()方法 ==> 将数组进行排序

let num = [4, 3, 2, 1]
num_sort = num.sort()  // 返回升序排列的数组, 并且原数组num也是经过升序排列的数组


2.2 较为重要方法

三个比较重要的方法

forEach()方法 ==> 类似于python的map()

不过多讲解,直接放代码。

let num = [111, 222, 333, 444, 555]
undefined
num.forEach(function(num_i){console.log(num_i ** 2)}, num)  // 返回元素平方
VM3207:1 12321
VM3207:1 49284
VM3207:1 110889
VM3207:1 197136
VM3207:1 308025
undefined
num.forEach(function(num_i, index){console.log(num_i, index)}, num)  // 返回元素值及其索引
VM3371:1 111 0
VM3371:1 222 1
VM3371:1 333 2
VM3371:1 444 3
VM3371:1 555 4
undefined
num.forEach(function(num_i, index, n){console.log(num_i, index, n)}, num)  // 返回元素值及其索引以及元素所在的数组
VM3621:1 111 0 (5) [111, 222, 333, 444, 555]
VM3621:1 222 1 (5) [111, 222, 333, 444, 555]
VM3621:1 333 2 (5) [111, 222, 333, 444, 555]
VM3621:1 444 3 (5) [111, 222, 333, 444, 555]0: 1111: 2222: 3333: 4444: 555length: 5[[Prototype]]: Array(0)
VM3621:1 555 4 (5) [111, 222, 333, 444, 555]
undefined


splice()方法 ==> 删除指定范围数组,添加数组

let num = [1, 2, 3, 4, 5]
undefined
num.splice(1, 3)  // 从索引1(包括)开始, 往后删除三个元素, 并将删除的元素以数组形式返回
(3) [2, 3, 4]
num  // 删除的元素是2, 3, 4 所以剩下1, 5两个元素
(2) [1, 5]
let num = [11, 22, 33, 44, 55]
undefined
num.splice(2, 2, 666)  // 从索引2开始, 往后删除2个元素, 并将删除的元素以数组的形式返回
(2) [33, 44]
num  // 我们上面的splice()还传入了第三个参数:666, 表示在索引为2的位置添加该参数
(4) [11, 22, 666, 55]
let num = [1, 2, 3, 4, 5]
undefined
num.splice(1, 2, [111, 222, 333])  // 从索引1开始, 往后删除2个元素, 并将删除的元素以数组形式返回
(2) [2, 3]
num  // 这里我们的splice()传入的第三个参数稍微有点不一样, 就是我们传入的是一个数组, 但是还是一样的效果, 就是将数组中索引为1的位置添加该参数, 只不过原来是添加一个数, 现在是添加一整个数组而已
(4) [1, Array(3), 4, 5]

map()方法 ==> 和前面的forEach()方法类似,大同小异

目录
相关文章
|
19天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
19天前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
5天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
|
19天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
19天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
7天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
18天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
18天前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
19天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
20天前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。