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 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
138 52
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
52 5
|
2月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
29 1
|
7月前
|
Dart
Dart之集合详解(List、Set、Map)
Dart之集合详解(List、Set、Map)
|
4月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
4月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
5月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
5月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
|
5月前
|
算法 Java 索引
【Java集合类面试四】、 描述一下Map put的过程
这篇文章详细描述了HashMap中put操作的过程,包括首次扩容、计算索引、插入数据以及链表转红黑树和可能的再次扩容。
【Java集合类面试四】、 描述一下Map put的过程