JavaScript数组方法-系统性总结详解

2024-12-09 12:06:41

变异方法和非变异方法。即变异方法使用会改变原数组，后者则不会。下面脑图将其进行了标注。
你或许需要注意数组方法和字符串方法有几个方法相似，数组和字符串是如何切换的?
有些方法参数是支持负数的，有些方法第二个参数不是代表坐标代表的是个数。
甚至回调函数我们也可以将其梳理一遍，大部分回调函数参数格式是一样的，有些回调函数是不一样的。
当split，slice，splice，join，contains，includes，push，pop，shift，unshift甚至你被相似的单词搞得晕头转向，以至于你分不清哪个是数组的方法哪个是字符串方法，哪个功能是干嘛来着。当然我现在可以告诉你上面那些方法究竟是数组方法还是字符串方法，甚至字符串方法和数组都有这么一个方法，但是没必要，因为你终究很难记住。所以下面将其进行系统的归类总结，你就很容易区分出来了。

接下来你只需要忘记你之前杂乱无章的记忆，通过梳理重新建立你的记忆。

数组常用方法

数组元素增添和删除

操作数组头部

unshift(value)变异方法 数组头部插入一个元素
shift()变异方法 移出数组头部的第一个元素

操作数组尾部

push(value) 变异方法向数组尾部压入一个元素
pop() 变异方法弹出数组尾部一个元素

任意位置增删

splice(start,length[…,value]) 变异方法

第二个参数为个数，不为0的时候表示需要从start开始删除length个元素支持增删一起做。

数组拼接

concat(…arr) 字符串有该类似方法

数组转换成字符串

join(str) 以指定字符进行拼接将数组转换成字符串
toString() 以","号进行分割将数组转换字符串

截取数组

slice(start[,end])支持负数字符串有该类似方法

数组排序方法

排序

sort(callback)变异方法 对数组进行排序

回调函数返回 a-b为从大到小进行排序，b-a则为从小到大进行排序。

//callback回调函数格式
function callback(a,b) {
	return a-b
}

顺序翻转

reverse()变异方法 对数组的顺序进行反转

数组迭代方法

数组遍历查找

返回值为下标

indexOf(targetValue) 从左到右数组进行遍历，查找目标值的所在下标,返回第一次出现的下标值.
lastIndexOf(targetValue) 从右到左对数组进行遍历，查找目标值所在下标,返回第一次出现的下标值.
findIndex(callback) 通过回调函数对数组元素进行条件判断，返回第一次满足条件的元素下标值

返回值为内容

find(callback) 通过回调函数对数组元素进行条件判断，返回第一次满足条件的元素值

数组遍历处理

callback(value[,index[,array]])

//callback回调函数格式
function callback( value, index, array) {
	//处理
	...
	return ... //此处是否不需要retrun语句下面对其进行标注
}

forEach(callback) 对数组进行遍历处理仅处理无返回值。callback不需要return语句
map(callback) 遍历数组每一个元素使用callback对数组进行处理，并且将callback处理过的返回值加入到新数组并返回新数组。
filter(callback) 对数组进行过滤操作，返回callback返回值为true的元素组成的新数组。
every(callback) 对数组进行遍历，如果callback返回值都为true，则方法的返回值为true
some(callback) 对数组进行遍历，如果callback返回值有一个为true，则方法的返回值为true

callback(total,value[,index[,array]])

//callback回调函数格式
function callback(total, value, index, array) {
  return total + value;
}

reduce(callback[,初始值])

从左往右数组依次缩短，同时上一次处理的结果total传入下次回调函数的作为参数供回调函数使用

reduceRight(callback[,初始值])

从右往左数组依次缩短，同时上一次处理的结果total传入下次回调函数的作为参数供回调函数使用

数组其他方法

includes(value) ES6 判断数组是否包含某个元素

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

JS数组方法concat()用法实例分析

本文实例讲述了JS数组方法concat()用法.分享给大家供大家参考,具体如下: 数组方法concat() concat()可以基于当前数组中的所有项创建一个新数组.即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组. 没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本. 如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中如果传递的值是不是数组,这些值会被简单的添加到数组的末尾注意:该方法不会改变先后的数
JS数组方法reverse()用法实例分析

本文实例讲述了JS数组方法reverse()用法.分享给大家供大家参考,具体如下: reverse()方法定义:反转数组项的顺序语法: arr.reverse() 参数:/ 返回值:返回该数组的引用. 代码如下: var arr1 = [1, 2, 3, 4, 5, 6]; var arr2 = ['A', 'B', 'C']; var arr3 = ['AAA', 'BBB', 'CCC']; var arr4 = ['Hello', 'World']; Array.prototype.c
JS数组方法shift()、unshift()用法实例分析

本文实例讲述了JS数组方法shift().unshift()用法.分享给大家供大家参考,具体如下: shift()方法 1. 定义:从数组中删除第一个元素,并返回该元素的值.此方法更改数组的长度. 2. 语法: arr.shift() 3. 参数:/ 4. 返回值:从数组中删除的元素(当数组为空时返回undefined). 代码如下: 方法一: var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; var arr2 = []; Array.prototype.copyS
JS数组方法slice()用法实例分析

本文实例讲述了JS数组方法slice()用法.分享给大家供大家参考,具体如下: slice()方法 slice(),它能基于当前数组中的一个或多个创建一个新数组.可以接受一或两个参数,即要返回的起始和结束位置. 一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项. 两个参数:该方法返回起始和结束位置之间的项(但不包括结束位置的项). slice不会影响原始数组. 结束位置小于起始位置,返回空数组. 可以接受负数,用数组长度加上该负数来确定相应位置. var arr = [
JS数组方法reduce的用法实例分析

本文实例讲述了JS数组方法reduce的用法.分享给大家供大家参考,具体如下: 数组方法 reduce 用来迭代一个数组,并且把它累积到一个值中. 使用 reduce 方法时,你要传入一个回调函数,这个回调函数的参数是一个累加器 (比如例子中的 previousVal) 和当前值 (currentVal). reduce 方法有一个可选的第二参数,它可以被用来设置累加器的初始值.如果没有在这定义初始值,那么初始值将变成数组中的第一项,而 currentVal 将从数组的第二项开始. 使用 re
JavaScript数组方法-系统性总结详解

目录数组常用方法数组元素增添和删除操作数组头部操作数组尾部任意位置增删数组拼接数组转换成字符串截取数组数组排序方法排序顺序翻转数组迭代方法数组遍历查找返回值为下标返回值为内容数组遍历处理 callback(value[,index[,array]]) callback(total,value[,index[,array]]) 数组其他方法总结首先总结的意义就是让杂乱无章变得更加井然有序,这样在使用的过程思路会更加清晰. 数组使用方法注意点: 变异方法和非变异方
JavaScript数组方法实例详解

目录简介创建数组创建方法详解方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill() (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和
JavaScript数组reduce()方法使用实例详解

目录前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平总结前言今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer
JavaScript中自带的 reduce()方法使用示例详解

1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if
玩转JavaScript OOP - 类的实现详解

概述当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"
javascript 用函数实现继承详解

一.知识储备: 1.枚举属性名称的函数: (1)for...in:可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性) (2)Object.keys():返回数组(可枚举的自有属性) (3)Object.getOwnPropertyNames():所有的自有属性 3.属性的特性:数据属性和存取器属性 (1)数据属性:可写(writable) 可枚举(enumerable) 可配置(configurable) 值(value) 数据属性只有一个简单的值: (2)存取器属性: 写
常用JavaScript正则表达式汇编与示例详解

1.1 前言目前收集整理了21个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IP地址. 十六进制颜色. 日期. 微信号.车牌号.中文正则等.表单验证处理必备,赶紧收藏吧! 还会陆续加入新的正则进来,大家多提宝贵意见! 2.1 用户名正则 2.1.1 基本用户名正则在做用户注册时,都会用到用户名正则校验. 定义基本用户名命名规则如下: 最短4位,最长16位 {4,16} 可以包含小写大母 [a-z]
jQuery中each方法的使用详解

概述: each() 方法规定为每个匹配元素规定运行的函数. 返回 false 可用于及早停止循环,相当于break. 返回 true 可以结束本次循环,相当于continue. 语法: $(selector).each(function(index,element){ }) index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" 选择器) $(selector).each(function(){ }) $.each(array,functi
KnockoutJS数组比较算法实例详解

这篇文章主要介绍了KnockoutJS数组比较算法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下前端开发中,数组是一种非常有用的数据结构.这篇博客会解释并分析KnockoutJS实现中使用的数据比较算法. 算法的目的 KnockoutJS使用MVVM的思想,view model中的数组元素会对应data model中的数组数据,当用户进行输入或者请求后台时,数组数据会发生变更, 从而带动UI的更新.例如购物车类的页面,用户可以通过点击
JavaScript中的函数式编程详解

函数式编程函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变,与函数式编程相对的是命令式编程.我们有这样一个需求,给数组的每个数字加一: // 数组每个数字加一, 命令式编程 let arr = [1, 2, 3, 4]; let newArr = []; for(let i = 0; i < arr.length; i++){ newArr.push(arr[i] + 1); } console.log(newArr)