初学JavaScript库Lodash

初学JavaScript库Lodash

什么是Lodash?

看官方的解释A modern JavaScript utility library delivering modularity, performance & extras.有道词典翻译一下一个提供模块化、高性能和附加功能的现代JavaScript实用程序库。

_.clone和.cloneDeep的区别

首先看官方文档.clone和.cloneDeep，之后看这篇文章Lodash’s _ .clone vs _. cloneDeep and References in JS。

简单的说，_.clone只是做了一个备份，只是一个引用，对这个备份进行操作也会对影响原来的本体。_.cloneDeep的话，是完全拷贝，但是这是一个全新的本体，对这个本体进行操作不会影响原来的本体。

集合Collection

_.reduce

_.reduce(collection, [iteratee=_.identity], [accumulator])

一个案例

_.reduce([1, 2], function(sum, n) {
  return sum + n;
}, 0);
// => 3

executing sequence: 
sum = 0, n = 1, return 1
sum = 1, n = 2, return 3

_.reduce({ 'a': 1, 'b': 2, 'c': 3 }, function(result, value, key) {
    (result[value] || (result[value] = [])).push(key)
    return result
}, {})
// => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed)  

尝试调试结果

import _ from 'lodash'

_.reduce({ 'a': 1, 'b': 2, 'c': 3 }, function(result, value, key) {
    console.log("result", result);
    console.log("value", value);
    console.log("key", key);
    (result[value] || (result[value] = [])).push(key);
    console.log("result", result);
    return result;
}, {})

浏览器中console输出

result {}, value 1, key a, result {1: Array(1)}
result {1: Array(1)}, value 2, key b, result {1: Array(1), 2: Array(2)}
result {1: Array(1), 2: Array(2)}, value 3, key c, result {1: Array(1), 2: Array(2), 3: Array(3)}

我的理解

(a || b)的意思是： 如果a存在的话，就用a，否则就用b


Executing Sequence:
result = {}, value = 1, key = a, {}[1] == { '1': } = [] => { '1': [] }, { '1': [] }[1].push('a') => { "1": ["a"] }


'1' as key, why it's string not wrapped with '' rather than 1? it's not a variable. I think sometimes  a: '1', '1': '2' => a: '2', '1' is just a key to store value. as for why it's not 1, maybe it's because 1 is number, how could a number be a key? follow naming rule i guess.

key = a or 'a'? i prefer it's 'a',but it's a, remember it's not variable but string
 
push('a')  we want to push a string value

另一个案例：

查看webpack - Guides - Authoring Libraries - Authoring a Library
链接

import _ from 'lodash'
import numRef from './ref.json'

function numToWord(num) {
    return _.reduce(numRef, (accum, ref) => {
        console.log("accumulator:", accum);
        console.log("ref:", ref);
        return ref.num === num ? ref.word : accum
    }, '')
}

console.log(numToWord(3))

chrome浏览器控制台输出

accumulator: 
ref: {num: 1, word: "One"}
accumulator: 
ref: {num: 2, word: "Two"}
accumulator: 
ref: {num: 3, word: "Three"}
accumulator: Three
ref: {num: 4, word: "Four"}
accumulator: Three
ref: {num: 5, word: "Five"}
accumulator: Three
ref: {num: 0, word: "Zero"}
Three

我的分析：

首先这个(accum, ref)，第一个是累加器accumulator，第二个是item，就是每一项如numRef这个json数组里的，每一个对象，或者说是每一个value，看lodash文档有提到 The iteratee is invoked with four arguments: (accumulator, value, index|key, collection).

这个[accumulator] (*): The initial value.初始值是''，空字符串
return 1 === 3 ? 'One' : '',  => return '', accumulator = ''
return 2 === 3 ? 'Two' : '', => return '', accumulator = ''
return 3 === 3 ? 'Three' : '' => return 'Three', accumulator =  'Three'
return 4 === 3 ? 'Four' : 'Three' => return 'Three', accumulator = 'Three'
...

最后numToWord(3)返回的值是个字符串'Three'

同样

function WordToNum(word) {
    return _.reduce(numRef, (accum, ref) => {
        console.log("accumulator:", accum);
        console.log("ref:", ref);
        return ref.word === word && word.toLowerCase() ? ref.num : accum;
    }, -1)
}


WordToNum('Four')

chrome浏览器控制台输出

accumulator: -1
ref: {num: 1, word: "One"}
accumulator: -1
ref: {num: 2, word: "Two"}
accumulator: -1
ref: {num: 3, word: "Three"}
accumulator: -1
ref: {num: 4, word: "Four"}
accumulator: 4
ref: {num: 5, word: "Five"}
accumulator: 4
ref: {num: 0, word: "Zero"}

分析和上面的类似