JS新手入门数组处理的实用方法汇总


Posted in Javascript onApril 07, 2021

join()方法:将数组中所有元素通过指定分隔符连接成一个字符串

举例:

myArr.join('-') // 用'-'符号拼接

concat()方法:将两个数组或多个数组合并成一个数组

举例:

myArr.concat(arr1, arr2, ..., arrN)

注意:该方法不会改变现有的数组,所以可以和空数组合并实现复制旧数组,在操作新数组数据时不污染旧数组数据

sort() 方法:用于对数组的元素进行排序

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较

举例:

myArr.sort() // 按字母排序
myArr.sort(function(a, b) {
	return a - b
}) // 按数字升序,降序为b - a
// 箭头函数写法
myArr.sort((a, b) => a - b)

reverse() 方法:用于颠倒数组中元素的顺序

举例:

myArr.reverse()

push() / unshift()方法:向数组的末尾 / 开头添加一个或多个元素,并返回新的长度

举例:

myArr.push(item1, item2, ..., itemN)
myArr.unshift(item1, item2, ..., itemN)

shift()方法:删除数组的第一个元素,并返回第一个元素的值

举例:

myArr.shift()

pop()方法:删除数组的一个元素(默认最后一个元素),并且返回该元素的值

举例:

myArr.pop() // 删除数组最后一个元素
myArr.pop(1) // 删除数组中索引为1的元素

splice()方法:向/从数组中添加/删除项目,然后返回被删除的项目

myArr.splice(index, count, item1, item2, ..., itemN)
// index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置
// count 必需。要删除的项目数量。如果设置为 0,则不会删除项目
// item1, item2, ..., itemN 可选。向数组添加的新项目

forEach()方法:方法用于调用数组的每个元素,并将元素传递给回调函数(相当于for循环)

举例:

myArr.forEach(function (item, index, arr) {
 if (index === 3) {
 item = 123
 } 
}) // 循环数组,将索引为3的元素值更改为123
// 箭头函数写法
myArr.forEach((v, i, arr) => if (i === 3) { v = 123 })

注意:以下方法均不会对空数组进行检测,不会改变原始数组

indexOf()方法:查找数组是否存在某个元素,返回下标,没有则返回-1

举例:

myArr.indexOf(item)

注意:indexOf() 方法对大小写敏感!

slice()方法:可提取字符串的某个部分,并以新的字符串返回被提取的部分(浅拷贝数组的元素)

举例:

const newArr = myArr.slice(0, 1)
// 截取数组myArr索引从0到1的部分元素
// 参数:
// begin(可选): 索引数值,接受负值,从该索引处开始提取原数组中的元素,默认值为0。
// end(可选):索引数值(不包括),接受负值,在该索引处前结束提取原数组元素,默认值为数组末尾(包括最后一个元素)

every()方法:用于检测数组中的元素是否满足指定条件(函数提供)(如某个值是否都为true)

如果有一个元素不满足,则整个表达式返回 false,且停止检测;如果所有元素都满足条件,则返回 true

举例:

const state = myArr.every(function (item, index, arr) {
 return item > 10
}) // 检测数组myArr的所有元素是否都大于10,返回一个布尔值state
// 箭头函数写法
const state = myArr.every((v, i, arr) => v > 10)

some()方法:用于检测数组中的元素是否满足指定条件(函数提供)(如某个值是否都为true)

如果有一个元素满足,则整个表达式返回 true ,且停止检测;如果没有满足条件的元素,则返回false

举例:

const state = myArr.some(function (item, index, arr) {
 return item > 10
}) // 检测数组myArr中是否存在元素大于10,返回一个布尔值state
// 箭头函数写法
const state = myArr.some((v, i, arr) => v > 10)

includes()方法:用于判断数组是否包含指定的值,如果找到匹配的值则返回 true,否则返回 false

注意:includes() 方法区分大小写

参数:
searchvalue:必需,要查找的值

start:可选,设置从那个位置开始查找,默认为 0

举例:

const state = myArr.includes(3) // 检测数组myArr中是否存在元素3,返回一个布尔值state
const state = myArr.includes(3, 3) // 从索引3开始检测数组myArr中是否存在元素3,返回一个布尔值state

filter()方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

举例:

const newArr = myArr.filter(function (item, index, arr) {
 return item > 10
}) // 检测数组myArr中所有元素都大于10的元素,返回一个新数组newArr
// 箭头函数写法
const newArr = myArr.filter((v, i, arr) => v > 10)

map()方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

map()方法按照原始数组元素顺序依次处理元素

举例:

const newArr = myArr.map(function (item, index, arr) {
 return item * 10
}) // 数组myArr中所有元素都乘于10,返回一个新数组newArr
// 箭头函数写法
const newArr = myArr.map((v, i, arr) => v * 10)

举例(用于数组嵌套对象的类型):

const newArr = myArr.map(function (item, index, arr) {
 return {
 id: item.id,
 newItem: '123'
 }
}) // 处理数组myArr中指定的对象元素里面的元素或新元素,返回一个新数组newArr
// 箭头函数写法
const newArr = myArr.map((v, i, arr) => {
 return {
 id: v.id,
 newItem: '123'
 }
})

find() / findIndex()方法:返回通过测试(函数内判断)的数组的第一个元素的 值 / 索引。如果没有符合条件的元素返回 undefined / -1

举例:

const val = myArr.find(function (item, index, arr) {
 return item > 10
}) // 返回数组myArr中第一个大于10的元素的值val,没有则返回undefined

const val = myArr.findIndex(function (item, index, arr) {
 return item > 10
}) // 返回数组myArr中第一个大于10的元素索引,没有则返回-1

reduce()方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

这个方法接收两个参数:要执行的函数,传递给函数的初始值

要执行的函数(total, currentValue, currentValue, arr):

total:必选,初始值, 或者计算结束后的返回值

currentValue:必选,当前元素;

currentValue:可选,当前元素索引;

arr:可选,当前元素所属的数组对象

举例1:

const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
 console.log(pre, cur)
 return pre + cur
})
console.log(sum)
// 输出值分别为
// 1, 2
// 3, 3
// 6

举例2(设置初始迭代值):

const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
 console.log(pre, cur)
 return prev + cur
}, 2)
console.log(sum)
// 输出值分别为
// 2, 1
// 3, 2
// 5, 3
// 8

应用:

1.求和、求乘积

const myArr = [1, 2, 3, 4]
const result1 = myArr.reduce(function(pre, cur) {
 return pre + cur
})
const result2 = myArr.reduce(function(pre, cur) {
 return pre * cur
})
console.log(result1) // 6
console.log(result2) // 24

2.计算数组中每个元素出现的次数

const myArr = ['liang','qi','qi','liang','ge','liang'] 
const arrResult = myArr.reduce((pre,cur) =>{
 if(cur in pre){
  pre[cur]++
 }else{
  pre[cur] = 1
 }
 return pre
},{})
console.log(arrResult) // 结果:{liang: 3, qi: 2, ge: 1}

3.对对象的属性求和

const myArr = [
 {
  name: 'liangqi',
  weigth: 55
 },{
  name: 'mingming',
  weigth: 66
 },{
  name: 'lele',
  weigth: 77
 }
]
const result = myArr.reduce((a,b) =>{
 a = a + b.weigth
 return a
},0)
console.log(result) // 结果:198

Array.of()方法:用于将一组值转化为新数组

举例:

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

flat()方法:数组拍平方法也叫数组扁平化、数组拉平、数组降维,用于将嵌套的数组变成一维数组,返回一个新数组

举例:

const myArr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]]
console.log(myArr.flat(Infinity)) // [1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4]

总结

到此这篇关于JS新手入门数组处理的文章就介绍到这了,更多相关JS数组处理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
You might like
destoon实现调用图文新闻的方法
2014/08/21 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JS的get和set使用示例
2014/02/20 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Django 再谈一谈json序列化
2020/03/16 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书