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

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>

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

猜你喜欢