JavaScript中forEach和filter的用法和原理

203 阅读2分钟

JavaScript中有许多好用的数组方法,例如说forEach,filter...等等

那这些方法是都有什么用途呢?以及自己能否写一个方法出来替代呢?

forEach方法

日常用法

​ 我们拿到一组数据的时候,通常需要通过遍历循环拿到自己想要的数据。 forEach函数能够做到这一点,通常是这样使用的。例如说我们下面数组这种,需要遍历循环这个数组。就能得到以下结果。

参数传递

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数。可依次向 callback 函数传入三个参数:

  1. 数组当前项的值 (ele)
  2. 数组当前项的索引 (index)
  3. 数组对象本身 (self)
		var arr = [
      {name: 'abc', desc: '技术好', sex: 'm'}, 
			{name: 'adsds', desc: '技术好', sex: 'f'}, 
      {name: 'aaseed', desc: '技术好', sex: 'm'},
      {name: 'acccc', desc: '技术好', sex: 'f'}
    ]
    
    // forEach()
		arr.forEach(function (ele, index, self) {
			console.log(ele, ele.name, ele.sex);
		})

实现一个forEach()方法
		Array.prototype.forEach = function (func) {
			var len = this.length;
			var _this = arguments[1] != undefined ? arguments[1] : window;
			//_this 值的是可以传递this指向
			for (var i = 0; i < len; i++) {
				func.apply(_this, [this[i], i, this]);
			}
		}
		var obj = { name: 'feng' }
		function deal(ele, index, self) {
			console.log(ele, index, self, this);
		}

    arr.forEach(deal, obj);

​ 就能得到一个功能相同的方法

filter方法

日常用法

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。MDN如是说。例如说我们想要得到上面数组中name为accc的数据

		var newArr = arr.filter(function (ele, index, array) {
			return ele.name == 'acccc'
		})

传递参数
  • callback

    用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

    1. element数组中当前正在处理的元素。
    2. index可选正在处理的元素在数组中的索引。
    3. array可选调了 filter 的数组本身。
  • thisArg可选

    执行 callback 时,用于 this 的值。

实现一个myfilter方法()

​ 想到filter能够过滤想要的东西,那肯定是有遍历的。

	Array.prototype.myfilter = function (func) {
			var arr = [];
			var len = this.length;
			var _this = arguments[1] || window;
			for (var i = 0; i < len; i++) {
				func.apply(_this, [this[i], i, this]) && arr.push(this[i]);
			}
			return arr;

		}
		var obj = { name: 'feng' }

		var newArr = arr.myfilter(function (ele, index, self) {
			if (ele.sex == 'm') {
				return true;
			} else {
				return false;
			}
		})
		console.log(newArr);

​ 我们在调用myfilter方法把性别是男的过滤出来

如果你觉得我写得还有点意思或者对你有帮助,麻烦点个赞或者关注公众号 ProgrammerHe ,感谢阅读与关注,谢谢!