Javascript数组常用方法你都知道吗

 更新时间:2022年02月21日 17:09:37   作者:菜鸟玩家1111  
这篇文章主要为大家详细介绍了Javascript数组常用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

我用这些方法主要从五个方面去学习。

1.方法是干什么的。

2.谁能用 (当然是数组啦)。

3.有没有返回值,返回值是什么。

4.修不修改原来的对象。

5.如何使用。

接下来就是干货了。

1.push 向数组内添加一个或多个元素,添加到数组的最后面,方法返回值是新数组的长度。

arr.push(200)
arr.push(200,2,32)

2.pop 删除数组末尾的一个元素,不需要传参,方法返回值是被删除的元素 。

arr.pop()

3.unshift 向数组中添加一个或多个元素,添加到最前面,返回值是新数组的长度。

arr.unshift(1)arr.unshift(1,2)arr.unshift(1)
arr.unshift(1,2)

4.shift 删除数组最前面的一个元素 返回值是被删除的元素。

arr.shift()

5. concat 拼接两个数组,返回拼接后的数组,原数组不变。

let arr1 = [1,2]
let arr2 = [2,3]
arr1.concat(arr2)
console.log(arr1); // [1,2]
console.log(arr1.concat(arr2)); // [1,2,2,3]

6. reverse 数组颠倒,返回颠倒后的数组,原数组改变。

arr.reverse()

7.slice 数组的截取,包括开头,不包括结尾,返回截取后的数组,原数组不变。

let arr = [1,2,3,4,5,6]
// 填两个参数 a,b 从a截取到b 不包括b
// 填一个参数 a 从a截取到末尾
// 不填参数 从0截取到最后
//截取arr 里面的 3-5 也就是数组下标2-4 但是第二个参数不包括 所以就是 2-5
arr.slice(2,5)

8.splice 数组的添加或者删除,返回被删除的元素组成的数组,原数组改变。

//用法 splice(a,b,c)
//a 表示添加或者删除的开始的下标
//b 表示删除的个数 不想删除只想添加 b写成0
//c 表示添加的元素 添加的元素可以是多个 c,d,e 不添加就不用写c
var arr = [1,2,3,4,5,6]
// 把4删除 换成10
arr.splice(3,1,10)

9.join 将数组内的所有元素以某个值进行字符串拼接,默认是以 , 拼接。返回值是拼接的字符串,原数组不变。

let arr = [1,2,3,4,5,6]
arr.join()
arr.join('-')

10.indexOf 检测数组中是否存在某个元素 ,存在的话返回第一次找到的下标,不存在返回 -1,原数组不变。

let arr = [1,2,3,4,5,6]  
let ind = arr.indexOf(5)

11.lastIndexOf 和 indexOf用法一样,从数组后面开始找。

12.includes 检测数组中是否存在某个元素 存在返回 true 不出在返回false 用法和indexOf一样。

13.sort 对数组进行排序,返回排序后的数组,原数组改变。

// 汉字看笔画 英文字母看因为字母顺序
// 默认排序是按照首字符的顺序开始排序的
let arr = [2,3,5,4,9,6]
arr.sort()
//sort可以写函数
// a,b 代表的就是数组中相邻的两个数
// 从小到大排
arr.sort(function(a,b){
    return a - b
})

14.every 检测数组内的所有元素是否满足某个条件, 有一个必须参数,返回值是布尔值。

let arr = [100,15,50,110]
let myarr = arr.every(function(el){
    return el>14
})
console.log(myarr) //true

 15.some 检测数组内是否有元素满足某个条件,有一个必须参数,返回值是布尔值。

var arr = [100,15,50,110]
var myarr1 = arr.some(function(el){
      return el>100
})
console.log(myarr1) //true

16.find 返回数组中匹配的 第一个元素 的值,没有返回 undefined,有一个必须参数。

var arr = [100,15,50,110]
var myarr2 = arr.find(function(el){
      return el > 10
})
console.log(myarr2) // 100

17.findIndex 方法同find 返回值是对应的索引值。

18.filter 返回符合条件的元素形成一个新数组 ,返回值是一个数组

var arr = [100,15,8,50,110]
var myarr3 = arr.filter(function(el){
      return el<18
})
console.log(myarr3) //[15,8]

 19.map 创建一个数组,该数组中每个元素是调用过函数之后返回的值。

var arr = [100,15,8,50,110]
var arr5 = arr.map(function(el){
    return el*1+5   
})
console.log(arr5); //[105, 20, 13, 55, 115]

 20.reduce 用这个方法可以实现以上的所有方法 比如数组内数累加,返回值是单个数

// reduce(函数,最终结果的初始值)
// 每次遍历的函数,有四个参,每次查询数组的元素时执行的函数
// function(res,ele,index,array)
// res 结果变量
// ele 数组内元素
// index 对应的索引
// array 原数组
// 必须设置返回值,上一次返回的值是res的值,最后返回值是最终结果,也是reduce函数的返回值。
let arr = [100,15,8,50,110]
// res 是自己创的累加器 ele是当前值
let total = arr.reduce(function(res,ele){
    return res + ele
},0)

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容! 

相关文章

  • Javascript实现前端简单的路由实例

    Javascript实现前端简单的路由实例

    本文将使用javascript实现一个极其简单的路由实例。WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。
    2016-09-09
  • 一文详解如何处理前端表单验证确保用户输入合法

    一文详解如何处理前端表单验证确保用户输入合法

    这篇文章主要介绍了如何处理前端表单验证确保用户输入合法的相关资料,并分享了最佳实践和常见坑点,通过合理使用这些方法,可以构建出健壮、友好的验证系统,文中给出了详细的代码示例,需要的朋友可以参考下
    2025-03-03
  • javascript下用键盘控制层的移动的代码

    javascript下用键盘控制层的移动的代码

    javascript下用键盘控制层的移动的代码...
    2007-04-04
  • JavaScript继承的三种方法实例

    JavaScript继承的三种方法实例

    这篇文章主要给大家介绍了关于JavaScript继承的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • uniapp小程序实战之利用腾讯地图获取定位

    uniapp小程序实战之利用腾讯地图获取定位

    使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp小程序实战之利用腾讯地图获取定位的相关资料,需要的朋友可以参考下
    2023-02-02
  • Bootstrap基本样式学习笔记之标签(5)

    Bootstrap基本样式学习笔记之标签(5)

    这篇文章主要介绍了Bootstrap学习笔记之标签基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 判断div滑动到底部的scroll实例代码

    判断div滑动到底部的scroll实例代码

    下面小编就就为大家分享一篇判断div滑动到底部的scroll实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • innerText innerHTML的用法以及注意事项 [推荐]

    innerText innerHTML的用法以及注意事项 [推荐]

    我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。
    2009-05-05
  • 微信小程序支付功能 php后台对接完整代码分享

    微信小程序支付功能 php后台对接完整代码分享

    这篇文章主要为大家详细介绍了微信小程序支付功能,分享了php后台对接完整代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Echarts柱状图实现同时显示百分比+原始值+汇总值效果实例

    Echarts柱状图实现同时显示百分比+原始值+汇总值效果实例

    echarts是一款功能强大、灵活易用的数据可视化库,它提供了丰富的图表类型和样式,包括柱状图,这篇文章主要给大家介绍了关于Echarts柱状图实现同时显示百分比+原始值+汇总值效果的相关资料,需要的朋友可以参考下
    2024-08-08

最新评论