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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
详解js常用分割取字符串的方法
May 15 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
推荐php模板技术[转]
2007/01/04 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
python人人网登录应用实例
2014/09/26 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python关于调用函数外的变量实例
2019/12/26 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python 绘制场景热力图的示例
2020/09/23 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
募捐倡议书
2014/04/14 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
心理健康教育主题班会
2015/08/13 职场文书
学术会议开幕词
2016/03/03 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript