原理部分
JavaScript 在ES6版本后提供了一些更加便捷的方法供开发者使用,实现原理其实是在对应的构造函数原型提供方法。然后供开发者使用。接下来让我们自定义这些ES6提供的简易函数吧。
方法的实现原理
ES6提供的一些方法,底层主要是用for循环实现的,咱们在使用过程中也主要是传递callback
来控制输出结果。后边的实现也主要是下边的结构。
Array.prototype.xxx = function (callback) {
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this)
// 通过这个callback 控制结果
}
}
}
代码实现
// 案例数据
var arr = [
{
name: "张三",
id: 1
},
{
name: "李四",
id: 2
},
{
name: "王麻子",
id: -1
}
]
forEach(数组每个元素都执行一次回调函数)
Array.prototype.forEach = function (callback) {
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this)
}
}
}
filter(检测数值元素,并返回符合条件所有元素的数组)
Array.prototype.filter = function (callback) {
let temp = []
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
temp.push(this[i])
}
}
}
return temp
}
map(通过指定函数处理数组的每个元素,并返回处理后的数组)
Array.prototype.map = function (callback) {
let temp = []
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
temp.push(callback(this[i], i, this))
}
}
return temp
}
some(检测数组元素中是否有元素符合指定条件)
Array.prototype.some = function (callback) {
let temp = false;
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
temp = true
break
}
}
}
return temp
}
every(检测数值元素的每个元素是否都符合条件)
Array.prototype.every = function (callback) {
let temp;
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
temp = false
break
} else {
temp = true
}
}
}
return temp
}
find (返回符合传入测试(函数)条件的数组元素)
Array.prototype.find = function (callback) {
let temp;
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
temp = this[i]
break
}
}
}
return temp
}
findIndex(返回符合传入测试(函数)条件的数组元素索引)
Array.prototype.findIndex = function (callback) {
let temp;
if (callback && typeof (callback) === 'function') {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
temp = i
break
}
}
}
return temp
}