js中数组常用方法总结(推荐)


Posted in Javascript onApril 09, 2019

前言

从事前端到现在也有快两年了,平时也会收集整理一些笔记放在印象笔记,不过收集过之后就在没有看过,经大佬指点,真正掌握一个知识点,最好的方式就是用自己的话把内容讲明白,就开始将以前零散的东西整合一下,和各位道友一起提高。

操作数组

印象中数组有很多方法,系统的整理一下,放在自己家里方便回头查~

Array.map()

此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
  let newArr = arr.map(x => x*2)
  //arr= [1, 2, 3, 4, 5]  原数组保持不变
  //newArr = [2, 4, 6, 8, 10] 返回新数组

Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数,没有返回值,直接改变原数组,注意和map方法区分

let arr = [1, 2, 3, 4, 5]
  num.forEach(x => x*2)
  // arr = [2, 4, 6, 8, 10] 数组改变,注意和map区分

Array.filter()

此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]
  const isBigEnough => value => value >= 3
  let newArr = arr.filter(isBigEnough )
  //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

Array.every()

此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false:

let arr = [1, 2, 3, 4, 5]
  const isLessThan4 => value => value < 4
  const isLessThan6 => value => value < 6
  arr.every(isLessThan4 ) //false
  arr.every(isLessThan6 ) //true

Array.some()

此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false:

let arr= [1, 2, 3, 4, 5]
  const isLessThan4 => value => value < 4
  const isLessThan6 => value => value > 6
  arr.some(isLessThan4 ) //true
  arr.some(isLessThan6 ) //false

Array.reduce()

 此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:

let arr = [1, 2, 3, 4, 5]
  const add = (a, b) => a + b
  let sum = arr.reduce(add)
  //sum = 15 相当于累加的效果
  与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的

Array.push()

此方法是在数组的后面添加新加元素,此方法改变了数组的长度:

Array.pop()

此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:

let arr = [1, 2, 3, 4, 5]
  arr.pop()
  console.log(arr) //[1, 2, 3, 4]
  console.log(arr.length) //4

Array.shift()

 此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度:

let arr = [1, 2, 3, 4, 5]
  arr.shift()
  console.log(arr) //[2, 3, 4, 5]
  console.log(arr.length) //4

Array.unshift()

此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:

let arr = [1, 2, 3, 4, 5]
  arr.unshift(6, 7)
  console.log(arr) //[6, 7, 2, 3, 4, 5]
  console.log(arr.length) //7

Array.isArray()

判断一个对象是不是数组,返回的是布尔值

Array.concat()

此方法是一个可以将多个数组拼接成一个数组:

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

Array.toString()

此方法将数组转化为字符串:

let arr = [1, 2, 3, 4, 5];
  let str = arr.toString()
  console.log(str)// 1,2,3,4,5

Array.join()

此方法也是将数组转化为字符串:

let arr = [1, 2, 3, 4, 5];
  let str1 = arr.toString()
  let str2 = arr.toString(',')
  let str3 = arr.toString('##')
  console.log(str1)// 12345
  console.log(str2)// 1,2,3,4,5
  console.log(str3)// 1##2##3##4##5

通过例子可以看出和toString的区别,可以设置元素之间的间隔~

Array.splice(开始位置, 删除的个数,元素)

万能方法,可以实现增删改:

let arr = [1, 2, 3, 4, 5];
   let arr1 = arr.splice(2, 0 'haha')
   let arr2 = arr.splice(2, 3)
   let arr1 = arr.splice(2, 1 'haha')
   console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
   console.log(arr2) //[1, 2] 删除三个元素
   console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素

结尾

第一次写,都是很简单的数组用法,千里之行始于足下,重新把基础夯实一下,如果存在错误或者表达不当,还望及时告知,thx

以上所述是小编给大家介绍的js中数组常用方法总结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JS隐藏号码中间4位代码实例
Apr 09 #Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 #Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 #Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
php curl 上传文件代码实例
2015/04/27 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python pandas 时间日期的处理实现
2019/07/30 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
档案管理员岗位职责
2013/12/01 职场文书
网络教育自我鉴定
2014/02/04 职场文书
初中班主任评语
2014/04/24 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
总结Python常用的魔法方法
2021/05/25 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS
pytorch中的 .view()函数的用法介绍
2022/03/17 Python