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为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python函数形参用法实例分析
2015/08/04 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python编写一个优美的下载器
2018/04/15 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
财经学院自荐信范文
2014/02/02 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
新员工入职欢迎词
2015/01/23 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
python实现自动清理文件夹旧文件
2021/05/10 Python