reduce
首先理解reduce做了什么? [源码link](ECMAScript® 2022 Language Specification (tc39.es))
▼reduce()的参数:
callback (就是上面的那个reducer)
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array 可选
调用reduce()的数组
initialValue 可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错
🌟回调函数第一次执行时，accumulator 和currentValue的取值有两种情况： 1.如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值； 2.如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。
❗**注意：**如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
❗❗❗如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。
Object.defineProperty(Array.prototype,'myReduce',{
value:function (callback) {
//特殊处理
if (this===null){
throw new TypeError('reduce called on null or undefined!');
}
if (typeof callback!=='function'){
throw new TypeError(callback + 'is not a function!');
}
//o是进行reduce的对象
let o=Object(this);
//>>>0: 将任意js值转换为数字,且不会出现NaN
let len=o.length>>>0;
let k=0;
let value;
if (arguments.length>=2){ //有initialValue
value=arguments[1];
}else {
//k表示的是index; 猜测是为了排除[ <3 empty items>, 1, 2 ]的情况
//这里的k可以理解为开始reduce的位置
while (k<len&&!(k in o)){
k++;
}
//如果k大于等于len,则说明起始位置已经超出了数组范围
//也就是表明这是一个空数组,而这个else分支为没有initialValue的情况,因此抛出错误
if (k>=len){
throw new TypeError('Reduce of empty array with no initial value');
}
//这里的value其实就是在指定accumulator
value=o[k++];
}
while (k<len){
//避免这种情况:[ <3 empty items>, 1, <1 empty item>, 2 ]
if (k in o){
value=callback(value,o[k],k,o);
}
k++;
}
return value;
}
});
▼这里进行逐行解析:
-
if(this==null) 没想通写这个的意义..., 因为只有Array才有我写的这个myReduce方法, 而null上无法定义prototype属性或者方法, 使用null.reduce报错是Cannot read property 'reduce' of null。感觉可以去掉这个判断 (源码中也没进行这个判断!)
-
if (typeof callback!=='function') 这个还是有必要的, reduce必须传入一个callback function
-
let o=Object(this); 感觉这里作用不大, 由于this是对象, 因此调用Object(this) 返回的仍是与this指向的对象的引用地址 也就是说 o===this :true。 可能是换一个变量来指向this？
-
let len=o.length>>>0; 更具鲁棒性，任何值都能转换为数字 NaN>>>0=0.... ,这我也不知道意义在哪, this应该为数组吧...
-
if (arguments.length>=2) 这里表示参数长度大于等于2，说明给出了initialValue，因此令value(在这里相当于accumulator)等于给出的第二个参数arguments[1] 。💣reduce写的是只有两个参数, 但你多传参数不会报错, 但多传的参数没有实质作用!
-
else表示参数小于或等于一个:
a. while (k<len&&!(k in o)) 这里是为什么呢? 首先先明确in操作符中k表示的是index!! 这里的k实际上是想找到数组中开始有值的起始位置。 因为存在着这种情况： let a=[]; a[3]=1; 那么这个数组就为 [ <3 empty items>, 1] 。然而在这种情况下 对应的empty item的索引采用 in 操作符判断是为false的。比如这个例子中 0 in o，1 in o，2 in o都为false，因此跳过这些为false的items我们就能找到起始位置3：1
b.if (k>=len) 当然数组可能为全空。比如说Array(4): [ <4 empty items>] , k表示起始位置, 当然也是在数组中的索引, 如果这个值在上一轮while循环后大于等于len, 那么说明这个数组为空! 并且这个else分支为没有initialValue的情况,因此抛出错误❌
c.value=o[k++]; 能走到这一步说明数组在没有initialValue的情况下是存在值的, k也是数组中的第一个值的索引, 因此我们将该值赋给value(相当于accumulator); 然后k++进行下面的while循环
-
while (k<len) 这里就是开始正式进行reduce中callback的调用了! 🌟当然这里也很重要!!! 满足了1.空数组但有initialValue 2.数组中只有一个值但没有initialValue 这两种情况直接返回value !!!
-
if (k in o) :对中间有empty item的考虑 [ <3 empty items>, 1, <1 empty item>, 2 ]
-
value=callback(value,o[k],k,o); 按照参数格式顺序填上就好, 具体如何执行不用去管
- value: accumulator
- o[k] : currentValue
- k: index
- o: array
改进后的简洁易懂版(不知道有没有错...)
Object.defineProperty(Array.prototype,'simpleReduce',{
value:function (callback,initialValue) {
if (typeof callback!=='function'){
throw new TypeError(callback+'not a function!');
}
let arr=Object(this);
let len=arr.length>>>0;
let index=0;
let accumulator;
if (initialValue){
accumulator=initialValue;
}else {
while (index<len&&!(index in arr)){
index++;
}
if (index>=len){
throw new TypeError('Reduce of empty array with no initial value!');
}
accumulator=arr[index++];
}
while (index<len){
if (index in arr){
accumulator=callback(accumulator,arr[index],index,arr);
}
index++;
}
return accumulator;
}
})
