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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
vue-router 中 meta的用法详解
Nov 01 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
PHP入门速成(2)
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python使用Tesseract库识别验证
2018/03/21 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
在Python中COM口的调用方法
2019/07/03 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
列车长先进事迹材料
2014/01/25 职场文书
专业技术职务聘任书
2014/03/29 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
政府采购方案
2014/06/12 职场文书
竞赛口号大全
2014/06/16 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL