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 相关文章推荐
使用typeof判断function是否存在于上下文
Aug 14 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
vue如何从接口请求数据
Jun 22 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php简单防盗链实现方法
2015/07/29 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Python通过len函数返回对象长度
2020/10/22 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
2014年村委会工作总结
2014/11/24 职场文书
语文教师个人工作总结
2015/02/06 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Golang中interface{}转为数组的操作
2021/04/30 Golang
Python内置的数据类型及使用方法
2022/04/13 Python