手写数组方法

一、手写 forEach

先调用一下数组的forEach()方法

var names = ['aaa', 'bbb', 'ccc']

names.forEach(function (item) {
	console.log(item) // aaa bbb ccc
})

根据以上分析：

1. 数组的原型上有个方法可供所有数组调用
2. 这个方法接受一个回调方法
3. 回调方法执行代码

基于以上分析实现 forEach 方法，不考虑 this 的指向问题：

Array.prototype.myForEach = function (fn) {
	for (var i = 0; i < this.length; i++) {
		fn(this[i], i, this)
	}
}

// 调用方法
var names = ['aaa', 'bbb', 'ccc']
names.myForEach(function (item, index, arr) {
	console.log(item, index, arr)
})
// aaa 0 ["aaa", "bbb", "ccc"]
// bbb 1 ["aaa", "bbb", "ccc"]
// ccc 2 ["aaa", "bbb", "ccc"]

二、手写 filter

先调用一下数组的filter()方法

var names = ['aaa', 'bbb', 'ccc']

var name = names.filter(function (item) {
	return item === 'aaa'
})

console.log(name) // aaa

根据以上分析：

1. 数组的原型上有个方法可供所有数组调用
2. 这个方法接受一个回调方法
3. 回调方法执行代码并有返回值

基于以上分析实现 filter 方法，不考虑 this 的指向问题：

Array.prototype.myFilter = function (fn) {
	for (var i = 0; i < this.length; i++) {
		var isFlag = fn(this[i], i, this)
		if (isFlag) {
			return this[i]
		}
	}
}

// 基本类型调用方法
var names = ['aaa', 'bbb', 'ccc']
var name = names.myFilter(function (item) {
	return item === 'aaa'
})
console.log(name) // aaa

// 复杂类型调用方法
var students = [
	{ id: 100, name: 'Mocha' },
	{ id: 200, name: 'Latte' },
]
var stu = students.myFilter(function (item) {
	return item.id === 100
})
console.log(stu) // {id: 100, name: 'Mocha'}