Codewords are not easy, and helpful students hope to pay attention to my WeChat public account: Code program life, thank you! The code is self-used and fetched.
In this issue, we rewrite a very commonly used array extension method filter .
By convention, let’s take a look at the use of native filters first
var arr = [
{
name: "张三",
age: 34,
},
{
name: "李四",
age: 25,
},
{
name: "王五",
age: 21,
},
{
name: "刘六",
age: 28,
},
];
var obj = {
name: "Jacky",
age: 3,
};
var newArr = arr.filter(function (item, index, array) {
console.log(this);
return item.age > 25;
}, obj);
console.log(newArr);
Filter is the same as its name. We can know that in addition to traversing the array, it can perform filtering and filtering functions.
Through the console output, we can find that after we pass in the second parameter of the filterobj , the thispointer in the callback function is passed in obj.
Through the new array newArr returned by return, we can know that the judgment can be made in the return in the callback, and the judgment result truewill be returned to newArr.
So item.age > 25only Zhang San and Liu Liu.
Well, after we understand the native filter , we start to rewrite it.
Array.prototype.myFilter = function (callBack) {
var _arr = this;
var _len = _arr.length;
var _arg2 = arguments[1] || window;
var _newArr = [];
var _item;
for (var i = 0; i < _len; i++) {
_item = deepClone(_arr[i]);
callBack.apply(_arg2, [_item, i, _arr]) ? _newArr.push(_item) : "";
}
return _newArr;
};
Compared with the rewrite of the map method in the previous issue, the biggest difference is that in the apply parameter, filter will perform a ternary expression comparison, so truethat it will be pushgiven to the new array. Other operations are similar.
Also, if you don’t know deepClonethe function and content of this method, just look at the blog of the previous issue.
Let's test if there is any difference between our rewritten myFilter method and the original filter .
function deepClone(obj) {
let newObj = obj.push ? [] : {
}; //如果obj有push方法则 定义newObj为数组，否则为对象。
for (let attr in obj) {
if (typeof obj[attr] === "object") {
newObj[attr] = deepClone(obj[attr]);
} else {
newObj[attr] = obj[attr];
}
}
return newObj;
}
Array.prototype.myFilter = function (callBack) {
var _arr = this;
var _len = _arr.length;
var _arg2 = arguments[1] || window;
var _newArr = [];
var _item;
for (var i = 0; i < _len; i++) {
_item = deepClone(_arr[i]);
callBack.apply(_arg2, [_item, i, _arr]) ? _newArr.push(_item) : "";
}
return _newArr;
};
var arr = [
{
name: "张三",
age: 34,
},
{
name: "李四",
age: 25,
},
{
name: "王五",
age: 21,
},
{
name: "刘六",
age: 28,
},
];
var obj = {
name: "Jacky",
age: 3,
};
var newArr = arr.filter(function (item, index, array) {
console.log(this);
return item.age > 25;
}, obj);
console.log(newArr);
console.log('------');
var newArr2 = arr.myFilter(function (item, index, array) {
console.log(this);
return item.age > 25;
}, obj);
console.log(newArr2);
Through the console output, we can find that there is no difference between the myFilter method and the filter method, including the thispointer in the callback .
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat public account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible Number, please pay attention, thank you
