章节索引 :

Lodash

是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 实现了大量实用的工具方法。(官方文档)

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script>
  console.log(window._);

  var arr = [1, 2, 3, 4, 5];
  var arrChunk = _.chunk(arr, 2);

  console.log(arrChunk); // 输出:[[1, 2], [3, 4], [5]]
</script>

1. 代替原生方法使用

Lodash 提供了许多原生同名方法,如数组 forEachmapincludes 等。

Lodash 对这些方法增加了容错,如果是原生方法,碰到值为 null 或者 undefined 会报错,在 Lodash 中会处理掉这份错误。

Lodash 在引入后,入口为全局下的 _

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script>
  var arr = null; // 不知道出于什么原因 本来应该是个数组 但是变成了null

  _.forEach(arr, function() {

  });

  arr.forEach(function() {

  }); // 异常:Cannot read property 'forEach' of null
</script>

同时 Lodash 对一些方法做了优化处理,如:假使在 forEach 的回调中返回了 false ,则不会再继续遍历,达到与 break 类似的效果。

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script>
  var arr = [1, 2, 3, 4];

  var fn = function(item, index) {
    if (index === 2) {
      return false;
    }

    console.log(item);
  };

  console.log('lodash: ');
  _.forEach(arr, fn);

  console.log('native: ')
  arr.forEach(fn);
</script>

对项目有强健壮性和稳定性的项目,可以考虑使用 Lodash 这样的库替代原生方法进行使用,让第三方做好兼容处理。

2. 小结

Lodash 是非常常用的工具库,也提供了许多 ES6 提供的同名的方法,可以充当 polyfill 使用。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源