JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map

简介: JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map

数组中的方法集合


会改变原数组:



(一) push()方法 在数组最后添加一个或者多个新元素 ,并且返回新数组的长度.

const arr = [1, 2, 3,]
        arr.push(4, 5, 6)
        console.log(arr);//[1,2,3,4,5,6]
        console.log(arr.push(4, 5, 6));//6


(二)pop()方法 删除数组最后一个元素,并返回数组末尾删除元素

const arr = [1, 2, 3]
        arr2 = arr.pop()
        console.log(arr);//[1,2]
        console.log(arr2);//3


(三).unshift()方法 在数组前面添加一个或多个元素,并返回新元素的长度

const arr = [1, 2, 3,]
        arr.unshift(4, 5, 6)
        console.log(arr);//[4,5,6,1,2,3]
        console.log(arr.unshift(4, 5, 6));//6


(四)shift()方法 删除数组首部元素,并返回被删除的元素

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


(五.)splice()方法 对数组进行删除和修改操作,返回被删除元素组成的数组

const arr=[1,2,3,4]
    //splice(删除下标,删除个数,新增内容(可选))
    cosnt arr2=arr.splice(0,2,0)
    console.log(arr)//[0,3,4]
    console.log(arr)//[1,2]


(六).slice()方法 剪切 (截取)数组,并返回一个包含剪切值的新数组,不会改变原数组 也可以截取字符串

"123456789".slice(2,-3);
//"3456"


简易理解 负参数 slice()会将负的参数加上字符串的长度

也可以这样理解后面的负数,如-3,则到倒数第四个位置截止,不包括倒数第三个位置。*/

const arr=[1,2,3,4]
    const arr2=arr.slice(0,3)
    console.log(arr)//]1,2,3,4]
    console.log(arr2)//[1,2,3]


(七).concat()方法合并两个或多个数组,返回新数组,不会改变原数组

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


(八).join()方法将数组转化为字符串,不会改变原有数组,此方法会返回转换后的字符串,默认以 ','分隔

const arr=[1,2,3]
    const arr2=arr.join()
    const arr3=arr.join('-')
    console.log(arr)//[1,2,3]
    console.log(arr2)//1,2,3
    console.log(arr3)//1-2-3


会改变原数组:


(九).revres()方法颠倒数组元素,会改变原数组


10433ae26cf99641369284f5c7ec620a_53976096deef47b1af8334f4e70ef819.png


(十).indexOf()方法返回数组元素首次在数组中出现的索引,没找到返回-1


afc8208db01692b1f7db91da4d3226f6_fddcf0893fea4659b6628e57c569a7ce.png


(十一).sort()方法对数组进行排序 a-b从小到大排序 b-a从大到小


87a87065f681a1eb89b82bd16490f5e3_943397a4ad164ba9b27c2dddd230ae70.png


(十二).filter()方法 返回数组中满足条件的元素组成新数组,元素只能做布尔类型判断,不会改变原数组组


96e2de47cf17430b7c2900497560e86f_85bced3718f6487791db079260196c87.png


(十三.)map()方法 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成,可以做运算,不能过滤原素组元素,不会改变原数组


7dec08f9bad49f5902e6ae2d3b797cb3_9650c85c62d848d19a8ffc0b9a9a69fb.png


(十四).every()方法 用于判断数组中的元素是否都满足条件,当每个元素都满足条件时,返回ture,否则false,不会改变原数组


433822573de355f7fb614da1ba55a36b_b0a1d5e5820543d68a8a6768a233031e.png


十五.some()方法 判断数组是否至少有一个满足条件,一旦找到一个就立即停止并返回true,否则false,不会改变原数组


5e2c7975e6160720b28aa11a7c86e9a5_784392243a3c41eebb6bdfd3cdf1f324.png


true false 当some的数组为空时返回false 当every的数组为空时返回true

理解: 防止混淆,请务必这样记

every只要有一个失败就返回失败 (只看false)因为没有false 所以就是true


some:只要有一个成功就返回成功(只看true)因为没有true所以就是false


b3d95e04048be111dd710040d9435080_6eb10a056b7940089b173295552fbed1.png


十六.forEach()方法 遍历整个数组,中途不能用break中断


80318bc1a8cf242321b251ac5ab578f4_3c4d35b4fa5a49f2a42cd5c8294bd11e.png


(十七)reduce()方法 给数组做四则运算 第二个参数一般设为0 不会改变原数组


5c779655ea2df3bf918a2ad62603a5b5_5e58e8dbae1540d3b4321b30550ca385.png


(十八).includes()方法判断数组中是否存在,若存在返回true,不存 在即返回false


d138b0fa757a8306101214b512188cf1_ad8bbbc78d7542f3b64db31e964e4648.png


(十九) findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。 如果没有符合条件的元素返回 -1

注意: IE 11 及更早版本不支持 findIndex() 方法。


var arr2 = [1,18,2,99,666,44,66];
    var flag2 = arr2.findIndex(item => {
        return item > 50;
    });
    console.log(flag2)   // 得到: 3


var arr3 = ['red','pink','green'];
    var flag3 = arr3.findIndex(item => item === 'yellow')
    console.log(flag3)  // 得到:-1


(二十) form伪数组转换成真数组

document.querySelecttorAll() 获取到的元素集合和函数中的arguments为伪数组
Array.from(原伪数组)

(二十一) split(‘分隔符’) 把字符串转换为数组 使用和join方法相反

注意:


60a722c618cf127e6ba470b9a63495d7_af942155a5424ebf86ca4ead4f8d88d8.png


foreach:没有办法终止循环


js中凡是涉及到截取的方法 都是包含开头 不包含结尾


字符串.substring(开始下标,结束下标) - 返回被截取的字符串,不包含结束下标对应的字符 也可以截取字符串 str.substring() 不写结束下标 即从开始截取到字符串结尾

字符串截取的方法 slice() substring() substr()-详细对比

辨析:


相同点:

1.三者皆返回一个新字符串,原字符串不做改变.

2.传入一个正参数时,三者返回的字符串相同,返回的新字符串都是从参数位置到原字符串长度位置的.


不同点:

1.传入两个正参数时,slice()和substring()返回的字符串相同.第二个参数都表示结束位置,但substr()的表示字符串的个数.

2.substring()不接受负参数,若传入负参数,将被转换成0.

3.substr()传入一个负参数时,与slice()相同,转换成参数+字符串长度.

4.substr()传入两个负参数时,与substring()相同,转换成0.但substring()会将参数从小到大排序,substr()不会.


截取字符串的后几位之前的字符串 slice() substring() 括号内的第二个参数为str.length-(需要几位数就写几)


//由于目标是给每一项的后面添加一个值为10的项,用splice()方法先给第一项后添加一个10,发现此时原来的第二项到了第三项,给第二项后添加一个10,发现此时原来的第三项到了第五项,所以给数组的奇数项一直循环添加10即可


相关文章
|
2月前
|
存储 JavaScript Java
(Python基础)新时代语言!一起学习Python吧!(四):dict字典和set类型;切片类型、列表生成式;map和reduce迭代器;filter过滤函数、sorted排序函数;lambda函数
dict字典 Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
200 1
|
7月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
377 69
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
539 0
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
658 80
|
8月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护