• 数组常用的方法介绍及使用及频率度（17个）

    1. forEach（频率高）

    1. 介绍：
      （1）循环遍历的方法：罗列出数组内的元素（可直接看见的）
      （2）forEach 接受一个函数作为参数（回调函数），回调函数会有两个形参（示例的 item 和 i）；第一个形参：数组当前循环项（item），第二个形参：数组当前循环项的索引（i）
      （3）forEach 返回值为（undefined）; forEach 中可改变引用类型中的属性值，但是不可以改变基本类型的值：js数组forEach方法的赋值问题
    2. 正常使用：
      const arr = [1, {name: 'zs'}, () => 'ls', null, undefined, NaN, true, 'ww', ['lb']];
arr.forEach((item, i) => {
	console.log(item, i)
})

      • 1
      • 2
      • 3
      • 4
      效果如下图：
      在这里插入图片描述
    3. 跳出循环：不支持 continue 和 break；但可以使用try catch实现跳出循环；
      const arr = [1, {name: 'zs'}, () => 'ls', null, undefined, NaN, true, 'ww', ['lb']];
try {
	arr.forEach((item, i) => {
		console.log(item, i)
		if (!item) throw item
	})
} catch (error) {
	console.log(`抛出错误：${error}`)
}
console.log('try catch 外同步函数')

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      效果如下图：在这里插入图片描述

    2. push（频率高）（方向与 unshift 相反）

    1. 介绍
      （1）往数组末尾添加一个或多个元素；并返回当前数组的长度（length）；
      （2）会改变原数组
    2. 正常使用
    	const arr = ['zs'];
	console.log(arr.push(999)); // 2
	console.log(arr); // ['zs', 999]
	console.log(arr.push('zs', [], {}, () => {}, true, undefined, null)); // 9
	console.log(arr); // ) ['zs', 999, 'zs', Array(0), {…}, ƒ, true, undefined, null]

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 配合 拓展运算符
    	const arr = ['ls'];
	const otherArr = [9, 8, 'zs'];
	arr.push(...otherArr);
	console.log(arr) // (4) ['ls', 9, 8, 'zs']

    • 1
    • 2
    • 3
    • 4

    3. pop （频率低）（方向与 shift 相反）（可以记不住但是必须知道有这个功能）

    1. 介绍
      （1）移除数组的最后一个元素，并返回被移除的元素；
      （2）会改变原数组
    2. 使用
    	const arr1 = [1, 2, 3, 4, 5, 'cs'];
	const arr2 = [2, () => {}];
	const arr3 = [3, {}];
	const arr4 = [4, null];
	const arr5 = [5, undefined];
	console.log(arr1.pop()); // cs
	console.log(arr2.pop()); // () => {}
	console.log(arr3.pop()); // {}
	console.log(arr4.pop()); // null
	console.log(arr5.pop()); // undefined
	console.log(arr1); // (5) [1, 2, 3, 4, 5]
	console.log(arr2); // [2]
	console.log(arr3); // [3]
	console.log(arr4); // [4]
	console.log(arr5); // [5]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    4. shift（频率低）（方向与 pop 相反）（可以记不住但是必须知道有这个功能）

    1. 介绍
      （1）移除数组的第一个元素，并返回被移除的元素；
      （2）会改变原数组
    2. 使用
    	const arr1 = ['cs', 1, 2, 3, 4, 5];
	const arr2 = [() => {}, 2];
	const arr3 = [{}, 3];
	const arr4 = [null, 4];
	const arr5 = [undefined, 5];
	console.log(arr1.shift()); // cs
	console.log(arr2.shift()); // () => {}
	console.log(arr3.shift()); // {}
	console.log(arr4.shift()); // null
	console.log(arr5.shift()); // undefined
	console.log(arr1); // (5) [1, 2, 3, 4, 5]
	console.log(arr2); // [2]
	console.log(arr3); // [3]
	console.log(arr4); // [4]
	console.log(arr5); // [5]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    5. unshift（方向与 push 相反）（可以记不住但是必须知道有这个功能）

    1. 介绍
      （1）往数组首位添加一个或多个元素；并返回当前数组的长度（length）；
      （2）会改变原数组
    2. 正常使用
    	const arr = ['cs'];
	console.log(arr.unshift(999)); // 2
	console.log(arr); // (2) [999, 'cs']
	console.log(arr.unshift('zs', [], {}, () => {}, true, undefined, null)); // 9
	console.log(arr); // (9) ['zs', Array(0), {…}, ƒ, true, undefined, null, 999, 'cs']

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 配合 拓展运算符
    	const arr = ['ls'];
	const otherArr = [9, 8, 'zs'];
	arr.unshift(...otherArr);
	console.log(arr) // (4) [9, 8, 'zs', 'ls']

    • 1
    • 2
    • 3
    • 4

    6. indexOf（频率高）（与 includes 类似）

    1. 介绍：
      （1）查找指定的元素并返回找到元素的索引，未找到则返回-1；
      （2）第一个参数：指定查找的元素；第二个参数：开始查找的索引（数组是索引，字符串是长度）
    2. 使用
    const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
console.log(arr.indexOf('ww')); // 2
console.log(arr.indexOf('ww', 2)); // 2
console.log(arr.indexOf('ww', 3)); // -1
console.log(arr.indexOf('zb')); // -1

    • 1
    • 2
    • 3
    • 4
    • 5

    7. includes （频率高）（与 indexOf 类似）

    1. 介绍：
      （1）查找数组是否包含指定值，包含则返回true，不包含则返回false；
      （2）第一个参数：指定的元素；第二个参数：开始查找的索引（数组是索引，字符串是长度）
    2. 使用
    const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
console.log(arr.includes('ww')); // true
console.log(arr.includes('ww', 2)); // true
console.log(arr.includes('ww', 3)); // false
console.log(arr.includes('zb')); // false

    • 1
    • 2
    • 3
    • 4
    • 5

    8. concat（频率低且不建议使用，合并一般使用展开运算符：… ）

    1. 介绍：
      （1）可合并多项数组元素；
      （2）接受多个参数，如果是数组：则会把数组第一维（[1, 2, [3, 4]]: 1和2 是一维数据， 3和4是二维数据）提取出来合并，如果不为数组：直接添加进合并数组里面;
      （3）不改变原数组；合并的时候会重新生成数组；并不是原有数组添加；如下示例中的原有arr；重新生成newArr
    2. 使用
    	const arr = [1];
	const newArr = arr.concat(1,{}, [1,3,4, () => {}], () =>{}, undefined, [[1], [2]])
	console.log(newArr) // (11) [1, 1, {…}, 1, 3, 4, ƒ, ƒ, undefined, Array(1), Array(1)]

    • 1
    • 2
    • 3
    1. 以 es6 的 展开运算符方式
    	const arr = [1, 2];
	const newArr = [...arr, 1, {}, () => {}, ...[1, 3, 4, () => {}]]
	console.log(newArr) // (9) [1, 2, 1, {…}, ƒ, 1, 3, 4, ƒ]

    • 1
    • 2
    • 3

    9. join（频率高）

    1. 介绍：
      （1）以自定义形式把数组转换成字符串；
      （2）第一个参数：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
      （3）不改变原数组；返回一个新值
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(arr.join()); // zs,ls,ww,zl,gq
	console.log(arr.join('-')); // zs-ls-ww-zl-gq
	console.log(arr.join('-+-')); // zs-+-ls-+-ww-+-zl-+-gq

    • 1
    • 2
    • 3
    • 4

    10. slice（建议频率高）

    1. 介绍
      （1）选取数组的一部分，并返回一个新数组。
      （2）第一个参数：规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取；slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。第二个参数：规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。（建议看完后再看示例）
      （3）不改变原数组；返回一个新值
      （4）开始选取的会被选中，结束选取的不会被选中
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(arr.slice(1)); // (4) ['ls', 'ww', 'zl', 'gq']
	console.log(arr.slice(1, 3)); // (2) ['ls', 'ww']
	console.log(arr.slice(-2)); // (2) ['zl', 'gq']
	console.log(arr.slice(-2, -1)); // ['zl']

    • 1
    • 2
    • 3
    • 4
    • 5

    11. splice（频率高）

    1. 介绍
      （1）从数组中添加或删除元素。
      （2）第一个参数：从数组何处开始删除或添加；第二个参数：删除多少个；未规定则以第一个参数为起点删除元素直至数组末端；后续N个参数：要添加到数组的新元素；位置为第一个参数
      （3）返回：如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
      （4）会改变原数组
    2. 使用
    	const arr1 = ['zs', 'ls', 'ww', 'zl', 'gq'];
	const arr2 = ['zs', 'ls', 'ww', 'zl', 'gq'];
	const arr3 = ['zs', 'ls', 'ww', 'zl', 'gq'];
	const arr4 = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(arr1.splice(2)); // (3) ['ww', 'zl', 'gq']
	console.log(arr1); // (2) ['zs', 'ls']
	console.log(arr2.splice(2, 1)); // ['ww']
	console.log(arr2); // (4) ['zs', 'ls', 'zl', 'gq']
	console.log(arr3.splice(2, 0, 'add1', 'add2', 'add3')); // []
	console.log(arr3); // (8) ['zs', 'ls', 'add1', 'add2', 'add3', 'ww', 'zl', 'gq']
	console.log(arr4.splice(2, 2, 'add1', 'add2', 'add3')); // (2) ['ww', 'zl']
	console.log(arr4); // (6) ['zs', 'ls', 'add1', 'add2', 'add3', 'gq']

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    12. reverse（可以记不住这个名字但是必须记住有这个功能）

    1. 介绍
      （1）反转原数组的元素顺序。并返回原数组
      （2）会改变原数组
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(arr.reverse()); // (5) ['gq', 'zl', 'ww', 'ls', 'zs']
	console.log(arr); // (5) ['gq', 'zl', 'ww', 'ls', 'zs']

    • 1
    • 2
    • 3

    13. sort（建议频率高）

    1. 介绍
      （1）对原数组的元素进行排序。返回原数组；默认排序顺序为按字母升序（当数字是按字母顺序排列时"40"将排在"5"前面）。
      （2）接受一个函数进行排序处理
      （3）会改变原数组
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq', 40, 5, '60', 7];
	const numbArr = [53, 234, 23, 34, 99, 24];
	console.log(arr.sort()); // (9) [40, 5, '60', 7, 'gq', 'ls', 'ww', 'zl', 'zs'];
	console.log(arr); // (9) [40, 5, '60', 7, 'gq', 'ls', 'ww', 'zl', 'zs'];
	const fn = function (a, b) {
		return a - b
	}
	console.log(numbArr.sort(fn)) // (6) [23, 24, 34, 53, 99, 234]
	console.log(numbArr.sort((a, b) => a - b)) // (6) [23, 24, 34, 53, 99, 234]
	console.log(numbArr.sort((a, b) => b - a)) // (6) [234, 99, 53, 34, 24, 23]
	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    14. flat（频率低）

    1. 介绍
      （1）将多维数组（[1, [2], [3], [ [4], [5] ] ]：1在一维，2和3在2维，4和5在三维，依次类推）转换成指定维度数组；默认只转一次；
      （2）第一个参数：进行N次转换（一次转换一维，N次转N维）
      （3）不改变原数组
      （4）进阶：当浏览器提示 flat is not a function 的时候；莫慌
    2. 使用
    	const arr = [1, [2], [3], [ [4], [5] ] ];
	console.log(arr.flat(1)); // (5) [1, 2, 3, Array(1), Array(1)]
	console.log(arr); // [1, Array(1), Array(1), Array(2)]
	console.log(arr.flat(Infinity)); // (5) [1, 2, 3, 4, 5]

    • 1
    • 2
    • 3
    • 4

    15. map（建议频率高）

    1. 介绍
      （1）通过指定函数处理数组的每个元素，并返回处理后的数组。
      （2）第一个参数：回调函数，具有两个形参（第一个：当前循环项， 第二个：当前循环项索引）；回调函数需有返回值（返回值则是数组当前循环项重构内容，不写 return 则为 undefined）
      （3）不改变原数组
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(
		arr.map((item , i)=> {
			return {
				name: item,
				idCard: i
			}
		})
	)
	// (5) [{…}, {…}, {…}, {…}, {…}]
	// 	0: {name: 'zs', idCard: 0}
	//	1: {name: 'ls', idCard: 1}
	//	2: {name: 'ww', idCard: 2}
	//	3: {name: 'zl', idCard: 3}
	//	4: {name: 'gq', idCard: 4}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    16. find（了解有印象就行）

    1. 介绍
      （1）返回满足条件（传入的函数）的第一个值；
      （2）不会改变原数组
    2. 使用
      const arr1 = [12, 16, 14, 19, 30, 99, 50];
const arr2 = [
	{ name: 'zs', age: 18},
	{ name: 'ls', age: 12},
	{ name: 'ww', age: 10},
]
console.log(arr1.find(v => v>18)); // 19
console.log(arr1); // (7) [12, 16, 14, 19, 30, 99, 50]
console.log(arr2.find(v => v.age>9)); // {name: 'zs', age: 18}
console.log(arr2.find(v => v.name === 'ls')); // {name: 'ls', age: 18}
console.log(arr2); // (3) [{…}, {…}, {…}]

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    17. findIndex （了解有印象就行）

    1. 介绍
      （1）返回满足条件（传入的函数）的第一个索引
      （2）不会改变原数组
    2. 使用
      const arr1 = [12, 16, 14, 19, 30, 99, 50];
const arr2 = [
	{ name: 'zs', age: 18},
	{ name: 'ls', age: 12},
	{ name: 'ww', age: 10},
]
console.log(arr1.findIndex(v => v>18)); // 3
console.log(arr1); // (7) [12, 16, 14, 19, 30, 99, 50]
console.log(arr2.findIndex(v => v.age>9)); // 0
console.log(arr2.findIndex(v => v.name === 'ls')); // 1
console.log(arr2); // (3) [{…}, {…}, {…}]

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    18. filter（建议频率高）

    1. 介绍
      （1）过滤掉数组中满足条件的元素
      （2）第一个参数： 回调函数，具有两个形参（第一个：当前循环项， 第二个：当前循环项索引）；回调函数需有返回值作为判断依据（true 或者 false）
      （3）返回：返回被过滤后的数组；如果没有满足条件的则返回空数组
      （4）不会改变原数组
    2. 使用
    	const arr = ['zs', 'ls', 'ww', 'zl', 'gq'];
	console.log(
		arr.filter((item , i)=> {
		console.log(i)
			return item === 'zs' || item === 'zl'
		})
	) // (2) ['zs', 'zl']
	console.log(arr) // (5) ['zs', 'ls', 'ww', 'zl', 'gq']

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    19. reduce（建议频率高）

    1. 介绍
      （1）将数组元素计算为一个值（从左到右）。
      （2）第一个参数： 回调函数，具有两个形参（第一个：前面项处理的结果， 第二个：即将被处理项）；回调函数返回处理逻辑；第二个参数：处理项的初始值，默认为undefined；
      （3）不改变原数组
    2. 使用
    	const arr1 = [53, 234, 23, 34, 99, 24];
	const arr2 = ['53', '234', '23', '34', '99', '24'];
	const arr3 = [['zs'], ['ls']];
	// 统计 arr 中各项之和
	console.log(arr1.reduce((pre, next) => pre + next)); // 467
	console.log(arr2.reduce((pre, next) => pre + next)); // '5323423349924'
	console.log(arr1); // (6) [53, 234, 23, 34, 99, 24]
	console.log(arr2); // (6) ['53', '234', '23', '34', '99', '24']
	console.log(arr3.reduce((pre, next) => {
		pre[next[0]] = next;
		return pre;
	}, {}))
	// {zs: Array(1), ls: Array(1)}
	//	ls: ['ls']
	//	zs: ['zs']

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    1. lodash插件中的keyBy功能简单实现（具体细节不考虑）
    	const arr =  [
		{
			name: '张三',
			age: 16
		},
		{
			name: '李四',
			age: 17
		},
		{
			name: '王五',
			age: 18
		},
	]
	const keyBy = (array, key) => {
		return array.reduce((pre, next) => {
			pre[next[key]] = next;
			return pre;
		}, {})
	}
	console.log(
		keyBy(arr, 'name')
	)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    参考文档

    1. 菜鸟教程-数组篇
  • 相关阅读:
    架构每日一学 1：成为一名架构师，你必须具有“战略意图”
    synchronized锁住的实例中是否所有方法的调用都参与锁竞争？
    R语言dplyr包进行数据分组聚合统计变换（Aggregating transforms）、计算dataframe数据的分组加和值(sum)
    【Redis】共同关注列表与基于Feed流的关注消息滚动分页推送的实现
    【前端】前端权限管理的实现方式：基于Vue项目的详细指南
    租赁小程序|租赁系统一种新型的商业模式
    Pytorch之LeNet-5图像分类
    超级实用网站+公众号合集
    Java项目硅谷课堂学习笔记-P9-整合网关与实现订单和营销管理模块
    如何在Linux下 自定义/编写 一个守护进程
  • 原文地址：https://blog.csdn.net/weixin_47436633/article/details/126398539