Tabla de contenido
Prefacio:
Hace dos días, cuando estaba en el grupo de agua, descubrí que alguien no sabía lodash, lo que me sorprendió. ¿No es lodash conocido por la gente de front-end? Sitio web oficial de Lodash
¿Por qué elegir lodash?
Tomando prestadas las palabras de lodash:
Lodash facilita JavaScript al facilitar el trabajo con matrices, números, objetos, cadenas y más. El enfoque modular de Lodash es ideal para:
- Matriz poligonal, objeto y cadena
- Manipular y probar valores
- Crear una función que se ajuste a la función
Tal vez todavía piense que lodash no es atractivo para usted. Pongámoslo de esta manera, lodash es una de las bibliotecas de herramientas más famosas en la comunidad front-end, que proporciona muchas funciones de herramientas de alta eficiencia y alta compatibilidad; Corte, usando una función anti-vibración de estrangulamiento, clonación profunda y muchas otras funciones de uso común.
Mira el estado de lodash
¡Cómo evaluar si un proyecto es genial o no, la cantidad de me gusta y descargas son las más intuitivas!
¿Cómo usar lodash?
1. Instalar lodash
npm i --save lodash2. Introducir lodash
Referencias globales (en desuso, por supuesto):
principal.js
index.vue; Use aleatoriamente un método de encapsulación lodash, aquí use random para generar aleatoriamente números entre 0-10
<script setup>
import {getCurrentInstance} from "vue"
const {proxy} = getCurrentInstance()
console.log(proxy.lodash.random(0,10))
</script>
2. Importación bajo demanda
En realidad, hay bastantes formas de introducir a pedido. Daré ejemplos uno por uno. Todavía uso el aleatorio de lodash como ejemplo. No introduzcas lodash y similares en main.js
1. Número aleatorio del 10 al 100
<script setup>
import _random from "lodash/random"
console.log(_random(10,100))
</script>2.100-1000 números aleatorios
<script setup>
import {random} from "lodash"
console.log(random(100,1000))
</script>3. Números aleatorios de 1000-10000
<script setup>
import {random as _random} from "lodash"
console.log(_random(1000,10000))
</script>En cuanto a cuál es fácil de usar, depende de la situación específica y las preferencias personales. Permítanme hablar sobre la mía. Actualmente estoy usando la solución 1, porque la función _xxx me permite saber que esta función es lodash cuando miro hacia atrás. el código Las funciones internas son más fáciles de interpretar.
Hay funciones más simples y útiles en lodash, que se extraen del desarrollo de los desarrolladores durante muchos años. ¡Después de mucho trabajo duro, son muy confiables!
¿Todavía necesitamos lodash?
Mi respuesta es sí, aunque en nuestro trabajo diario, a menudo usamos la sintaxis nativa de js, y creo que el paquete lodash parece ser más problemático de usar, pero aun así recomiendo usar lodash como una biblioteca de herramientas adicional. ¡forme una sintaxis js nativa como modo principal y lodash como modo complementario! Por ejemplo, cuando se trata de usar deep copy, throttling y anti-shake, podemos usarlo directamente en lodash, lo cual es muy conveniente y no causará redundancia de código, y no hay necesidad de copiar código relacionado de otros lugares. . Y también podemos mirar el código fuente de lodash, aprender del código de los predecesores, ¿por qué no hacerlo?
Entonces, dado que el lodash es tan bueno, ¿por qué parece que no es tan popular ahora?
En primer lugar, en los últimos años, los navegadores y la tecnología web se han desarrollado con relativa rapidez, es decir, han abandonado el escenario, los navegadores admiten mejor la sintaxis es y la palabra compatibilidad parece mencionarse cada vez menos. En segundo lugar, la herramienta de compilación puede compilar el código es6+ en es5 compatible con los navegadores, y la compatibilidad de la sintaxis de alto nivel también se ha resuelto mejor.
Pero como biblioteca de herramientas js de nivel superior, por supuesto que tiene sus méritos. En cuanto a si usarlo o no, ¡el benévolo ve al benévolo y el sabio ve la sabiduría!
dar algunos ejemplos más
filtrar
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)) //原生
suma
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))
¡Para más cosas buenas, descubramos por ti mismo ovo!