JavaScript中6大数组方法

最新推荐文章于 2023-07-26 20:41:04 发布
最新推荐文章于 2023-07-26 20:41:04 发布
阅读量177 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doulvme/article/details/107961791
版权

forEach(callback[,object])  ES5新增遍历方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			//常用数组方法
			//foreach方法
			var personArr = [
					{
						name : "张三",
						sex : "男",
						age : 18,
						dec : "你好"
					},
					{
						name : "李四",
						sex : "男",
						age : 19,
						dec : "你真帅"
					},
					{
						name : "王五",
						sex : "女",
						age : 18,
						dec : "长头发"
					},
					{
						name : "赵六",
						sex : "男",
						age : 20,
						dec : "憨憨的"
					},
					{
						name : "孙七",
						sex : "女",
						age : 19,
						dec : "傻白甜"
					},
					{
						name : "刘八",
						sex : "男",
						age : 25,
						dec : "抽烟喝酒打牌"
					}
				];
				//forEach(callback[,object])  ES5新增遍历方法
				
				 personArr.forEach(function(ele,index,self){
					//console.log(ele,index,self);
					//ele  数组的每一项
					//index  索引
					//self数组本身
					console.log(this);//指向的时window
				},{name:"jack"});//传第二个对象参数 改变this的指向
				
				personArr.forEach(function(ele,index,self){
					this[index].innerHTML=ele.name;
				},document.getElementsByTagName("li"));//改变this指向
			
		</script>
	</body>
</html>

自己封装forEach:

Array.prototype.myForEach=function(func){
				//this指向window
				var _arr=this;//数组备份
				var len=_arr.length;
				var param2=arguments[1]||window;
				for(var i=0;i<len;i++){
					func.apply(param2,[_arr[i],i,_arr]);
				}
			}
			personArr.myForEach(function(ele,index,self){
				console.log(ele,index,self);
					this[index].innerHTML=ele.name;
				},document.getElementsByTagName("li"));//改变this指向

filter过滤   返回一个boolean  如果为true留在新数组中  否则不留

var newArr=personArr.filter(function(ele,index,self){
					//console.log(ele,index,self);
					console.log(this);//默认是window
					//过滤  如果性别是男加入新数组
					if(ele.sex=="男"){
						return true;
					}else{
						return false;
					}
					
				},{name:"jack"});
				console.log(newArr);

自己封装filter方法：

Array.prototype.myFilter=function(func){
					var _arr=this;
					var len=_arr.length;
					var param2=arguments[1]||window;
					var newArr=[];
					for(var i=0;i<len;i++){
						func.apply(param2,[_arr[i],i,_arr])?newArr.push(_arr[i]):"";
					}
					return newArr;
				}
				var newArr=personArr.myFilter(function(ele,index,self){
					console.log(ele,index,self);
					console.log(this);//默认是window
					//过滤  如果性别是男加入新数组
					if(ele.sex=="男"){
						return true;
					}else{
						return false;
					}
					
				},{name:"jack"});
				console.log(newArr);

map  返回一个新的数组   可以对原数组里面的参数进行修改

var newArr=personArr.map(function(ele,index,self){
				//console.log(ele,index,self);
				//console.log(this);
				ele.age+=10;
				return ele.age;
			},{name:"jack"});
			console.log(newArr);

自己封装map

Array.prototype.myMap=function(func){
				var _arr=this;
				var len=_arr.length;
				var param2=arguments[1]||window;
				var newArr=[];
				for(var i=0;i<len;i++){
					newArr.push(func.apply(param2,[_arr[i],i,_arr]));
				}
				return newArr;
			}
			var newArr=personArr.myMap(function(ele,index,self){
				//console.log(ele,index,self);
				//console.log(this);
				ele.age+=10;
				return ele.age;
			},{name:"jack"});
			console.log(newArr);

every some 返回一个boolean值
every  所有为true才为true

some   一个为true就为true

var flag=personArr.every(function(ele,index,self){
					console.log(ele,index,self,this);
					//return true;
					return ele.age>18;//判断年龄是否都大于18岁   如果全部都大于返回true否则返回false
				},{name:"jack"});
				
				console.log(flag);

自己封装every

Array.prototype.myEvery=function(func){
				var _arr=this;
				var len=_arr.length;
				var param2=arguments[1]||window;
				var flag=true;
				for(var i=0;i<len;i++){
					if(!func.apply(param2,[_arr[i],i,_arr])){
						flag=false;
						break;
					}
				}
				return flag;
			}
			var flag=personArr.myEvery(function(ele,index,self){
					console.log(ele,index,self,this);
					//return true;
					return ele.age>18;//判断年龄是否都大于18岁   如果全部都大于返回true否则返回false
				},{name:"jack"});
				
				console.log(flag);

reduce 上一次执行完成的返回值  作为下一次执行的初始值

personArr.reduce(function(prevValue,ele,index,self){
					//prevValue  以前的值
					//第二个参数代表初始值，不代表改变this指向
					console.log(prevValue,ele,index,self);
					return prevValue;//第一次执行完成的返回值  作为下一次执行的初始值
				},{name:"Jack"});

reduce自己封装

Array.prototype.myReduce=function(func,initValue){
					var _arr=this;
					var len=_arr.length;
					var param2=arguments[2]||window;
					for(var i=0;i<len;i++){
						initValue=func.apply(param2,[initValue,_arr[i],i,_arr]);
					}
					return initValue;
				}
				personArr.myReduce(function(prevValue,ele,index,self){
					//prevValue  以前的值
					//第二个参数代表初始值，不代表改变this指向
					console.log(prevValue,ele,index,self);
					return 123;//第一次执行完成的返回值  作为下一次执行的初始值
				},{name:"Jack"});

 

soosgo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js系列6-数组在对象中的使用
zyshahaha的博客
03-06 222
1 利用new Array()创建数组（还有直接定义的方法） var arr1=new Array();//创建了一个新的数组 var arr2=new Arry(2);//创建了一个长度为2的数组 var arr3=new Array(2,3);//等价于[2,3]。 2判断数组 instanceof() Array.isArray() 返回true或者false 3 在数组中添加...
JavaScript 教程「6」：数组
村雨遥
04-21 270
JavaScript 教程第 6 弹
JavaScript（六）：数组
weixin_53912712的博客
12-17 646
数组
JS基础--6(数组)
weixin_42306249的博客
04-18 221
数组 概念 将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，这个集合称为数组 数组是一组有序的数据集合。数组内部可以存放多个数据，不限制数据类型，并且数组的长度可以动态调整 创建数组 数组字面量：[] 获取数组元素 数组变量名后面直接加[index]方式 index 索引值，下标，从0开始 可以通过index获取某一项值之后，使用或者更改 如果索引值超过了数组最大项，相当于内部存储的是undefined 数组的长度 变量名.length 数组的长度与数组最后一项的下标存在关系
JavaScript基础（六） （数组）
weixin_50828895的博客
12-20 503
初始数组一、初识数组1、创建数组2、访问数组元素3、数组遍历二、数组元素操作1、修改数组长度2、新增或修改数组元素3、筛选数组元素4、删除指定的数组元素5、反转数组元素顺序三、二维数组1、创建二维数组2、二维数组求和3、二维数组转置 一、初识数组 1、创建数组 创建数组的两种常见方式的用法： 使用“new Array()”创建数组 使用“[ ]”字面量来创建数组 // 使用new Array()创建数组 var arr1 = new Array(); // 使用字面量来创建数组 var arr1 = [
JavaScript使用shift方法移除素组第一个元素实例分析
10-24
这个操作的时间复杂度为O(n)，因此频繁对大数组使用shift方法可能会影响程序的性能。 4. shift方法可以与push()方法结合使用，实现数组的两端操作。例如，可以在数组末尾添加新元素，然后用shift方法移除数组的第一...
JavaScript应用实例-大数组包含小数组.js
12-09
JavaScript应用实例-大数组包含小数组.js
JavaScript数组去重实现方法小结
10-15
对于大数组，考虑使用`Set`或ES5的`indexOf()`。需要注意的是，直接修改原数组的方法可能会对其他依赖于原始数据的代码产生影响，因此，除非必要，通常推荐使用不改变原数组的方法。此外，还可以根据具体情况选择...
big-sum:大数的和数组表示
04-28
大数的和数组表示。 安装 npm i big-sum --save 如何使用？ const bigSum = require ( 'big-sum' ) ; bigSum ( [ 1 , 9 ] , [ 2 , 9 ] ) // 48 const { rawSum } = require ( 'big-sum' ) ; const bigWrap = ...
JavaScript中几种排序算法的简单实现
10-23
归并排序的思想是将原始数组切分成更小的数组，直到每个小数组只有一个位置，然后将小数组归并成较大的数组，直到最后只有一个排序完毕的大数组。归并排序的时间复杂度为O(nlogn)，是一种稳定的排序方法。 以上四种...
JavaScript——大数组的合并问题及不同数组合并方法的探究
qq_34205932的博客
08-04 267
JavaScript——大数组的合并问题及不同数组合并方法的探究 最近在处理模型数据的时候出现了一个问题，当合并不同模型的vertex等数据的时候，从网上查了查都说Array.prototype.push()这个好，结果我使用了这个方法却报错了，后来改用concat才成功运行，实践出真知，所以要写一篇文章来记录测试不同的数组合并方式的快慢(其实是写代码写的头疼，放松一下)。 测试数据 let arr1=arr2=arr3=arr4=arr5=arr6=[]; let arrF1=arrF2=arrF3=ar
JS 数组
qq_42650433的博客
01-02 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var arr = [];//定义一个空数组 alert(arr.length);//0 var arr1 = [true
js中几种常用的数组方法
仙姑不仙的博客
11-26 564
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
ES6中JavaScript中那些常用的数组方法
weixin_43242112的博客
06-24 290
ES6中那些常用的数组方法1、forEach（）2、map（）3、some（）、every（）4、filter（）5、find（）6、findIndex（）7、includes（）、indexOf（）8、reduce（callback，初始值）含数组去重方法封装 1、forEach（） 这个函数没有返回值。 基本使用 let arr = ['one','two','three'] arr.forEach(function(item,index){ console.log(item) co
JavaScript基础--es6新增的数组方法
JJ_Smilewang的博客
05-12 4355
今天给大家介绍一些es6新增的常用数组方法。 1. 映射数组 map()方法 目的：为了操作原数组，但不改变原数组的值 作用：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会对空数组进行检测 返回值: 新数组，一定和原始数组长度一样，不改变原数组 格式：数组.map(function(item,index,arr) { }) ① item 数组的每一项（元素） ② index 数组的每一项下标（索引号） ...
js求数组最大值 的8中方法
最新发布
一步一个脚印，踏实努力，向着目标前进
07-26 8007
根据实际需求和使用环境，您可以选择适合的方法来求取数组中的最大值。如果数组中不包含NaN或Infinity，并且使用ES6及以上版本的JavaScript，可以使用扩展运算符和Math.max()方法。这些方法也可以用来求取数组中的最大值，根据实际情况选择适合的方法。注意，对于包含NaN或Infinity的数组，需要使用适当的方法来处理。这种方法使用ES6的扩展运算符将数组展开为参数，然后使用Math.max()方法求取最大值。这种方法使用递归的方式，每次比较数组的第一个元素和剩余元素的最大值。
JS判断数组的六种方法详解
weixin_34279061的博客
01-07 6482
在JS中，数组是属于Object类型的，也就是属于引用类型（引用类型存放在堆内存中，在栈内存会有一个或者多个地址来指向这个堆内存）。 所以对于引用类型，我们不能typeof来判断具体的类型，因为返回的都是‘object’。 接下来，我将介绍六种判断方法，并且对这六种方法进行逐一解析 ① instanceof 操作符判断 用法：arr in...
数组方法
diaojw090的博客
03-30 447
整理目前所用过的数组方法，学习了新增的es6方法。 1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素 let arr = [1,2...
ES6数组的各种方法
热门推荐
PeaYing的博客
08-31 5万+
1.ES6数组的各种方法 2.forEach（）函数 ①数组名.forEach（function（数组中一个元素的值）{对这个值进行处理....}） ②数组名.forEach（test）test为方法名，不用加（），把函数引用传进去 ③利用函数引用这种方式的话，会自己把每个值传进去，不需要用（）传进去 3.map（）方法 ①map（）方...
js判断一个大数组是否包含另一个小数组
03-31
可以使用数组的includes()方法来判断一个大数组是否包含另一个小数组。具体步骤如下： 1. 定义一个大数组和一个小数组。 2. 使用includes()方法判断小数组中的每个元素是否都包含在大数组中。 3. 如果小数组中的每个元素都包含在大数组中，则说明大数组包含小数组。 示例代码如下： ```javascript let bigArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let smallArray = [3, 5, 7]; let isContained = smallArray.every(item => bigArray.includes(item)); console.log(isContained); // true ``` 在上面的代码中，使用了every()方法来判断小数组中的每个元素是否都包含在大数组中，如果都包含，则返回true，否则返回false。最终结果为true，说明大数组包含小数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值