金融网站开发公司,宁波seo推广服务电话,阳泉哪里做网站,成都企业网站商城定制文章目录 Lodash 的痛点进入正题--Radash特点 举例几个常用的api 一说lodash应该大部分前端同学都知道吧#xff0c;陪伴我们好多年的JavaScript工具库#xff0c;但是自从 ES6 出现后就慢慢退出前端人的视线#xff0c;能ES6写的代码绝对不会用Lodash#xff0c;也不是完全… 文章目录 Lodash 的痛点进入正题--Radash特点 举例几个常用的api 一说lodash应该大部分前端同学都知道吧陪伴我们好多年的JavaScript工具库但是自从 ES6 出现后就慢慢退出前端人的视线能ES6写的代码绝对不会用Lodash也不是完全不用就是用的少了。 Lodash 的痛点 看过Lodash源码的都知道都是ES5的各种封装写的很繁琐各种处理Lodash 源码的学习成本真的很高ES6出现之后就彻底绑不住了ES6一个符号就能表示的Lodash还得去传参数啥的可读性还不高 最常见的比如说
访问嵌套对象属性时能够避免因为中间某个属性不存在而导致的错误Lodash使用_.get 函数
const user {profile: {address: {street: 123 Main St,city: Wonderland}}
};// ES6 可选链 ?.
const city user?.profile?.address?.city; // Wonderland 或 undefined
// ES6 空值合并 ??
const city2 user?.profile?.address?.city ?? Default City; // Wonderland 或 Default City// Lodash的_.get
const city3 _.get(user, profile.address.city, Default City); // Wonderland 或 Default City不知道es6那俩特性的这里简单说一下
ES6 可选链 可选链允许你安全地访问深层嵌套的对象属性即使某些中间属性不存在也不会抛出错误。这是通过在属性访问操作中使用问号?.来实现的。
ES6 空值合并 空值合并运算符??是一个逻辑运算符它在左侧的操作数为null或undefined时返回右侧的操作数否则返回左侧的操作数。
进入正题–Radash Radash 是一个新兴的 JavaScript 实用工具库它被设计为“新一代的 Lodash”并且在 GitHub 上拥有较高的星标数和稳定的下载量。现代化的设计和对TypeScript的原生支持 特点 零依赖 Radash 是一个零依赖的工具库这意味着它不依赖于任何第三方库。这样的设计使得 Radash 更加轻量级项目中使用 Radash 时只需要加载它本身无需加载额外的依赖。 对TypeScript的原生支持 Radash 完全使用 TypeScript 编写这为使用 Radash 的开发者提供了准确的类型定义。这样的设计使得在 TypeScript 项目中使用 Radash 变得更加安全和方便同时也减少了类型错误的可能性。 现代化功能 Radash 去除了 Lodash 中一些过时的函数并引入了许多新的实用功能。这些新功能旨在解决现代 JavaScript 中的问题同时也全面支持 ES6 的新特性。 易于理解和维护 Radash 的源代码易于理解对新手友好。源代码的维护以新手的可理解性为首要任务这使得开发者更容易学习和使用 Radash 的 API。 提供实用的工具函数 Radash 提供了 90 个实用函数涵盖了数组、对象、字符串、排序等多个方面的操作。这些函数旨在解决 JavaScript 中的常见问题同时提供了一些在 Lodash 中没有的新颖功能。 源码可读性高 Radash 的源码可读性高这使得开发者可以更容易地理解每个函数的工作原理。对于一些只需要特定功能的情况开发者甚至可以直接从 GitHub 复制相应的函数源码到自己的项目中使用。 性能优化 Radash 在设计时考虑了性能优化一些函数的性能甚至超过了 Lodash。 社区支持与活跃 Radash 在社区中获得了一定的关注和支持许多开发者对它的现代化设计和 TypeScript 友好性表示赞赏。随着时间的推移Radash 的社区可能会继续增长提供更多的资源和支持。 举例几个常用的api
list() - 创建数字序列 list() 函数可以动态地生成具有特定项的列表根据提供的参数进行灵活调整。 import { list } from radash;const numbers list(1, 5); // 创建从 1 到 5 的数字序列
console.log(numbers); // 输出: [1, 2, 3, 4, 5]retry() - 重试失败的异步操作 retry() 函数用于重试失败的异步操作直到成功或达到最大重试次数。 import { retry } from radash;async function fetchData() {try {const response await fetch(api/data);return response.json();} catch (error) {throw error;}
}// 尝试最多 3 次每次失败后等待 2 秒
const data await retry({ times: 3, delay: 2000 }, fetchData);
console.log(data);counting() - 统计数组中元素的数量 counting() 函数用于统计类数组集合中各类元素的数量。 import { counting } from radash;const items [apple, banana, apple, orange, banana, apple];
const counts counting(items, item item);
console.log(counts); // 输出: { apple: 3, banana: 2, orange: 1 }unique() - 从数组中提取唯一元素 unique() 函数从输入数组中提取唯一的元素。 import { unique } from radash;const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray unique(array);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]类型检查函数 Radash 提供了一系列类型检查函数如 isArray()、isString()、isNumber() 等用于检测变量的数据类型。 import { isArray, isString, isNumber } from radash;const myArray [1, 2, 3];
const myString Hello, Radash!;
const myNumber 42;console.log(isArray(myArray)); // 输出: true
console.log(isString(myString)); // 输出: true
console.log(isNumber(myNumber)); // 输出: true
