Angular中文博客

分享让你更聪明

Angular中怎么使用lodashjs?

浏览:73次 评论:0次 日期:2024年11月12日 9:20:07 作者:管理员

Lodash 是一个非常流行的 JavaScript 实用工具库,旨在简化许多常见的编程任务,如数组操作、对象操作、字符串处理、函数式编程等。它提供了大量的工具函数,可以帮助开发者更高效地处理数据和编写代码。

首先安装lodash

# 安装 lodash
npm i lodash
# 安装 @types/lodash
npm i @types/lodash -D

# 或者使用yarn
yarn add lodash
yarn add @types/lodash -D

全部引入使用

import {Component, OnInit} from '@angular/core';
// 全部引入
import * as _ from 'lodash';
// import * as lodash from 'lodash'; // _也可以是其他字符

@Component({
    selector: 'app-ngx-lodash',
    templateUrl: './ngx-lodash.component.html',
    styleUrls: ['./ngx-lodash.component.scss']
})
export class NgxLodashComponent implements OnInit {

    constructor() {
    }

    ngOnInit(): void {
        // 使用
        console.log(_.min(this.arrNum)); // -45
        console.log(_.max(this.arrNum)); // 5464
        // console.log(lodash.min(this.arrNum)); // -45
        // console.log(lodash.max(this.arrNum)); // 5464
    }

    private arrNum: Array<number> = [1, 123, 5464, 567, 678, 798, -45, 45, 221, 56, 4, 8, 9, 5, 2];

}

按需引入使用

import {Component, OnInit} from '@angular/core';
// 按需引入
import {min, max} from 'lodash';

@Component({
    selector: 'app-ngx-lodash',
    templateUrl: './ngx-lodash.component.html',
    styleUrls: ['./ngx-lodash.component.scss']
})
export class NgxLodashComponent implements OnInit {

    constructor() {}

    ngOnInit(): void {
        // 使用
        console.log(min(this.arrNum)); // -45
        console.log(max(this.arrNum)); // 5464
    }

    private arrNum: Array<number> = [1, 123, 5464, 567, 678, 798, -45, 45, 221, 56, 4, 8, 9, 5, 2];
}

以上是在angular中使用lodash的方法。

发表评论