lodash⽂档解释：通过 iteratee 遍历集合中的每个元素。 每次返回的值会作为下⼀次 iteratee 使⽤。 如果没有提供 accumulator，则集合中的第⼀个元素作为 accumulator。 iteratee 会传⼊4个参数：(accumulator, value, index|key, collection)。
当看到官⽅⽂档解释的时候有点懵，接下来我们通过源代码逐⼀分析。
/***** duce *****/
import arrayReduce from './.internal/arrayReduce.js'
import baseEach from './.internal/baseEach.js'
import baseReduce from './.internal/baseReduce.js'
function reduce(collection, iteratee, accumulator) {//此处可见reduce⽀持3个参数(collection-可遍历对象，
iteratee-处理函数，accumulator-初始值)
const func = Array.isArray(collection) ? arrayReduce : baseReduce //可遍历对象是否是数组，如果是则调⽤arrayReduce，否则调⽤baseReduce
const initAccum = arguments.length < 3//判断是否传⼊accumulator，如果未传⼊则使⽤可遍历对象的第⼀个值作为初始值
return func(collection, iteratee, accumulator, initAccum, baseEach)
}
export default reduce
/***** duce *****/
/***** lodash.arrayReduce *****/
function arrayReduce(array, iteratee, accumulator, initAccum) {//直接遍历数组，如果accumulator有值就使⽤其作为初始值，否则使⽤数组的第⼀个值作为初始值
let index = -1
const length = array == null ? 0 : array.length
if (initAccum && length) {
accumulator = array[++index]
}
while (++index < length) {
accumulator = iteratee(accumulator, array[index], index, array)//对数组中的内容按照iteratee⽅法进⾏叠加
}
return accumulator
}
export default arrayReduce
/***** lodash.arrayReduce *****/
/***** lodash.baseReduce *****/
function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
eachFunc(collection, (value, index, collection) => {
accumulator = initAccum
(initAccum = false, value)//此处的括号不理解，请阅读后续⽂章
: iteratee(accumulator, value, index, collection)
})
return accumulator
}
export default baseReduce
/
***** lodash.baseReduce *****/
/***** lodash.baseEach *****/
import baseForOwn from './baseForOwn.js'
import isArrayLike from '../isArrayLike.js'
function baseEach(collection, iteratee) {
if (collection == null) {
return collection
}
if (!isArrayLike(collection)) {//isArrayLike⽤于判断是否是类数组，具体判断⽅法可参考⽂章(udao/)
return baseForOwn(collection, iteratee)//通过Object.keys⽅法来遍历⾮类数组对象。
}
const length = collection.length
const iterable = Object(collection)
let index = -1
js argumentswhile (++index < length) {
if (iteratee(iterable[index], index, iterable) === false) {
break
}
}
return collection
}
export default baseEach
/
***** lodash.baseEach *****/
上述类容如果和我⼀样对JS⽤法理解不透彻，那么可能就回遇到以下的问题：
1. (varible_01 = value_01, varible_02 = value_02, ... , value_last)在js中是如何解析的？
2. isArrayLike中所指的类数组究竟是什么？
3. Object.keys是什么？怎么⽤？
接下来就对上述问题逐⼀解释，希望能给⼤家帮助。
问题解答(⼀) - JS中括号的使⽤
js中括号有以下的使⽤场景
1. 提⾼优先级
2. 函数参数⽤括号包含
3. JS中⽴即函数的使⽤
4. 条件中判断语句包含于括号
5. 执⾏单个或多个表达式 <-
例⼦：
console.log((1, 2, variable_01 = 3, 3 + 4, variable_02 = 4));// console: 4
console.log(variable_01);// console: 3
console.log(variable_02);// console: 4
问题解答(⼆) - 对象，类数组，数组
数组定义：单独变量存储的⼀系列的值，其索引从0开始⾃然增长，其中值可以是任何的js数据，并且包含⼀个名为Length的属性，⽤于表⽰数组元素的个数。
对象定义：单独变量可以包含多个其它变量，其它变量是⼀组⽆序的由键-值对组成的数据集。
类数组：只要包含从零开始，且⾃然递增的整数作为健名，并且定义了length表⽰元素个数的对象。
数组-对象-类数组代码：
var arr = [1,2,3]; //数组
var obj = {a:1,b:2,c:3}; //对象
var isArrLike = {0:1,1:2,2:3,length:3}; //类数组
如果想进⼀步了解isArrayLike⽅法的细节，请点击
问题解答(三) - Object.keys
由于是基础JS⽅法介绍，此处⼤量引⽤MDN⽂章 毕竟没有⽐官⽅解释更权威的答案了:)
Object.keys() ⽅法会返回⼀个由⼀个给定对象的⾃⾝可枚举属性组成的数组，数组中属性名的排列顺序和使⽤ for…in 循环遍历该对象时返回的顺序⼀致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。
描述：Object.keys 返回⼀个所有元素为字符串的数组，其元素来⾃于从给定的object上⾯可直接枚举
的属性。这些属性的顺序与⼿动遍历该对象属性时的⼀致。
例⼦：
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
/
/ getFoo is a property which isn't enumerable
var myObj = ate({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
还有⼀个与Object.keys相似的⽅法ies，⽤于返回⼀个给定对象⾃⾝可枚举属性的键值对数组，具体的⽤法可参考
以上内容如有错误还望斧正。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论