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即可


相关文章
|
16天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
28天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
15天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
15天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
10天前
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
49 32
WK
|
24天前
|
Python
Python中format_map()方法
在Python中,`format_map()`方法用于使用字典格式化字符串。它接受一个字典作为参数,用字典中的键值对替换字符串中的占位符。此方法适用于从字典动态获取值的场景,尤其在处理大量替换值时更为清晰和方便。
WK
69 36
|
10天前
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
17 3
|
15天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
33 7
|
16天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
21天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。