js自写一个适用于object对象的forEach方法

2022-07-16 00:39:10 浏览数 (2)

本文章代码运行环境为edge103.0.1264.44 (正式版本) (64 位)

理解需了解js原型链和对象的原型对象:

1.js的array对象都有一个forEach(elem, index, arr)方法:

代码语言:javascript复制
let arr = [1, 2, 3, 4, 5];
arr.forEach((elem, index, arr)=>{
    console.log("输出:",elem,index);
})
//console输出如下:
//sentry.0fafaa00.js:1 输出:  1 0
//sentry.0fafaa00.js:1 输出:  2 1
//sentry.0fafaa00.js:1 输出:  3 2
//sentry.0fafaa00.js:1 输出:  4 3
//sentry.0fafaa00.js:1 输出:  5 4

//查看arr.__proto__.forEach和Array.prototype.forEach
arr.__proto__.forEach
//ƒ forEach() { [native code] }

Array.prototype.forEach
//ƒ forEach() { [native code] }

arr.__proto__ === Array.prototype
//true

可知Array的原型对象上就定义了forEach方法。

2.检测js的object是否支持forEach():

代码语言:javascript复制
let obj = {
    name: "hello",
    age: 22,
    gender: 0    
}
obj.forEach((value, key, oriObj)=>{
    console.log("输出:", value, key);
})
//console输出如下:
/*VM978:6 Uncaught TypeError: obj.forEach is not a function
    at <anonymous>:6:5
(anonymous) @ VM978:6*/

//查看obj.__proto__.forEach和Object.prototype.forEach
obj.__proto__.forEach
//undefined

Object.prototype.forEach
//undefined

obj.__proto__ === Object.prototype
//true

可以看到Object的原型对象上并没有定义forEach方法。

3.定义适用于object对象的可枚举属性的forEach方法:

代码语言:javascript复制
//callback:传入forEach的处理每个属性的函数
Object.prototype.forEach = function (callback) {
            let keys= Object.keys(this);//this指向调用该方法的object对象;keys是this指向的object对象的所有可枚举属性的键数组
            for(let i = 0; i < keys.length; i  ){//key为键数组中的每一个字符串索引,like '0', '1', '2';
                callback(this[keys[i]], keys[i], this);//keys[key]即键,"name", "age", "gender";this[keys[key]]即为键对应的值:"hello",,22, 0      
            }
        }

4.验证forEach方法是否可行:

代码语言:javascript复制
obj.forEach((value, key, obj)=>{
            console.log("value = ", value, "key = ", key); 
        })
        
//console输出如下

//VM2918:2 value =  hello key =  name
//VM2918:2 value =  22 key =  age
//VM2918:2 value =  0 key =  gender

可以看出forEach方法现在适用于object对象了,但是注意!!!

这里定义的Object.prototype的forEach不同于Array.prototype.forEach!!!

代码语言:javascript复制
Array.prototype.forEach
//ƒ forEach() { [native code] }
Object.prototype.forEach
/*ƒ (callback) {
            let keys= Object.keys(this);//this指向调用该方法的object对象;keys是this指向的object对象的所有可枚举属性的键数组
            for(let i = 0; i < keys.length; i  ){//key为键数组中的每一个字符串索引,like '0', '1', '2';*/
Array.prototype.forEach === Object.prototype.forEach
//false

5.结论:可以自行定义适用于object对象的forEach方法,但和array对象的forEach方法是不一样的。

0 人点赞