Table of contents
Foreword:
Two days ago, when I was in the water group, I found that someone didn't know lodash, which shocked me. Isn't lodash known to the front-end people? Lodash official website
Why choose lodash?
To borrow the words of lodash:
Lodash makes JavaScript easier by making it easier to work with arrays, numbers, objects, strings, and more. Lodash's modular approach is ideal for:
- Traverse array, object and string
- Manipulating and testing values
- Create a function that conforms to the function
Maybe you still think that lodash is not attractive to you. Let’s put it this way, lodash is one of the most famous tool libraries in the front-end community, providing a lot of high-efficiency and high-compatibility tool functions; Cutting, using a throttling anti-shake function, deep cloning and many other commonly used functions!
Look at the status of lodash
How to evaluate whether a project is great or not, the number of likes and downloads are the most intuitive!
How to use lodash?
1. Install lodash
npm i --save lodash2. Introduce lodash
Global references (deprecated of course):
main.js
index.vue; Randomly use a lodash encapsulation method, here use random to randomly generate numbers between 0-10
<script setup>
import {getCurrentInstance} from "vue"
const {proxy} = getCurrentInstance()
console.log(proxy.lodash.random(0,10))
</script>
2. Import on demand
There are actually quite a few ways to introduce on-demand. I will give examples one by one. I still use lodash’s random as an example. Don’t introduce lodash and the like in main.js
1. Random number from 10-100
<script setup>
import _random from "lodash/random"
console.log(_random(10,100))
</script>2.100-1000 random numbers
<script setup>
import {random} from "lodash"
console.log(random(100,1000))
</script>3. Random numbers of 1000-10000
<script setup>
import {random as _random} from "lodash"
console.log(_random(1000,10000))
</script>As for which one is easy to use, it depends on the specific situation and personal preferences. Let me talk about mine. I am currently mainly using solution 1, because the _xxx function allows me to know that this function is lodash when I look back at the code. The functions inside are easier to interpret.
There are more simple and useful functions in lodash, which are extracted from the development of developers for many years. After a lot of hard work, they are very reliable!
Do we still need lodash?
My answer is yes, although in our daily work, we often use the native syntax of js, and I think lodash package seems to be more troublesome to use, but I still recommend using lodash as an additional tool library. The writing project is to form a native js syntax as the main mode, and lodash as the supplementary mode! For example, when it comes to using deep copy, throttling and anti-shake, we can directly use it in lodash, which is very convenient, and it will not cause code redundancy, and there is no need to copy related code from other places. And we can also look at the source code of lodash, learn from the code of the predecessors, why not do it?
So since lodash is so good, why does it feel that it is not so popular now?
Firstly, in recent years, browsers and web technology have developed relatively rapidly, ie has left the stage, browsers have better support for es syntax, and the word compatibility seems to be mentioned less and less. Second, the compilation tool can compile es6+ code into es5 supported by browsers, and the compatibility of high-level syntax has also been better resolved.
But as a top-level js tool library, of course it has its merits. As for whether to use it or not, the benevolent sees the benevolent and the wise sees wisdom!
give some more examples
filter
import _filter from "lodash/filter"
const list = [{name:'aa',age:10},{name:'bb',age:18},{name:'aa',age:30}]
console.log(_filter(list,item=>item.age>18)) //lodash
console.log(list.filter(item=>item.age>18)) //原生
sum
import _sum from "lodash/sum"
const list = [1,2,3]
console.log(_sum(list))
function getSum(total, num) {
return total + num;
}
console.log(list.reduce(getSum))
For more good things, let's find out by yourself ovo!