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 使用手册(七)
Sep 23 Javascript
javascript Keycode对照表
Oct 24 Javascript
js里的prototype使用示例
Nov 19 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
基于vue和websocket的多人在线聊天室
Feb 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统计文章排行示例
2014/03/04 PHP
php获取系统变量方法小结
2015/05/29 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
js重写方法的简单实现
2016/07/10 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python实现教务管理系统
2018/03/12 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python3.5的包存放的具体路径
2020/08/16 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
作文评语集锦大全
2014/04/23 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
应届毕业生求职信
2014/05/26 职场文书
应聘教师求职信
2014/07/19 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
五年级作文之想象作文
2019/10/30 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python