AI工具平台 为你提供最新AI工具及常用工具的一站式平台

前端

Underscore

Underscore.js 是一个在前端开发里非常实用的 JavaScript 工具库，它提供了大量的函数式编程工具，帮助开发者更高效地处理数组、对象、函数等数据结构，且不依赖其他库，可以在任何 JavaScript 环境中使用。

链接直达手机查看

Underscore.js 是一个在前端开发里非常实用的 JavaScript 工具库，它提供了大量的函数式编程工具，帮助开发者更高效地处理数组、对象、函数等数据结构，且不依赖其他库，可以在任何 JavaScript 环境中使用。下面从几个方面详细介绍：

特点

函数式编程风格：提供了众多实用的高阶函数，支持链式调用，让代码更简洁、易读和可维护。
跨浏览器兼容：能在各种主流浏览器中稳定运行，无需担心兼容性问题。
轻量级：文件体积小，加载速度快，不会给项目带来过多负担。

常用功能

数组操作

map：对数组中的每个元素执行指定的函数，并返回一个新数组。

javascript

const numbers = [1, 2, 3];
const squared = _.map(numbers, num => num * num);
console.log(squared); // 输出: [1, 4, 9]

filter：过滤数组中的元素，返回满足条件的元素组成的新数组。

javascript

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = _.filter(numbers, num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

reduce：对数组中的元素进行累积操作，返回一个最终结果。

javascript

const numbers = [1, 2, 3, 4, 5];
const sum = _.reduce(numbers, (total, num) => total + num, 0);
console.log(sum); // 输出: 15

对象操作

keys：返回对象的所有键组成的数组。

javascript

const person = { name: 'John', age: 30 };
const keys = _.keys(person);
console.log(keys); // 输出: ['name', 'age']

values：返回对象的所有值组成的数组。

javascript

const person = { name: 'John', age: 30 };
const values = _.values(person);
console.log(values); // 输出: ['John', 30]

extend：将一个或多个对象的属性复制到目标对象。

javascript

const target = { name: 'John' };
const source = { age: 30 };
const extended = _.extend(target, source);
console.log(extended); // 输出: { name: 'John', age: 30 }

函数操作

debounce：创建一个防抖函数，在指定时间内只执行一次。

javascript

function search() {
    console.log('Searching...');
}
const debouncedSearch = _.debounce(search, 300);
// 连续调用 debouncedSearch 函数，只有在最后一次调用后的 300 毫秒后才会执行

throttle：创建一个节流函数，在指定时间内最多执行一次。

javascript

function resize() {
    console.log('Resizing...');
}
const throttledResize = _.throttle(resize, 500);
// 连续调用 throttledResize 函数，每隔 500 毫秒执行一次

使用示例

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underscore.js Example</title>
    <!-- 引入 Underscore.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>

<body>
    <script>
        const numbers = [1, 2, 3, 4, 5];
        const doubled = _.map(numbers, num => num * 2);
        console.log(doubled); // 输出: [2, 4, 6, 8, 10]
    </script>
</body>

</html>