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()方法类似,大同小异

目录
相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1821 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1775 80
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
433 13
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~