underscorejs-reduce学习

2022-09-09 19:34:04

2.3 reduce

2.3.1 语法:

_.reduce(list, iteratee, [memo], [context])

2.3.2 说明：

reduce方法把list中元素归结为一个单独的数值。

list可以为数组，对象，字符串和arguments
iteratee 会传第四个参数(memo, element, index, list)或(memo, value, key, list)
iteratee 需要有返回值
memo是函数的初始值
context可以改变iteratee内部的this

2.3.3 代码示例：

示例一：reduce可以操作数组和对象等集合

var sum1 = _.reduce(['1', '2', '3'], function (memo, element) {

    return memo + element;

});

var sum2 = _.reduce({

    a: 1,

    b: 2,

    c: 3

}, function (memo, element) {

    return memo + element;

});

console.log(sum1); //=> String 123

console.log(sum2); //=> Number 6

示例二：iteratee的参数

iteratee里的参数比_.each和_.map多了一个memo。

如果外面没传memo,那么list的第一个值传为memo，并会少循环一次。

_.reduce([1, 2, 3], function (memo, element, index, list) {

    //只有两次

    console.log(memo, element, index, list);

    //=> 1 2 1 [1, 2, 3]

    //=> 3 3 2 [1, 2, 3]

    return memo + element;

});

_.reduce([1, 2, 3], function (memo, element, index, list) {

    //三次

    console.log(memo, element, index, list);

    //=> 0 1 0 [1, 2, 3]

    //=> 1 2 1 [1, 2, 3]

    //=> 3 3 2 [1, 2, 3]

    return memo + element;

}, 0);

示例三：iteratee 需要有返回值

var result = _.reduce([1, 2, 3], function (memo, element, index, list) {

    /*return*/ memo + element; //不要忘记return

}, 0);

console.log(result);

示例四：设置初始值

var result = _.reduce([1, 2, 3], function (memo, element) {

    return memo + element;

}, 10);

console.log(result); //=> Number 16

示例五：context可以改变iteratee内部的this

var res = _.reduce([1, 2], function (memo, element) {

    console.log(this);

    //=> Object {no: 10}

    //=> Object {no: 10}

    return memo + element + this.no;

}, 0, {no : 10});

console.log(res); //=> Number 23

2.3.4 _.inject和_.foldl是_.reduce的别名。

inject：注入。

fold:折叠，foldl即fold left

var arr1 = _.inject([1, 2, 3], function (memo, element) {

    return memo + element;

});

console.log(arr1); //=> Number 6

var arr2 = _.foldl([1, 2, 3], function (memo, element) {

    return memo + element;

});

console.log(arr2); //=> Number 6

2.3.5 拼接字符串

reduce方法很使在拼接字符串的时候使用。

var data = [{name: 'iori'}, {name: 'kyo'}];

var html = _.reduce(data, function(memo, element){

    return memo + '<p>' + element.name + '</p>';

}, ''); //这个空字符串一定要传

console.log(html); //=> <p>iori</p><p>kyo</p>

gitbook地址：https://www.gitbook.com/book/niec-fe/underscorejs/details

码农公寓