ECMAScript5——用ES3.1书写ES5新增的数组方法

最新推荐文章于 2024-10-30 18:30:30 发布
最新推荐文章于 2024-10-30 18:30:30 发布
阅读量363 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： ECMAScript5 文章标签： JavaScript ES5新增数组方法 ECMAScript5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/thunderevil35/article/details/80559952
本文详细介绍了如何手动实现JavaScript中的数组方法，包括forEach、map、fill等，通过具体实例展示了这些方法的工作原理。

1. forEach( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	// 首先去除ES5的forEach方法
	Array.prototype.forEach = null;

	Array.prototype.forEach = function(fun) {
		// 本质就是在函数内部循环
		for (var i = 0; i < this.length; i++) {
			// this[i] 表示成员值 i 表示索引值  this 表示原数组
			fun(this[i], i, this)
		}
	}

	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	//使用forEach 测试
	arr.forEach(function(value, index, arr) {
		console.log(value, index)
	})
	</script>
</body>
</html>

2. map( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的map方法
		Array.prototype.map = null;
		// 实现Map方法
		Array.prototype.map = function(fun) {
			// 定义空数组
			var arr = [];
			// 循环每一项
			for (var i = 0; i < this.length; i++) {
				// this[i] 表示 成员值  i 表示索引值 this 原数组
				var item = fun(this[i], i, this);
				// 放入到数组中
				arr.push(item);
			}
			// 返回数组
			return arr;
		}

		// 定义数组
		var arr = ["a", "b", "c", "d", "e", "f", "g"]
		// 使用map循环
		var result = arr.map(function(value, index, arr) {
			// console.log(value, index)
			return value + "1"
		})
		console.log(result)
	</script>
</body>
</html>

3. fill( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的fill方法
		Array.prototype.fill = null;
		// 实现fill方法
		Array.prototype.fill = function(item) {
			// 循环
			for (var i = 0; i < this.length; i++) {
				// 将每一个成员设置为传递的参数
				this[i] = item;
			}
			// 返回this
			return this;
		}

		// 定义数组
		var arr = ["a", "b", "c", "d", "e", "f", "g"]

		// 测试
		var result = arr.fill(1).fill(2).fill(3);
		console.log(result)
	</script>
</body>
</html>

4. some( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的some方法
		Array.prototype.some = null;
		Array.prototype.some = function(fun) {
			// 循环每一个成员
			for (var i = 0; i < this.length; i++) {
				// 判断
				if (fun(this[i], i, this)) {
					// 如果有一个成员满足条件就返回true
					return true;
				}
			}
			// 如果都不满足条件 才返回false
			return false
		}

		// 定义数组
		var arr = ["a", "b", "c", "d", "e", "f", "g", 123]

		var result = arr.some(function(value, index, arr) {
			return typeof value === "number"
		})

		console.log(result)
	</script>
</body>
</html>

5. every( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的every方法
		Array.prototype.every = null;
		// 实现every方法
		Array.prototype.every = function(fun) {
			// 循环每一个成员
			for (var i = 0; i < this.length; i++) {
				// 判断
				if (!fun(this[i], i, this)) {
					// 如果有一个成员不满足条件就返回false
					return false;
				}
			}
			// 如果都满足条件，就返回true
			return true;
		}

		// 定义数组
		var arr = ["a", "b", "c", "d", "e", "f", "g", 123]

		var result = arr.every(function(value, index, arr) {
			return typeof value === "string"
		})

		console.log(result)
	</script>
</body>
</html>

6. filter( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 实现filter方法
		Array.prototype.filter = null;
		Array.prototype.filter = function(fun) {
			// 定义空数组
			var arr = [];
			// 遍历每个成员
			for (var i = 0; i < this.length; i++) {
				// 判断
				if (fun(this[i], i, this)) {
					// 如果满足条件就进入数组
					arr.push(this[i])
				}
			}
			// 返回数组
			return arr
		}

		// 定义数组
		var arr = ["a", "b", "c", "d", 1, 2, 3, 4, 5];

		var result1 = arr.filter(function(value, index, arr) {
			return typeof value === "number"
		})
		console.log(result1)
	</script>
</body>
</html>

7. reduce( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的reduce方法
		Array.prototype.reduce = null;
		// 实现reduce 方法		
		Array.prototype.reduce = function(fun) {
			// 用于中专的值
			var result = this[0]
			// 循环每一个成员 因为redece 要从第二个成员开始遍历，所以i要从1开始
			for (var i = 1; i < this.length; i++) {
				result = fun(result, this[i], i, this) 
			}
			// 返回result
			return result
		}

		// 定义数组
		var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
		// 求相加的结果
		var result = arr.reduce(function(pre, value, index, arr) {
			return pre + value;
		})

		console.log(result)
	</script>
</body>
</html>

8. reduceRight( )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 移除ES5的reduceRight方法
		// Array.prototype.reduceRight = null;

		// 实现reduceRight 方法
		Array.prototype.reduceRight = function(fun) {
			// 定义变量用于中专
			var result = this[this.length - 1];
			// 循环每一个成员
			// // 因为reduceRight的特殊性 要特意少循环一次 不可以从this.length - 1开始循环
			for (var i = this.length - 2; i >= 0; i--) {
				var result = fun(result, this[i], i , this)
			}
			// 返回result
			return result;
		}
	
		// 定义数组
		var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
		// 求相加的结果
		var result = arr.reduceRight(function(pre, value, index, arr) {
			return pre + value;
		})

		console.log(result)
	</script>
</body>
</html>
ES5 新特性一览表
前端知识分享喵
05-04 1251
除了正常的运行模式（混杂模式），ES5中添加了第二种运行模式：“严格模式”（strict mode）顾名思义，这种模式，使得JavaScript在更严格的语法下运行"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。
ES2023 新特性解析_数组与对象的现代化操作指南
最新发布
九天的专栏
07-15 571
ES2023 包含多个新增功能，主要集中在数组、对象以及异步编程方面，强调不可变性、函数式风格，并提升代码的安全性和表达力。
【ECMAScript标准】深入解析ES5：现代JavaScript的基石
佚名程序员
10-30 1046
ECMAScript 5（ES5）是JavaScript语言的一个重要版本，于2009年正式发布。尽管JavaScript在不断发展，ES5依然是现代JavaScript的基础，广泛应用于各种Web开发项目中。本文将详细介绍ES5的关键特性、与之前版本的区别，以及对开发者的影响，帮助你更好地理解和应用这一标准。1. 什么是ECMAScript？ECMAScript是由ECMA国际组织发布的一种脚本语言标准，JavaScript是其最著名的实现。
ES3、ES5、ES6数组常用的方法
weixin_45674894的博客
10-10 842
Array对象 js中内置了一个Array构造函数,可以创建数组对象,本文主要介绍数ES3、ES5、ES6数组中一些常用的方法。 join(字符串分隔符) // 语法：arr.join(分隔符) var arr = ['刘备','张飞','关羽']; // 不传参数，默认每一项之间以 逗号 进行拼接 var str = arr.join(); //刘备,张飞,关羽 //按 - 进行拼接 va...
ECMAScript 5 - JavaScript 5
吴钦飞
06-17 932
ECMAScript 5 - JavaScript 5 1. ECMAScript 5 是什么 ECMAScript 5 也被称为 ES5 和 ECMAScript 2009。 本章介绍 ES5 的一些最重要的特性。 2. ECMAScript 5 的新特性 “use strict” 指令 String.prototype.trim() Array.isArray() Array.prototype.forEach() Array.prototype.map() Array.prototype.filte
ECMAScript5知识点总结
mangoyiy的博客
10-16 856
ES5的数据类型： 类型 值 区别 注释 Undefined undefined 基础数据类型 Boolean true/false 基础数据类型 True/False不是Boolean值 String “somestring” 基础数据类型 Number 2,3,11… 基础数据类型 Null null
es3的语法来模拟es5的bind方法
weixin_30670965的博客
07-03 128
// 简单版 Function.prototype.bind = function(context) { var self = this; return function() { self.apply(context, arguments); }; ...
javascript ES5文档
07-30
ES5 是 ECMAScript 的第五版标准，发布于 2009 年，并且被大多数现代浏览器所支持。 **1.1 赋值** 在 JavaScript 中，使用 `=` 运算符来进行赋值操作。例如： ```javascript var a = 1; ``` 等同于： ```...
JavaScript ES5 数组操作与迭代
JavaScript ES5（ECMAScript 5）是JavaScript的第五个版本，是一种用于定义脚本语言标准的规范。在本章中，我们将介绍JavaScript ES5的定义、历史背景以及重要特性。 ## 2. 数组基础操作 数组是一种用于存储多个...
弃用ES5：marmosad-backend的新选择
ES5是JavaScript语言的标准化版本，它于2009年发布，是ES3.1的官方后续版本，为JavaScript开发者提供了许多新特性和改进。 2. JavaScript的演进: JavaScript从诞生至今已经发展了多个版本，ES5作为其中的一环，为其...
ES5与ES6中数组实用的数据结构之Array.of-fill,如何修改数组生成新的数组
单车去旅行的博客
12-03 509
一、ES5怎么生成新的数组 因为数组是引用类型的，所以生成新数组会改变原来的数组 1.push方法 用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。 var arr = []; arr.push(1) // 1 arr.push('a') // 2 arr.push(true, {}) // 4 arr // [1, 'a', true, {}] 2.pop方法 ...
ue5 目标RHT 移动版vulkan ES3.1 SM5 是什么意思
AppNinja 开发手记
03-24 4176
SM5：是Shader Model 5的缩写，是DirectX 11的着色器模型，用于支持高级着色器特性，如几何着色、计算着色等。目标RHT：指的是UE5游戏引擎的渲染管线，即目标渲染硬件类型（Render Hardware Target），它可以是PC、主机或移动设备等不同的硬件平台。ES3.1：是OpenGL ES 3.1的缩写，是一种用于移动设备的图形API，用于实现高性能的图形渲染。Vulkan：是一种图形API，用于在不同的硬件平台上实现高性能的图形渲染。
第十四节：数组去重
qq_43628158的博客
11-30 272
1、数组去重 使用标签语句 var arr = [1,2,4,5,2,6,8,4,9,2]; var narr = []; for(let i=0;i<arr.length;i++){ inside:{ for(var j=0;j<narr.length;j++){ if(arr[i]==narr[j]){ break inside; //跳出内部循环 } } narr.push
着色器编译目标等级
weixin_30781775的博客
02-22 319
无论编写 表面着色器还是其他常规着色器程序时，HLSL资源可以别编译为不同的“着色器模型”。更高的着色器编译器目标允许使用更多现代GPU功能，但是可能造成在老的GPU或者平台上不能正常工作。 编译器目标通过指令#pragma target来指定，比如： #pragma target 3.5 默认的编译器目标 默认情况下，unity将着色器编译为支持最低目标级别(2.5)；在...
ES3,ES5,ES6的区别
qq_36457584的博客
07-09 5505
默认参数：{ es3.es5默认参数的写法： function f(x,y,z){ if（y===undefined）{ y = 7; } if(z === undefined){ z = 42; } return x + y +z } console..og(f(1,3)); } { es6默认参数： function f(x,y = 7 , z= ...
UE4虚幻引擎开发手机游戏
热门推荐
痞子龙3D编程
05-11 1万+
该文章来自用户转载 点击阅读原文 UE4虚幻引擎作为游戏开发引擎之一，在很多项目中都会使用到。下面就给大家分享下如何使用UE4开发高品质的手机游戏。 作者介绍 大纲 •介绍 •UE4 针对3A级手游的渲染管线和特征集 •使用ES3.1， Vulkan， Metal Api的高端机图形处理讲解 •即将发布的UE4移动平台特性 介绍 当前市场上使用
谈谈JavaScript版本演进史及ES3、ES5区别和特性
chuangxin的专栏
12-19 4635
根据RedMonk发布的2018年初编程语言排行榜显示，JavaScript高居榜首，说明JavaScript的火热程度，其从90年代初诞生到现在经历了几个大的版本迭代：ES3、ES5和ES6。本文讨论ES5的特性及ES5、ES3的区别。从ES5新增的保留关键字，ES5新增的对象属性定义、对象方法、数组方法，函数bind方法，JSON对象和Strict模式等方面详细阐述了ES5的新特性及ES3的替代实现。
ES6数组的fill方法
weixin_34062469的博客
11-22 752
fill()方法，使用自己想要的参数替换原数组内容，但是会改变原来的数组。 该方法有三个参数：fill(value, start, end)value：想要替换的内容。start：开始位置（数组的下标），可以省略。end：替换结束位置（数组的下标），如果省略不写就默认为数组结束。 特别注意 eg：let arr=[1,2,3,4,5] brr=arr.fill(0) console...
ES3~ES6数组的方法总结
luo1914_的博客
04-19 395
ES3数组的方法 push() arr.push(值) 向数组的最后一个位置添加一个元素 语法：arr.push() 返回值：改变之后的数组的长度 改变原数组 var arr = ["aa","bb","cc"] var res = arr.push('dd') console.log(res); //返回4 pop() arr.pop(值) 删除数组的最后一个元素 语法：arr.p...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值