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 28 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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与javascript对多项选择的处理
2006/10/09 PHP
php 变量定义方法
2009/06/14 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
SQL SERVER面试资料
2013/03/30 面试题
精彩的大学生自我评价
2013/11/17 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
维稳工作承诺书
2015/01/20 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang