選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

2890 行
80 KiB

3年前
  1. # You don't (may not) need Lodash/Underscore
  2. [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/you-dont-need/lodash-underscore)
  3. [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/cht8687/You-Dont-Need-Lodash-Underscore)
  4. Lodash and Underscore are great modern JavaScript utility libraries, and they are widely used by Front-end developers. However, when you are targeting modern browsers, you may find out that there are many methods which are already supported natively thanks to ECMAScript5 [ES5] and ECMAScript2015 [ES6]. If you want your project to require fewer dependencies, and you know your target browser clearly, then you may not need Lodash/Underscore.
  5. You are welcome to contribute with more items provided below.
  6. * If you are targeting legacy JavaScript engine with those ES5 methods, you can use [es5-shim](https://github.com/es-shims/es5-shim)
  7. * Please note that, the examples used below are just showing you the native alternative of performing certain tasks. For some of the functions, Lodash provides you more options than native built-ins. This list is not a 1:1 comparison.
  8. * Please send a PR if you want to add or modify the code. No need to open an issue unless it's something big and you want to discuss.
  9. ## Voice of Developers
  10. > [Make use of native JavaScript object and array utilities before going big.](https://twitter.com/codylindley/status/692356631007342593)
  11. > &mdash;<cite>Cody Lindley, Author of [jQuery Cookbook](http://shop.oreilly.com/product/9780596159788.do) and [JavaScript Enlightenment](http://shop.oreilly.com/product/0636920027713.do)</cite>
  12. <!-- -->
  13. > [You probably don't need Lodash. Nice List of JavaScript methods which you can use natively.](https://twitter.com/daniellmb/status/692200768556916740)
  14. > &mdash;<cite>Daniel Lamb, Computer Scientist, Technical Reviewer of [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition) and [Functional Programming in JavaScript](https://www.manning.com/books/functional-programming-in-javascript)</cite>
  15. <!-- -->
  16. > [I guess not, but I want it.](https://twitter.com/teropa/status/692280179666898944)
  17. > &mdash;<cite>Tero Parviainen, Author of [build-your-own-angular](http://teropa.info/build-your-own-angular)</cite>
  18. <!-- -->
  19. > [I'll admit, I've been guilty of overusing #lodash. Excellent resource.](https://twitter.com/therebelrobot/status/692907269512642561)
  20. > &mdash;<cite>@therebelrobot, Maker of web things, Facilitator for Node.js/io.js</cite>
  21. ## ESLint Plugin
  22. <p align="center">
  23. <a href="https://www.npmjs.com/package/eslint-plugin-you-dont-need-lodash-underscore">
  24. <img src="https://img.shields.io/npm/v/eslint-plugin-you-dont-need-lodash-underscore.svg?style=flat-square"
  25. alt="NPM Version">
  26. </a>
  27. <a href="https://www.npmjs.org/package/eslint-plugin-you-dont-need-lodash-underscore">
  28. <img src="http://img.shields.io/npm/dm/eslint-plugin-you-dont-need-lodash-underscore.svg?style=flat-square"
  29. alt="Downloads">
  30. </a>
  31. <a href="https://travis-ci.org/you-dont-need/You-Dont-Need-Lodash-Underscore">
  32. <img src="https://img.shields.io/travis/you-dont-need/You-Dont-Need-Lodash-Underscore/master.svg?style=flat-square"
  33. alt="Build Status">
  34. </a>
  35. <a href="https://coveralls.io/github/you-dont-need/You-Dont-Need-Lodash-Underscore?branch=master">
  36. <img src="https://img.shields.io/coveralls/you-dont-need/You-Dont-Need-Lodash-Underscore/master.svg?style=flat-square"
  37. alt="Coverage Status" />
  38. </a>
  39. <a href="https://david-dm.org/you-dont-need/You-Dont-Need-Lodash-Underscore">
  40. <img src="https://img.shields.io/david/you-dont-need/You-Dont-Need-Lodash-Underscore.svg?style=flat-square"
  41. alt="Dependency Status">
  42. </a>
  43. </p>
  44. If you're using [ESLint](http://eslint.org/), you can install a
  45. [plugin](http://eslint.org/docs/user-guide/configuring#using-the-configuration-from-a-plugin) that
  46. will help you identify places in your codebase where you don't (may not) need Lodash/Underscore.
  47. Install the plugin...
  48. ```sh
  49. npm install --save-dev eslint-plugin-you-dont-need-lodash-underscore
  50. ```
  51. ...then update your config
  52. ```js
  53. "extends" : ["plugin:you-dont-need-lodash-underscore/compatible"],
  54. ```
  55. For more information, see [Configuring the ESLint Plugin](configuring.md)
  56. *:heavy_exclamation_mark:<b>Important:</b> Note that, while many Lodash methods are null safe (e.g. _.keys, _.entries),
  57. this is not necessarily the case for their Native equivalent. If null safety is critical for your application, we
  58. suggest that you take extra precautions [e.g. consider using the native Object.keys as Object.keys(value || {})].*
  59. ## Quick Links
  60. **[Array](#array)**
  61. 1. [_.chunk](#_chunk)
  62. 1. [_.compact](#_compact)
  63. 1. [_.concat](#_concat)
  64. 1. [_.difference](#_difference)
  65. 1. [_.drop](#_drop)
  66. 1. [_.dropRight](#_dropRight)
  67. 1. [_.fill](#_fill)
  68. 1. [_.find](#_find)
  69. 1. [_.findIndex](#_findindex)
  70. 1. [_.first](#_first)
  71. 1. [_.flatten](#_flatten)
  72. 1. [_.flattenDeep](#_flattendeep)
  73. 1. [_.fromPairs](#_frompairs)
  74. 1. [_.head and _.tail](#_head-and-_tail)
  75. 1. [_.indexOf](#_indexof)
  76. 1. [_.intersection](#_intersection)
  77. 1. [_.isArray](#_isarray)
  78. 1. [_.isArrayBuffer](#_isarraybuffer)
  79. 1. [_.join](#_join)
  80. 1. [_.last](#_last)
  81. 1. [_.lastIndexOf](#_lastindexof)
  82. 1. [_.reverse](#_reverse)
  83. 1. [_.slice](#_slice)
  84. 1. [_.without](#_without)
  85. **[Collection*](#collection*)**
  86. *:heavy_exclamation_mark:<b>Important:</b> Note that most native equivalents are array methods,
  87. and will not work with objects. If this functionality is needed and no object method is provided,
  88. then Lodash/Underscore is the better option.*
  89. 1. [_.each](#_each)
  90. 1. [_.every](#_every)
  91. 1. [_.filter](#_filter)
  92. 1. [_.groupBy](#_groupby)
  93. 1. [_.includes](#_includes)
  94. 1. [_.keyBy](#_keyBy)
  95. 1. [_.map](#_map)
  96. 1. [_.minBy and _.maxBy](#_minby-and-_maxby)
  97. 1. [_.orderBy](#_sortby-and-_orderby)
  98. 1. [_.pluck](#_pluck)
  99. 1. [_.range](#_range)
  100. 1. [_.reduce](#_reduce)
  101. 1. [_.reduceRight](#_reduceright)
  102. 1. [_.size](#_size)
  103. 1. [_.some](#_some)
  104. 1. [_.sortBy](#_sortby-and-_orderby)
  105. 1. [_.uniq](#_uniq)
  106. **[Function](#function)**
  107. 1. [_.after](#_after)
  108. 1. [_.bind](#_bind)
  109. 1. [_.debounce](#_debounce)
  110. 1. [_.partial](#_partial)
  111. 1. [_.throttle](#_throttle)
  112. **[Lang](#lang)**
  113. 1. [_.gt](#_gt)
  114. 1. [_.gte](#_gte)
  115. 1. [_.isEmpty](#_isempty)
  116. 1. [_.isFinite](#_isfinite)
  117. 1. [_.isInteger](#_isInteger)
  118. 1. [_.isNaN](#_isnan)
  119. 1. [_.isNil](#_isnil)
  120. 1. [_.isNull](#_isnull)
  121. 1. [_.isUndefined](#_isundefined)
  122. **[Object](#object)**
  123. 1. [_.assign](#_assign)
  124. 1. [_.extend](#_extend)
  125. 1. [_.get](#_get)
  126. 1. [_.keys](#_keys)
  127. 1. [_.omit](#_omit)
  128. 1. [_.pick](#_pick)
  129. 1. [_.pickBy](#_pickby)
  130. 1. [_.toPairs](#_topairs)
  131. 1. [_.values](#_values)
  132. **[String](#string)**
  133. 1. [_.endsWith](#_endsWith)
  134. 1. [_.isString](#_isString)
  135. 1. [_.padStart and _.padEnd](#_padstart-and-_padend)
  136. 1. [_.repeat](#_repeat)
  137. 1. [_.replace](#_replace)
  138. 1. [_.split](#_split)
  139. 1. [_.startsWith](#_startsWith)
  140. 1. [_.template](#_template)
  141. 1. [_.toLower](#_tolower)
  142. 1. [_.toUpper](#_toupper)
  143. 1. [_.trim](#_trim)
  144. 1. [_.upperFirst](#_upperFirst)
  145. **[Util](#string)**
  146. 1. [_.times](#_times)
  147. **[Number](#number)**
  148. 1. [_.clamp](#clamp)
  149. 2. [_.inRange](#_inRange)
  150. 3. [_.random](#_random)
  151. ## Array
  152. ### _.chunk
  153. Creates an array of elements split into groups the length of size.
  154. ```js
  155. // Underscore/Lodash
  156. _.chunk(['a', 'b', 'c', 'd'], 2);
  157. // => [['a', 'b'], ['c', 'd']]
  158. _.chunk(['a', 'b', 'c', 'd'], 3);
  159. // => [['a', 'b', 'c'], ['d']]
  160. // Native
  161. const chunk = (input, size) => {
  162. return input.reduce((arr, item, idx) => {
  163. return idx % size === 0
  164. ? [...arr, [item]]
  165. : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
  166. }, []);
  167. };
  168. chunk(['a', 'b', 'c', 'd'], 2);
  169. // => [['a', 'b'], ['c', 'd']]
  170. chunk(['a', 'b', 'c', 'd'], 3);
  171. // => [['a', 'b', 'c'], ['d']]
  172. ```
  173. #### Browser Support for Spread in array literals
  174. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  175. :-: | :-: | :-: | :-: | :-: | :-: |
  176. 46.0 ✔ | 12.0 ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 8.0 ✔ |
  177. **[⬆ back to top](#quick-links)**
  178. ### _.compact
  179. Creates an array with all falsy values removed.
  180. ```js
  181. // Underscore/Lodash
  182. _.compact([0, 1, false, 2, '', 3]);
  183. // Native
  184. [0, 1, false, 2, '', 3].filter(Boolean)
  185. ```
  186. #### Browser Support for `array.prototype.filter`
  187. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  188. :-: | :-: | :-: | :-: | :-: | :-: |
  189. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  190. **[⬆ back to top](#quick-links)**
  191. ### _.concat
  192. Creates a new array concatenating array with any additional arrays and/or values.
  193. ```js
  194. // Underscore/Lodash
  195. var array = [1]
  196. var other = _.concat(array, 2, [3], [[4]])
  197. console.log(other)
  198. // output: [1, 2, 3, [4]]
  199. // Native
  200. var array = [1]
  201. var other = array.concat(2, [3], [[4]])
  202. console.log(other)
  203. // output: [1, 2, 3, [4]]
  204. ```
  205. #### Browser Support for `Array.prototype.concat()`
  206. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  207. :-: | :-: | :-: | :-: | :-: | :-: |
  208. 1.0 ✔ | ✔ | 1.0 ✔ | 5.5 ✔ | ✔ | ✔ |
  209. **[⬆ back to top](#quick-links)**
  210. ### _.difference
  211. Similar to [without](#_without), but returns the values from array that are not present in the other arrays.
  212. ```js
  213. // Underscore/Lodash
  214. console.log(_.difference([1, 2, 3, 4, 5], [5, 2, 10]))
  215. // output: [1, 3, 4]
  216. // Native
  217. var arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
  218. console.log(arrays.reduce(function(a, b) {
  219. return a.filter(function(value) {
  220. return !b.includes(value);
  221. });
  222. }));
  223. // output: [1, 3, 4]
  224. // ES6
  225. let arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
  226. console.log(arrays.reduce((a, b) => a.filter(c => !b.includes(c))));
  227. // output: [1, 3, 4]
  228. ```
  229. #### Browser Support for `Array.prototype.reduce()`
  230. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  231. :-: | :-: | :-: | :-: | :-: | :-: |
  232. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  233. **[⬆ back to top](#quick-links)**
  234. ### _.drop
  235. Creates a slice of array with n elements dropped from the beginning.
  236. ```js
  237. // Underscore/Lodash
  238. _.drop([1, 2, 3]);
  239. // => [2, 3]
  240. _.drop([1, 2, 3], 2);
  241. // => [3]
  242. // Native
  243. [1, 2, 3].slice(1);
  244. // => [2, 3]
  245. [1, 2, 3].slice(2);
  246. // => [3]
  247. ```
  248. #### Browser Support for `Array.prototype.slice()`
  249. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  250. :-: | :-: | :-: | :-: | :-: | :-: |
  251. 1.0 ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  252. **[⬆ back to top](#quick-links)**
  253. ### _.dropRight
  254. Creates a slice of array with n elements dropped at the end.
  255. ```js
  256. // Underscore/Lodash
  257. _.dropRight([1, 2, 3]);
  258. // => [1, 2]
  259. _.dropRight([1, 2, 3], 2);
  260. // => [1]
  261. // Native
  262. [1, 2, 3].slice(0, -1);
  263. // => [1, 2]
  264. [1, 2, 3].slice(0, -2);
  265. // => [1]
  266. ```
  267. #### Browser Support for `Array.prototype.slice()`
  268. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  269. :-: | :-: | :-: | :-: | :-: | :-: |
  270. 1.0 ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  271. **[⬆ back to top](#quick-links)**
  272. ### _.fill
  273. Fills elements of array with value from start up to, but not including, end.
  274. *Note that `fill` is a mutable method in both native and Lodash/Underscore.*
  275. ```js
  276. // Underscore/Lodash
  277. var array = [1, 2, 3]
  278. _.fill(array, 'a')
  279. console.log(array)
  280. // output: ['a', 'a', 'a']
  281. _.fill(Array(3), 2)
  282. // output: [2, 2, 2]
  283. _.fill([4, 6, 8, 10], '*', 1, 3)
  284. // output: [4, '*', '*', 10]
  285. // Native
  286. var array = [1, 2, 3]
  287. array.fill('a')
  288. console.log(array)
  289. // output: ['a', 'a', 'a']
  290. Array(3).fill(2)
  291. // output: [2, 2, 2]
  292. [4, 6, 8, 10].fill('*', 1, 3)
  293. // output: [4, '*', '*', 10]
  294. ```
  295. #### Browser Support for `Array.prototype.fill()`
  296. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  297. :-: | :-: | :-: | :-: | :-: | :-: |
  298. 45.0 ✔ | ✔ | 31.0 ✔ | ✖ | 32.0 ✔ | 8 ✔ |
  299. **[⬆ back to top](#quick-links)**
  300. ### _.find
  301. Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.
  302. ```js
  303. // Underscore/Lodash
  304. var users = [
  305. { 'user': 'barney', 'age': 36, 'active': true },
  306. { 'user': 'fred', 'age': 40, 'active': false },
  307. { 'user': 'pebbles', 'age': 1, 'active': true }
  308. ]
  309. _.find(users, function (o) { return o.age < 40; })
  310. // output: object for 'barney'
  311. // Native
  312. var users = [
  313. { 'user': 'barney', 'age': 36, 'active': true },
  314. { 'user': 'fred', 'age': 40, 'active': false },
  315. { 'user': 'pebbles', 'age': 1, 'active': true }
  316. ]
  317. users.find(function (o) { return o.age < 40; })
  318. // output: object for 'barney'
  319. ```
  320. #### Browser Support for `Array.prototype.find()`
  321. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  322. :-: | :-: | :-: | :-: | :-: | :-: |
  323. 45.0 ✔ | ✔ | 25.0 ✔ | ✖ | 32.0 ✔ | 7.1 ✔ |
  324. **[⬆ back to top](#quick-links)**
  325. ### _.findIndex
  326. Returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.
  327. ```js
  328. // Underscore/Lodash
  329. var users = [
  330. { 'user': 'barney', 'age': 36, 'active': true },
  331. { 'user': 'fred', 'age': 40, 'active': false },
  332. { 'user': 'pebbles', 'age': 1, 'active': true }
  333. ]
  334. var index = _.findIndex(users, function (o) { return o.age >= 40; })
  335. console.log(index)
  336. // output: 1
  337. // Native
  338. var users = [
  339. { 'user': 'barney', 'age': 36, 'active': true },
  340. { 'user': 'fred', 'age': 40, 'active': false },
  341. { 'user': 'pebbles', 'age': 1, 'active': true }
  342. ]
  343. var index = users.findIndex(function (o) { return o.age >= 40; })
  344. console.log(index)
  345. // output: 1
  346. ```
  347. #### Browser Support for `Array.prototype.findIndex()`
  348. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  349. :-: | :-: | :-: | :-: | :-: | :-: |
  350. 45.0 ✔ | ✔ | 25.0 ✔ | ✖ | 32.0 ✔ | 7.1 ✔ |
  351. **[⬆ back to top](#quick-links)**
  352. ### _.first
  353. Returns the first element of an array. Passing n will return the first n elements of the array.
  354. ```js
  355. // Underscore/Lodash
  356. _.first([1, 2, 3, 4, 5]);
  357. // => 1
  358. _.first([1, 2, 3, 4, 5], 2);
  359. // => [1, 2]
  360. // Native
  361. [1, 2, 3, 4, 5][0];
  362. // => 1
  363. //or
  364. [].concat(1, 2, 3, 4, 5).shift()
  365. // => 1
  366. //or
  367. [].concat([1, 2, 3, 4, 5]).shift()
  368. // => 1
  369. // Native (works even with potentially undefined/null, like _.first)
  370. [].concat(undefined).shift()
  371. // => undefined
  372. [1, 2, 3, 4, 5].slice(0, 2);
  373. // => [1, 2]
  374. ```
  375. #### Browser Support for `Array.prototype.slice()`
  376. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  377. :-: | :-: | :-: | :-: | :-: | :-: |
  378. 1.0 ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  379. **[⬆ back to top](#quick-links)**
  380. ### _.flatten
  381. Flattens array a single level deep.
  382. ```js
  383. // Underscore/Lodash
  384. _.flatten([1, [2, [3, [4]], 5]]);
  385. // => [1, 2, [3, [4]], 5]
  386. // Native
  387. const flatten = [1, [2, [3, [4]], 5]].reduce( (a, b) => a.concat(b), [])
  388. // => [1, 2, [3, [4]], 5]
  389. const flatten = [].concat(...[1, [2, [3, [4]], 5]])
  390. // => [1, 2, [3, [4]], 5]
  391. // Native(ES2019)
  392. const flatten = [1, [2, [3, [4]], 5]].flat()
  393. // => [1, 2, [3, [4]], 5]
  394. const flatten = [1, [2, [3, [4]], 5]].flatMap(number => number)
  395. // => [1, 2, [3, [4]], 5]
  396. ```
  397. #### Browser Support for `Array.prototype.reduce()`
  398. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  399. :-: | :-: | :-: | :-: | :-: | :-: |
  400. 46.0 ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4 ✔ |
  401. #### Browser Support for `Array.prototype.flat()`
  402. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image] |
  403. :-: | :-: | :-: | :-: | :-: | :-: |
  404. 69 ✔ | ✖ | 62 ✔ | ✖ | 56 ✔ | 12 ✔ |
  405. #### Browser Support for `Array.prototype.flatMap()`
  406. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image] |
  407. :-: | :-: | :-: | :-: | :-: | :-: |
  408. 69 ✔ | ✖ | 62 ✔ | ✖ | 56 ✔ | 12 ✔ |
  409. **[⬆ back to top](#quick-links)**
  410. ### _.flattenDeep
  411. Recursively flattens array.
  412. ```js
  413. // Underscore/Lodash
  414. _.flattenDeep([1, [2, [3, [4]], 5]]);
  415. // => [1, 2, 3, 4, 5]
  416. // Native
  417. const flattenDeep = (arr) => Array.isArray(arr)
  418. ? arr.reduce( (a, b) => a.concat(flattenDeep(b)) , [])
  419. : [arr]
  420. flattenDeep([1, [[2], [3, [4]], 5]])
  421. // => [1, 2, 3, 4, 5]
  422. // Native(ES2019)
  423. [1, [2, [3, [4]], 5]].flat(Infinity)
  424. // => [1, 2, 3, 4, 5]
  425. const flattenDeep = (arr) => arr.flatMap((subArray, index) => Array.isArray(subArray) ? flattenDeep(subArray) : subArray)
  426. flattenDeep([1, [[2], [3, [4]], 5]])
  427. // => [1, 2, 3, 4, 5]
  428. ```
  429. #### Browser Support
  430. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  431. :-: | :-: | :-: | :-: | :-: | :-: |
  432. 46.0 ✔ | ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 7.1 ✔ |
  433. #### Browser Support for `Array.prototype.flat()`
  434. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image] |
  435. :-: | :-: | :-: | :-: | :-: | :-: |
  436. 69 ✔ | ✖ | 62 ✔ | ✖ | 56 ✔ | 12 ✔ |
  437. #### Browser Support for `Array.prototype.flatMap()`
  438. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image] |
  439. :-: | :-: | :-: | :-: | :-: | :-: |
  440. 69 ✔ | ✖ | 62 ✔ | ✖ | 56 ✔ | 12 ✔ |
  441. **[⬆ back to top](#quick-links)**
  442. ### _.fromPairs
  443. Returns an object composed from key-value pairs.
  444. ```js
  445. // Underscore/Lodash
  446. _.fromPairs([['a', 1], ['b', 2]]);
  447. // => { 'a': 1, 'b': 2 }
  448. // Native
  449. const fromPairs = function(arr) {
  450. return arr.reduce(function(accumulator, value) {
  451. accumulator[value[0]] = value[1];
  452. return accumulator;
  453. }, {})
  454. }
  455. // Compact form
  456. const fromPairs = (arr) => arr.reduce((acc, val) => (acc[val[0]] = val[1], acc), {})
  457. fromPairs([['a', 1], ['b', 2]]);
  458. // => { 'a': 1, 'b': 2 }
  459. // Native(ES2019)
  460. Object.fromEntries([['a', 1], ['b', 2]])
  461. // => { 'a': 1, 'b': 2 }
  462. ```
  463. #### Browser Support for `Array.prototype.reduce()`
  464. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  465. :-: | :-: | :-: | :-: | :-: | :-: |
  466. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  467. #### Browser Support for `Object.fromEntries()`
  468. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  469. :-: | :-: | :-: | :-: | :-: | :-: |
  470. 73.0 ✔ | 79.0 ✔ | 63.0 ✔ | ✖ | 60 ✔ | 12.1 ✔ |
  471. **[⬆ back to top](#quick-links)**
  472. ### _.head and _.tail
  473. Gets the first element or all but the first element.
  474. ```js
  475. const array = [1, 2, 3]
  476. // Underscore: _.first, _.head, _.take
  477. // Lodash: _.first, _.head
  478. _.head(array)
  479. // output: 1
  480. // Underscore: _.rest, _.tail, _.drop
  481. // Lodash: _.tail
  482. _.tail(array)
  483. // output: [2, 3]
  484. // Native
  485. const [ head, ...tail ] = array
  486. console.log(head)
  487. // output: 1
  488. console.log(tail)
  489. // output [2, 3]
  490. ```
  491. #### Browser Support for Spread in array literals
  492. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  493. :-: | :-: | :-: | :-: | :-: | :-: |
  494. 46.0 ✔ | 12.0 ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 8.0 ✔ |
  495. **[⬆ back to top](#quick-links)**
  496. ### _.indexOf
  497. Returns the first index at which a given element can be found in the array, or -1 if it is not present.
  498. ```js
  499. // Underscore/Lodash
  500. var array = [2, 9, 9]
  501. var result = _.indexOf(array, 2)
  502. console.log(result)
  503. // output: 0
  504. // Native
  505. var array = [2, 9, 9]
  506. var result = array.indexOf(2)
  507. console.log(result)
  508. // output: 0
  509. ```
  510. #### Browser Support for `Array.prototype.indexOf()`
  511. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  512. :-: | :-: | :-: | :-: | :-: | :-: |
  513. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  514. **[⬆ back to top](#quick-links)**
  515. ### _.intersection
  516. Returns an array that is the intersection of all the arrays. Each value in the result is present in each of the arrays.
  517. ```js
  518. // Underscore/Lodash
  519. console.log(_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]))
  520. // output: [1, 2]
  521. // Native
  522. var arrays = [[1, 2, 3], [101, 2, 1, 10], [2, 1]];
  523. console.log(arrays.reduce(function(a, b) {
  524. return a.filter(function(value) {
  525. return b.includes(value);
  526. });
  527. }));
  528. // output: [1, 2]
  529. // ES6
  530. let arrays = [[1, 2, 3], [101, 2, 1, 10], [2, 1]];
  531. console.log(arrays.reduce((a, b) => a.filter(c => b.includes(c))));
  532. // output: [1, 2]
  533. ```
  534. #### Browser Support for `Array.prototype.reduce()`
  535. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  536. :-: | :-: | :-: | :-: | :-: | :-: |
  537. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  538. **[⬆ back to top](#quick-links)**
  539. ### _.takeRight
  540. Creates a slice of array with n elements taken from the end.
  541. :heavy_exclamation_mark: Native slice does not behave entirely the same as the `Lodash` method. See example below to understand why.
  542. ```js
  543. // Underscore/Lodash
  544. _.takeRight([1, 2, 3]);
  545. // => [3]
  546. _.takeRight([1, 2, 3], 2);
  547. // => [2, 3]
  548. _.takeRight([1, 2, 3], 5);
  549. // => [1, 2, 3]
  550. // Native
  551. [1, 2, 3].slice(-1);
  552. // => [3]
  553. [1, 2, 3].slice(-2);
  554. // => [2, 3]
  555. [1, 2, 3].slice(-5);
  556. // => [1, 2, 3]
  557. // Difference in compatibility
  558. // Lodash
  559. _.takeRight([1, 2, 3], 0);
  560. // => []
  561. // Native
  562. [1, 2, 3].slice(0);
  563. // => [1, 2, 3]
  564. ```
  565. #### Browser Support for `Array.prototype.slice()`
  566. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  567. :-: | :-: | :-: | :-: | :-: | :-: |
  568. 1.0 ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  569. **[⬆ back to top](#quick-links)**
  570. ### _.isArray
  571. Returns true if given value is an array.
  572. ```js
  573. // Lodash
  574. var array = []
  575. console.log(_.isArray(array))
  576. // output: true
  577. // Native
  578. var array = []
  579. console.log(Array.isArray(array));
  580. // output: true
  581. ```
  582. #### Browser Support for `Array.isArray()`
  583. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  584. :-: | :-: | :-: | :-: | :-: | :-: |
  585. 5.0 ✔ | ✔ | 4.0 ✔ | 9.0 ✔ | 10.5 ✔ | 5.0 ✔ |
  586. **[⬆ back to top](#quick-links)**
  587. ### _.isArrayBuffer
  588. Checks if value is classified as an ArrayBuffer object.
  589. ```js
  590. // Lodash
  591. _.isArrayBuffer(new ArrayBuffer(2));
  592. // output: true
  593. // Native
  594. console.log(new ArrayBuffer(2) instanceof ArrayBuffer);
  595. // output: true
  596. ```
  597. #### Browser Support for `instanceof`
  598. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  599. :-: | :-: | :-: | :-: | :-: | :-: |
  600. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  601. **[⬆ back to top](#quick-links)**
  602. ### _.join
  603. :heavy_exclamation_mark:`Not in Underscore.js`
  604. Joins a list of elements in an array with a given separator.
  605. ```js
  606. // Lodash
  607. var result = _.join(['one', 'two', 'three'], '--')
  608. console.log(result)
  609. // output: 'one--two--three'
  610. // Native
  611. var result = ['one', 'two', 'three'].join('--')
  612. console.log(result)
  613. // output: 'one--two--three'
  614. ```
  615. #### Browser Support for `Array.prototype.join()`
  616. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  617. :-: | :-: | :-: | :-: | :-: | :-: |
  618. 1.0 ✔ | ✔ | 1.0 ✔ | 5.5 ✔ | ✔ | ✔ |
  619. **[⬆ back to top](#quick-links)**
  620. ### _.last
  621. Returns the last element of an array. Passing n will return the last n elements of the array.
  622. ```js
  623. // Underscore/Lodash
  624. const numbers = [1, 2, 3, 4, 5];
  625. _.last(numbers);
  626. // => 5
  627. _.last(numbers, 2);
  628. // => [4, 5]
  629. // Native
  630. const numbers = [1, 2, 3, 4, 5];
  631. numbers[numbers.length - 1];
  632. // => 5
  633. //or
  634. numbers.slice(-1)[0];
  635. // => 5
  636. //or
  637. [].concat(numbers).pop()
  638. // => 5
  639. // Native (works even with potentially undefined/null)
  640. [].concat(undefined).pop()
  641. // => undefined
  642. numbers.slice(-2);
  643. // => [4, 5]
  644. ```
  645. #### Browser Support for `Array.prototype.concat()`
  646. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  647. :-: | :-: | :-: | :-: | :-: | :-: |
  648. 1.0 ✔ | ✔ | 1.0 ✔ | 5.5 ✔ | ✔ | ✔ |
  649. **[⬆ back to top](#quick-links)**
  650. ### _.lastIndexOf
  651. Returns the index of the last occurrence of value in the array, or -1 if value is not present.
  652. ```js
  653. // Underscore/Lodash
  654. var array = [2, 9, 9, 4, 3, 6]
  655. var result = _.lastIndexOf(array, 9)
  656. console.log(result)
  657. // output: 2
  658. // Native
  659. var array = [2, 9, 9, 4, 3, 6]
  660. var result = array.lastIndexOf(9)
  661. console.log(result)
  662. // output: 2
  663. ```
  664. #### Browser Support for `Array.prototype.lastIndexOf()`
  665. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  666. :-: | :-: | :-: | :-: | :-: | :-: |
  667. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  668. **[⬆ back to top](#quick-links)**
  669. ### _.reverse
  670. :heavy_exclamation_mark:`Not in Underscore.js`
  671. Reverses array so that the first element becomes the last, the second element becomes the second to last, and so on.
  672. ```js
  673. // Lodash
  674. var array = [1, 2, 3]
  675. console.log(_.reverse(array))
  676. // output: [3, 2, 1]
  677. // Native
  678. var array = [1, 2, 3]
  679. console.log(array.reverse())
  680. // output: [3, 2, 1]
  681. ```
  682. Voice from the Lodash author:
  683. >Lodash's `_.reverse` just calls `Array#reverse` and enables composition like `_.map(arrays, _.reverse).`
  684. It's exposed on _ because previously, like `Underscore`, it was only exposed in the chaining syntax.
  685. >--- [jdalton](https://github.com/cht8687/You-Dont-Need-Lodash-Underscore/commit/22c4bcf2be48dd415d2b073759805562e520b615#)
  686. #### Browser Support for `Array.prototype.reverse()`
  687. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  688. :-: | :-: | :-: | :-: | :-: | :-: |
  689. ✔ | ✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
  690. **[⬆ back to top](#quick-links)**
  691. ### _.slice
  692. Returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included)
  693. ```js
  694. // Lodash
  695. var array = [1, 2, 3, 4]
  696. console.log(_.slice(array, 1, 3))
  697. // output: [2, 3]
  698. // Native
  699. var array = [1, 2, 3, 4]
  700. console.log(array.slice(1, 3));
  701. // output: [2, 3]
  702. ```
  703. #### Browser Support for `Array.prototype.slice()`
  704. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  705. :-: | :-: | :-: | :-: | :-: | :-: |
  706. 1.0 ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  707. **[⬆ back to top](#quick-links)**
  708. ### _.without
  709. :heavy_exclamation_mark:`Not in Underscore.js`
  710. Returns an array where matching items are filtered.
  711. ```js
  712. // Lodash
  713. var array = [1, 2, 3]
  714. console.log(_.without(array, 2))
  715. // output: [1, 3]
  716. // Native
  717. var array = [1, 2, 3]
  718. console.log(array.filter(function(value) {
  719. return value !== 2;
  720. }));
  721. // output: [1, 3]
  722. ```
  723. #### Browser Support for `Array.prototype.filter()`
  724. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  725. :-: | :-: | :-: | :-: | :-: | :-: |
  726. 1.0 ✔ | ✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
  727. **[⬆ back to top](#quick-links)**
  728. ## Collection*
  729. *:heavy_exclamation_mark:<b>Important:</b> Note that most native equivalents are array methods,
  730. and will not work with objects. If this functionality is needed and no object method is provided,
  731. then Lodash/Underscore is the better option.*
  732. ### _.each
  733. Iterates over a list of elements, yielding each in turn to an iteratee function.
  734. ```js
  735. // Underscore/Lodash
  736. //For arrays
  737. _.each([1, 2, 3], function (value, index) {
  738. console.log(value)
  739. })
  740. // output: 1 2 3
  741. //For objects
  742. _.each({'one':1, 'two':2, 'three':3}, function(value) {
  743. console.log(value)
  744. })
  745. // output: 1 2 3
  746. // Native
  747. //For arrays
  748. [1, 2, 3].forEach(function (value, index) {
  749. console.log(value)
  750. })
  751. // output: 1 2 3
  752. //For objects
  753. Object.entries({'one':1, 'two':2, 'three':3}).forEach(function([key,value],index) {
  754. console.log(value)
  755. })
  756. //output: 1 2 3
  757. ```
  758. #### Browser Support for `Array.prototype.forEach()`
  759. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  760. :-: | :-: | :-: | :-: | :-: | :-: |
  761. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  762. #### Browser Support for `Object.entries().forEach()`
  763. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  764. :-: | :-: | :-: | :-: | :-: | :-: |
  765. 54 ✔ | 14 ✔ | 47 ✔ | ✖ | 41 ✔ | 10.1✔ |
  766. **[⬆ back to top](#quick-links)**
  767. ### _.every
  768. Tests whether all elements in the array pass the test implemented by the provided function.
  769. ```js
  770. // Underscore/Lodash
  771. function isLargerThanTen (element, index, array) {
  772. return element >= 10
  773. }
  774. var array = [10, 20, 30]
  775. var result = _.every(array, isLargerThanTen)
  776. console.log(result)
  777. // output: true
  778. // Native
  779. function isLargerThanTen (element, index, array) {
  780. return element >= 10
  781. }
  782. var array = [10, 20, 30]
  783. var result = array.every(isLargerThanTen)
  784. console.log(result)
  785. // output: true
  786. ```
  787. #### Browser Support fpr `Array.prototype.every()`
  788. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  789. :-: | :-: | :-: | :-: | :-: | :-: |
  790. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  791. **[⬆ back to top](#quick-links)**
  792. ### _.filter
  793. Creates a new array with all elements that pass the test implemented by the provided function.
  794. ```js
  795. // Underscore/Lodash
  796. function isBigEnough (value) {
  797. return value >= 10
  798. }
  799. var array = [12, 5, 8, 130, 44]
  800. var filtered = _.filter(array, isBigEnough)
  801. console.log(filtered)
  802. // output: [12, 130, 44]
  803. // Native
  804. function isBigEnough (value) {
  805. return value >= 10
  806. }
  807. var array = [12, 5, 8, 130, 44]
  808. var filtered = array.filter(isBigEnough)
  809. console.log(filtered)
  810. // output: [12, 130, 44]
  811. ```
  812. #### Browser Support for `Array.prototype.filter()`
  813. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  814. :-: | :-: | :-: | :-: | :-: | :-: |
  815. ✔ | ✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
  816. **[⬆ back to top](#quick-links)**
  817. ### _.groupBy
  818. Group items by key.
  819. ```js
  820. // Underscore/Lodash
  821. var grouped = _.groupBy(['one', 'two', 'three'], 'length')
  822. console.log(grouped)
  823. // output: {3: ["one", "two"], 5: ["three"]}
  824. // Native
  825. var grouped = ['one', 'two', 'three'].reduce((r, v, i, a, k = v.length) => ((r[k] || (r[k] = [])).push(v), r), {})
  826. console.log(grouped)
  827. // output: {3: ["one", "two"], 5: ["three"]}
  828. ```
  829. ```js
  830. // Underscore/Lodash
  831. var grouped = _.groupBy([1.3, 2.1, 2.4], num => Math.floor(num))
  832. console.log(grouped)
  833. // output: {1: [1.3], 2: [2.1, 2.4]}
  834. // Native
  835. var grouped = [1.3, 2.1, 2.4].reduce((r, v, i, a, k = Math.floor(v)) => ((r[k] || (r[k] = [])).push(v), r), {})
  836. console.log(grouped)
  837. // output: {1: [1.3], 2: [2.1, 2.4]}
  838. ```
  839. #### Browser Support for `Array.prototype.reduce()`
  840. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  841. :-: | :-: | :-: | :-: | :-: | :-: |
  842. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  843. **[⬆ back to top](#quick-links)**
  844. ### _.includes
  845. Checks if a value is in collection.
  846. ```js
  847. var array = [1, 2, 3]
  848. // Underscore/Lodash - also called _.contains
  849. _.includes(array, 1)
  850. // output: true
  851. // Native
  852. var array = [1, 2, 3]
  853. array.includes(1)
  854. // output: true
  855. // Native (does not use same value zero)
  856. var array = [1, 2, 3]
  857. array.indexOf(1) > -1
  858. // output: true
  859. ```
  860. #### Browser Support for `Array.prototype.includes`
  861. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  862. :-: | :-: | :-: | :-: | :-: | :-: |
  863. 47.0 ✔ | 14.0 ✔ | 43.0 ✔ | ✖ | 34.0 ✔ | 9.0 ✔ |
  864. #### Browser Support for `Array.prototype.indexOf`
  865. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  866. :-: | :-: | :-: | :-: | :-: | :-: |
  867. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  868. **[⬆ back to top](#quick-links)**
  869. ### _.keyBy
  870. :heavy_exclamation_mark: `Not in Underscore.js`
  871. Creates an object composed of keys generated from the results of running each element of collection through iteratee.
  872. ```js
  873. // Lodash
  874. console.log(_.keyBy(['a', 'b', 'c']))
  875. // output: { a: 'a', b: 'b', c: 'c' }
  876. console.log(_.keyBy([{ id: 'a1', title: 'abc' }, { id: 'b2', title: 'def' }], 'id')
  877. // output: { a1: { id: 'a1', title: 'abc' }, b2: { id: 'b2', title: 'def' } }
  878. console.log(_.keyBy({ data: { id: 'a1', title: 'abc' }}, 'id')
  879. // output: { a1: { id: 'a1', title: 'abc' }}
  880. // keyBy for array only
  881. const keyBy = (array, key) => (array || []).reduce((r, x) => ({ ...r, [key ? x[key] : x]: x }), {});
  882. // Native
  883. console.log(keyBy(['a', 'b', 'c']))
  884. // output: { a: 'a', b: 'b', c: 'c' }
  885. console.log(keyBy([{ id: 'a1', title: 'abc' }, { id: 'b2', title: 'def' }], 'id')
  886. // output: { a1: { id: 'a1', title: 'abc' }, b2: { id: 'b2', title: 'def' } }
  887. console.log(keyBy(Object.values({ data: { id: 'a1', title: 'abc' }}), 'id')
  888. // output: { a1: { id: 'a1', title: 'abc' }}
  889. // keyBy for array and object
  890. const collectionKeyBy = (collection, key) => {
  891. const c = collection || {};
  892. return c.isArray() ? keyBy(c, key) : Object.values(keyBy(c, key));
  893. }
  894. ```
  895. #### Browser Support for `Array.prototype.reduce()`
  896. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  897. :-: | :-: | :-: | :-: | :-: | :-: |
  898. ✔ | 12.0 ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  899. **[⬆ back to top](#quick-links)**
  900. ### _.map
  901. Translates all items in an array or object to new array of items.
  902. ```js
  903. // Underscore/Lodash
  904. var array1 = [1, 2, 3]
  905. var array2 = _.map(array1, function (value, index) {
  906. return value * 2
  907. })
  908. console.log(array2)
  909. // output: [2, 4, 6]
  910. // Native
  911. var array1 = [1, 2, 3]
  912. var array2 = array1.map(function (value, index) {
  913. return value * 2
  914. })
  915. console.log(array2)
  916. // output: [2, 4, 6]
  917. ```
  918. #### Browser Support for `Array.prototype.map()`
  919. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  920. :-: | :-: | :-: | :-: | :-: | :-: |
  921. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  922. **[⬆ back to top](#quick-links)**
  923. ### _.minBy and _.maxBy
  924. Use Array#reduce for find the maximum or minimum collection item
  925. ```js
  926. // Underscore/Lodash
  927. var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  928. var minItem = _.minBy(data, 'value')
  929. var maxItem = _.maxBy(data, 'value')
  930. console.log(minItem, maxItem)
  931. // output: { value: 2 } { value: 6 }
  932. // Native
  933. var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  934. var minItem = data.reduce(function(a, b) { return a.value <= b.value ? a : b }, {})
  935. var maxItem = data.reduce(function(a, b) { return a.value >= b.value ? a : b }, {})
  936. console.log(minItem, maxItem)
  937. // output: { value: 2 }, { value: 6 }
  938. ```
  939. Extract a functor and use es2015 for better code
  940. ```js
  941. // utils
  942. const makeSelect = (comparator) => (a, b) => comparator(a, b) ? a : b
  943. const minByValue = makeSelect((a, b) => a.value <= b.value)
  944. const maxByValue = makeSelect((a, b) => a.value >= b.value)
  945. // main logic
  946. const data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  947. const minItem = data.reduce(minByValue, {})
  948. const maxItem = data.reduce(maxByValue, {})
  949. console.log(minItem, maxItem)
  950. // output: { value: 2 }, { value: 6 }
  951. // or also more universal and little slower variant of minBy
  952. const minBy = (collection, key) => {
  953. // slower because need to create a lambda function for each call...
  954. const select = (a, b) => a[key] <= b[key] ? a : b
  955. return collection.reduce(select, {})
  956. }
  957. console.log(minBy(data, 'value'))
  958. // output: { value: 2 }
  959. ```
  960. #### Browser Support for `Array.prototype.reduce()`
  961. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  962. :-: | :-: | :-: | :-: | :-: | :-: |
  963. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  964. **[⬆ back to top](#quick-links)**
  965. ### _.pluck
  966. `array.map` or `_.map` can also be used to replace `_.pluck`. Lodash v4.0 removed `_.pluck` in favor of `_.map` with iteratee shorthand. Details can be found in [Changelog](https://github.com/lodash/lodash/wiki/Changelog)
  967. ```js
  968. // Underscore/Lodash
  969. var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  970. var names = _.pluck(array1, "name")
  971. console.log(names)
  972. // output: ["Alice", "Bob", "Jeremy"]
  973. // Native
  974. var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  975. var names = array1.map(function(x){
  976. return x.name
  977. })
  978. console.log(names)
  979. // output: ["Alice", "Bob", "Jeremy"]
  980. ```
  981. #### Browser Support for `Array.prototype.map()`
  982. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  983. :-: | :-: | :-: | :-: | :-: | :-: |
  984. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  985. **[⬆ back to top](#quick-links)**
  986. ### _.reduce
  987. Applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.
  988. ```js
  989. // Underscore/Lodash
  990. var array = [0, 1, 2, 3, 4]
  991. var result = _.reduce(array, function (previousValue, currentValue, currentIndex, array) {
  992. return previousValue + currentValue
  993. })
  994. console.log(result)
  995. // output: 10
  996. // Native
  997. var array = [0, 1, 2, 3, 4]
  998. var result = array.reduce(function (previousValue, currentValue, currentIndex, array) {
  999. return previousValue + currentValue
  1000. })
  1001. console.log(result)
  1002. // output: 10
  1003. ```
  1004. #### Browser Support for `Array.prototype.reduce()`
  1005. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1006. :-: | :-: | :-: | :-: | :-: | :-: |
  1007. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  1008. **[⬆ back to top](#quick-links)**
  1009. ### _.range
  1010. Creates an array of numbers progressing from start up to.
  1011. ```js
  1012. // Underscore/Lodash
  1013. _.range(4) // output: [0, 1, 2, 3]
  1014. _.range(-4) // output: [0, -1, -2, -3]
  1015. _.range(1, 5) // output: [1, 2, 3, 4]
  1016. _.range(0, 20, 5) // output: [0, 5, 10, 15]
  1017. // Native ( solution with Array.from )
  1018. Array.from({length: 4}, (_, i) => i) // output: [0, 1, 2, 3]
  1019. Array.from({length: 4}, (_, i) => -i) // output: [-0, -1, -2, -3]
  1020. Array.from({length: 4}, (_, i) => i + 1) // output: [1, 2, 3, 4]
  1021. Array.from({length: 4}, (_, i) => i * 5) // output: [0, 5, 10, 15]
  1022. // Native ( solution with keys() and spread )
  1023. [...Array(4).keys()] // output: [0, 1, 2, 3]
  1024. [...Array(4).keys()].map(k => -k) // output: [-0, -1, -2, -3]
  1025. [...Array(4).keys()].map(k => k + 1) // output: [1, 2, 3, 4]
  1026. [...Array(4).keys()].map(k => k * 5) // output: [0, 5, 10, 15]
  1027. ```
  1028. #### Browser Support for `Array.from()`
  1029. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1030. :-: | :-: | :-: | :-: | :-: | :-: |
  1031. 45.0 ✔ | ✔ | 32.0 ✔ | ✖ | ✔ | 9.0 ✔ |
  1032. #### Browser Support for keys and spread in Array literals
  1033. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1034. :-: | :-: | :-: | :-: | :-: | :-: |
  1035. 46.0 ✔ | 12.0 ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 7.1 ✔ |
  1036. **[⬆ back to top](#quick-links)**
  1037. ### _.reduceRight
  1038. This method is like _.reduce except that it iterates over elements of collection from right to left.
  1039. ```js
  1040. // Underscore/Lodash
  1041. var array = [0, 1, 2, 3, 4]
  1042. var result = _.reduceRight(array, function (previousValue, currentValue, currentIndex, array) {
  1043. return previousValue - currentValue
  1044. })
  1045. console.log(result)
  1046. // output: -2
  1047. // Native
  1048. var array = [0, 1, 2, 3, 4]
  1049. var result = array.reduceRight(function (previousValue, currentValue, currentIndex, array) {
  1050. return previousValue - currentValue
  1051. })
  1052. console.log(result)
  1053. // output: -2
  1054. ```
  1055. #### Browser Support for `Array.prototype.reduceRight()`
  1056. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1057. :-: | :-: | :-: | :-: | :-: | :-: |
  1058. ✔ | ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  1059. **[⬆ back to top](#quick-links)**
  1060. ### _.sample
  1061. Gets a random element from `array`.
  1062. ```js
  1063. // Underscore/Lodash
  1064. const array = [0, 1, 2, 3, 4]
  1065. const result = _.sample(array)
  1066. console.log(result)
  1067. // output: 2
  1068. // Native
  1069. const array = [0, 1, 2, 3, 4]
  1070. const sample = arr => {
  1071. const len = arr == null ? 0 : arr.length
  1072. return len ? arr[Math.floor(Math.random() * len)] : undefined
  1073. }
  1074. const result = sample(array)
  1075. console.log(result)
  1076. // output: 2
  1077. ```
  1078. #### Browser Support for `Array.prototype.length()` and `Math.random()`
  1079. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1080. :-: | :-: | :-: | :-: | :-: | :-: |
  1081. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1082. **[⬆ back to top](#quick-links)**
  1083. ### _.size
  1084. Returns the number of values in the collection.
  1085. ```js
  1086. // Underscore/Lodash
  1087. var result = _.size({one: 1, two: 2, three: 3})
  1088. console.log(result)
  1089. // output: 3
  1090. // Native
  1091. var result2 = Object.keys({one: 1, two: 2, three: 3}).length
  1092. console.log(result2)
  1093. // output: 3
  1094. ```
  1095. #### Browser Support for `Object.keys()`
  1096. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1097. :-: | :-: | :-: | :-: | :-: | :-: |
  1098. 5.0 ✔ | ✔ | 4.0 ✔ | 9.0 ✔ | 12.0 ✔ | 5.0 ✔ |
  1099. **[⬆ back to top](#quick-links)**
  1100. ### _.some
  1101. Tests whether any of the elements in the array pass the test implemented by the provided function.
  1102. ```js
  1103. // Underscore/Lodash
  1104. function isLargerThanTen (element, index, array) {
  1105. return element >= 10
  1106. }
  1107. var array = [10, 9, 8]
  1108. var result = _.some(array, isLargerThanTen)
  1109. console.log(result)
  1110. // output: true
  1111. // Native
  1112. function isLargerThanTen (element, index, array) {
  1113. return element >= 10
  1114. }
  1115. var array = [10, 9, 8]
  1116. var result = array.some(isLargerThanTen)
  1117. console.log(result)
  1118. // output: true
  1119. ```
  1120. #### Browser Support for `Array.prototype.some()`
  1121. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1122. :-: | :-: | :-: | :-: | :-: | :-: |
  1123. ✔ | ✔ | 1.5 ✔ | ✔ 9.0 | ✔ | ✔ |
  1124. **[⬆ back to top](#quick-links)**
  1125. ### _.sortBy and _.orderBy
  1126. Sorts an array of object based on an object key provided by a parameter (note this is more limited than Underscore/Lodash).
  1127. ```js
  1128. const fruits = [
  1129. {name:"banana", amount: 2},
  1130. {name:"apple", amount: 4},
  1131. {name:"pineapple", amount: 2},
  1132. {name:"mango", amount: 1}
  1133. ];
  1134. // Underscore
  1135. _.sortBy(fruits, 'name');
  1136. // => [{name:"apple", amount: 4}, {name:"banana", amount: 2}, {name:"mango", amount: 1}, {name:"pineapple", amount: 2}]
  1137. // Lodash
  1138. _.orderBy(fruits, ['name'],['asc']);
  1139. // => [{name:"apple", amount: 4}, {name:"banana", amount: 2}, {name:"mango", amount: 1}, {name:"pineapple", amount: 2}]
  1140. // Native
  1141. const sortBy = (key) => {
  1142. return (a, b) => (a[key] > b[key]) ? 1 : ((b[key] > a[key]) ? -1 : 0);
  1143. };
  1144. // The native sort modifies the array in place. `_.orderBy` and `_.sortBy` do not, so we use `.concat()` to
  1145. // copy the array, then sort.
  1146. fruits.concat().sort(sortBy("name"));
  1147. // => [{name:"apple", amount: 4}, {name:"banana", amount: 2}, {name:"mango", amount: 1}, {name:"pineapple", amount: 2}]
  1148. ```
  1149. #### Browser Support for `Array.prototype.concat()` and `Array.prototype.sort()`
  1150. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1151. :-: | :-: | :-: | :-: | :-: | :-: |
  1152. 1.0 ✔ | ✔ | 1.0 ✔ | 5.5 ✔ | ✔ | ✔ |
  1153. **[⬆ back to top](#quick-links)**
  1154. ### _.uniq
  1155. Produces a duplicate-free version of the array, using === to test object equality.
  1156. ```js
  1157. // Underscore/Lodash
  1158. var array = [1, 2, 1, 4, 1, 3]
  1159. var result = _.uniq(array)
  1160. console.log(result)
  1161. // output: [1, 2, 4, 3]
  1162. // Native
  1163. var array = [1, 2, 1, 4, 1, 3];
  1164. var result = [...new Set(array)];
  1165. console.log(result)
  1166. // output: [1, 2, 4, 3]
  1167. ```
  1168. #### Browser Support for Spread in array literals
  1169. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1170. :-: | :-: | :-: | :-: | :-: | :-: |
  1171. 46.0 ✔ | 12.0 ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 8.0 ✔ |
  1172. **[⬆ back to top](#quick-links)**
  1173. ## Function
  1174. ### _.after
  1175. :heavy_exclamation_mark:`Note this is an alternative implementation`
  1176. Creates a version of the function that will only be run after first being called count times. Useful for grouping asynchronous responses, where you want to be sure that all the async calls have finished, before proceeding.
  1177. ```js
  1178. var notes = ['profile', 'settings']
  1179. // Underscore/Lodash
  1180. var renderNotes = _.after(notes.length, render)
  1181. notes.forEach(function (note) {
  1182. console.log(note)
  1183. renderNotes()
  1184. })
  1185. // Native
  1186. notes.forEach(function (note, index) {
  1187. console.log(note)
  1188. if (notes.length === (index + 1)) {
  1189. render()
  1190. }
  1191. })
  1192. ```
  1193. #### Browser Support for `Array.prototype.forEach()`
  1194. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1195. :-: | :-: | :-: | :-: | :-: | :-: |
  1196. ✔ | ✔ | 1.5 ✔ | 9.0 ✔ | ✔ | ✔ |
  1197. **[⬆ back to top](#quick-links)**
  1198. ### _.bind
  1199. Create a new function that calls _func_ with _thisArg_ and _args_.
  1200. ```js
  1201. var objA = {
  1202. x: 66,
  1203. offsetX: function(offset) {
  1204. return this.x + offset;
  1205. }
  1206. }
  1207. var objB = {
  1208. x: 67
  1209. };
  1210. // Underscore/Lodash
  1211. var boundOffsetX = _.bind(objA.offsetX, objB, 0);
  1212. // Native
  1213. var boundOffsetX = objA.offsetX.bind(objB, 0);
  1214. ```
  1215. #### Browser Support for `Function.prototype.bind()`
  1216. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1217. :-: | :-: | :-: | :-: | :-: | :-: |
  1218. 7.0 ✔ | ✔ | 4.0 ✔ | 9.0 ✔ | 11.6 ✔ | 5.1 ✔ |
  1219. **[⬆ back to top](#quick-links)**
  1220. ### _.debounce
  1221. Create a new function that calls _func_ with _thisArg_ and _args_.
  1222. ```js
  1223. function debounce(func, wait, immediate) {
  1224. var timeout;
  1225. return function() {
  1226. var context = this, args = arguments;
  1227. clearTimeout(timeout);
  1228. timeout = setTimeout(function() {
  1229. timeout = null;
  1230. if (!immediate) func.apply(context, args);
  1231. }, wait);
  1232. if (immediate && !timeout) func.apply(context, args);
  1233. };
  1234. }
  1235. // Avoid costly calculations while the window size is in flux.
  1236. jQuery(window).on('resize', debounce(calculateLayout, 150));
  1237. ```
  1238. #### Browser Support for `debounce`
  1239. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1240. :-: | :-: | :-: | :-: | :-: | :-: |
  1241. 7.0 ✔ | ✔ | 4.0 ✔ | 9.0 ✔ | 11.6 ✔ | 5.1 ✔ |
  1242. **[⬆ back to top](#quick-links)**
  1243. ### _.partial
  1244. Create a new function that calls _func_ with _args_.
  1245. ```js
  1246. // Lodash
  1247. function greet(greeting, name) {
  1248. return greeting + ' ' + name;
  1249. }
  1250. var sayHelloTo = _.partial(greet, 'Hello');
  1251. var result = sayHelloTo('Jose')
  1252. console.log(result)
  1253. // output: 'Hello Jose'
  1254. // Native
  1255. function greet(greeting, name) {
  1256. return greeting + ' ' + name;
  1257. }
  1258. var sayHelloTo = (...args) => greet('Hello', ...args)
  1259. var result = sayHelloTo('Jose')
  1260. console.log(result)
  1261. // output: 'Hello Jose'
  1262. // Native
  1263. const partial = (func, ...boundArgs) => (...remainingArgs) => func(...boundArgs, ...remainingArgs)
  1264. var sayHelloTo = partial(greet, 'Hello');
  1265. var result = sayHelloTo('Jose')
  1266. console.log(result)
  1267. // output: 'Hello Jose'
  1268. ```
  1269. #### Browser Support for Spread
  1270. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1271. :-: | :-: | :-: | :-: | :-: | :-: |
  1272. 46.0 ✔ | 12.0 ✔ | 16.0 ✔ | ✖ | 37.0 ✔ | 8.0 ✔ |
  1273. **[⬆ back to top](#quick-links)**
  1274. ### _.throttle
  1275. Create a new function that limits calls to _func_ to once every given timeframe.
  1276. ```js
  1277. function throttle(func, timeFrame) {
  1278. var lastTime = 0;
  1279. return function () {
  1280. var now = new Date();
  1281. if (now - lastTime >= timeFrame) {
  1282. func();
  1283. lastTime = now;
  1284. }
  1285. };
  1286. }
  1287. // Avoid running the same function twice within the specified timeframe.
  1288. jQuery(window).on('resize', throttle(calculateLayout, 150));
  1289. ```
  1290. #### Browser Support for `throttle`
  1291. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1292. :-: | :-: | :-: | :-: | :-: | :-: |
  1293. 5.0 ✔ | 12.0 ✔ | 3.0 ✔ | 9.0 ✔ | 10.5 ✔ | 4.0 ✔ |
  1294. **[⬆ back to top](#quick-links)**
  1295. ## Lang
  1296. ### _.gt
  1297. Checks if value is greater than other.
  1298. ```js
  1299. // Lodash
  1300. console.log(_.gt(3, 1))
  1301. // output: true
  1302. // Native
  1303. console.log(3 > 1);
  1304. // output: true
  1305. ```
  1306. #### Browser Support
  1307. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1308. :-: | :-: | :-: | :-: | :-: | :-: |
  1309. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  1310. **[⬆ back to top](#quick-links)**
  1311. ### _.gte
  1312. Checks if value is greater than or equal to other.
  1313. ```js
  1314. // Lodash
  1315. console.log(_.gte(3, 1))
  1316. // output: true
  1317. // Native
  1318. console.log(3 >= 1);
  1319. // output: true
  1320. ```
  1321. #### Browser Support
  1322. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1323. :-: | :-: | :-: | :-: | :-: | :-: |
  1324. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  1325. **[⬆ back to top](#quick-links)**
  1326. ### _.isEmpty
  1327. Checks if value is an empty object or collection.
  1328. :heavy_exclamation_mark:`Note that the Native version does not support evaluating a Set or a Map`
  1329. ```js
  1330. // Lodash
  1331. console.log(_.isEmpty(null)
  1332. // output: true
  1333. console.log(_.isEmpty('')
  1334. // output: true
  1335. console.log(_.isEmpty({})
  1336. // output: true
  1337. console.log(_.isEmpty([])
  1338. // output: true
  1339. console.log(_.isEmpty({a: '1'})
  1340. // output: false
  1341. // Native
  1342. const isEmpty = obj => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
  1343. console.log(isEmpty(null)
  1344. // output: true
  1345. console.log(isEmpty('')
  1346. // output: true
  1347. console.log(isEmpty({})
  1348. // output: true
  1349. console.log(isEmpty([])
  1350. // output: true
  1351. console.log(isEmpty({a: '1'})
  1352. // output: false
  1353. ```
  1354. #### Browser Support for `Array.prototype.includes()`
  1355. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1356. :-: | :-: | :-: | :-: | :-: | :-: |
  1357. 47.0 ✔ | 14.0 ✔ | 43.0 ✔ | ✖ | 34.0 ✔ | 9.0 ✔ |
  1358. **[⬆ back to top](#quick-links)**
  1359. ### _.isFinite
  1360. Converts value to a finite number.
  1361. ```js
  1362. // Lodash
  1363. console.log(_.isFinite('3'))
  1364. // output: false
  1365. console.log(_.isFinite(3))
  1366. // output: true
  1367. // Native
  1368. console.log(Number.isFinite('3'))
  1369. // output: false
  1370. console.log(Number.isFinite(3))
  1371. // output: true
  1372. ```
  1373. #### Browser Support for `Number.isFinite()`
  1374. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1375. :-: | :-: | :-: | :-: | :-: | :-: |
  1376. 19.0 ✔ | ✔ | 16.0 ✔ | ✖ | 15.0 ✔ | 9.0 ✔ |
  1377. **[⬆ back to top](#quick-links)**
  1378. ### _.isInteger
  1379. Checks if value is an integer.
  1380. ```js
  1381. // Lodash
  1382. console.log(_.isInteger(3))
  1383. // output: true
  1384. console.log(_.isInteger('3'))
  1385. // output: false
  1386. // Native
  1387. console.log(Number.isInteger(3))
  1388. // output: true
  1389. console.log(Number.isInteger('3'))
  1390. // output: false
  1391. ```
  1392. #### Browser Support for `Number.isInteger()`
  1393. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1394. :-: | :-: | :-: | :-: | :-: | :-: |
  1395. ✔ | 12 ✔ | 16.0 ✔ | ✖ | ✔ | ✔ |
  1396. **[⬆ back to top](#quick-links)**
  1397. ### _.isNaN
  1398. Checks if a value is NaN.
  1399. ```js
  1400. // Underscore/Lodash
  1401. console.log(_.isNaN(NaN))
  1402. // output: true
  1403. // Native
  1404. console.log(isNaN(NaN))
  1405. // output: true
  1406. // ES6
  1407. console.log(Number.isNaN(NaN))
  1408. // output: true
  1409. ```
  1410. MDN:
  1411. >In comparison to the global `isNaN()` function, `Number.isNaN()` doesn't suffer the problem of forcefully converting the parameter to a number. This means it is now safe to pass values that would normally convert to `NaN`, but aren't actually the same value as `NaN`. This also means that only values of the type number, that are also `NaN`, return true. [Number.isNaN()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN)
  1412. Voice from the Lodash author:
  1413. >Lodash's `_.isNaN` is equiv to ES6 `Number.isNaN` which is different than the global `isNaN`.
  1414. >--- [jdalton](https://github.com/cht8687/You-Dont-Need-Lodash-Underscore/commit/b8559a603dccaaa2449b5a68a2d8325cf1fb29cd#)
  1415. #### Browser Support for `isNaN`
  1416. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1417. :-: | :-: | :-: | :-: | :-: | :-: |
  1418. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1419. #### Browser Support for `Number.isNaN`
  1420. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1421. :-: | :-: | :-: | :-: | :-: | :-: |
  1422. 25.0 ✔ | ✔ | 15.0 ✔ | ✖ | ✔ | 9.0 ✔ |
  1423. **[⬆ back to top](#quick-links)**
  1424. ### _.isNil
  1425. :heavy_exclamation_mark:`Not in Underscore.js`
  1426. Checks if value is null or undefined.
  1427. ```js
  1428. // Lodash
  1429. console.log(_.isNil(null))
  1430. // output: true
  1431. console.log(_.isNil(NaN))
  1432. // output: false
  1433. console.log(_.isNil(undefined))
  1434. // output: true
  1435. // Native
  1436. console.log(null == null);
  1437. // output: true
  1438. console.log(NaN == null);
  1439. // output: false
  1440. console.log(undefined == null)
  1441. // output: true
  1442. ```
  1443. #### Browser Support
  1444. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1445. :-: | :-: | :-: | :-: | :-: | :-: |
  1446. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  1447. **[⬆ back to top](#quick-links)**
  1448. ### _.isNull
  1449. Checks if value is null or undefined.
  1450. ```js
  1451. // Underscore/Lodash
  1452. console.log(_.isNull(null))
  1453. // output: true
  1454. console.log(_.isNull(void 0))
  1455. // output: false
  1456. // Native
  1457. console.log(null === null);
  1458. // output: true
  1459. console.log(void 0 === null);
  1460. // output: false
  1461. ```
  1462. #### Browser Support
  1463. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1464. :-: | :-: | :-: | :-: | :-: | :-: |
  1465. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  1466. **[⬆ back to top](#quick-links)**
  1467. ### _.isUndefined
  1468. Checks if value is undefined.
  1469. ```js
  1470. // Underscore/Lodash
  1471. console.log(_.isUndefined(a))
  1472. // output: true
  1473. // Native
  1474. console.log(typeof a === 'undefined');
  1475. // output: true
  1476. console.log(a === undefined);
  1477. // output: true
  1478. ```
  1479. #### Browser Support
  1480. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1481. :-: | :-: | :-: | :-: | :-: | :-: |
  1482. ✔ | ✔ | 1 ✔ | ✔ | ✔ | ✔ |
  1483. **[⬆ back to top](#quick-links)**
  1484. ## Object
  1485. ### _.assign
  1486. The method is used to copy the values of all enumerable own properties from one or more source objects to a target object.
  1487. ```js
  1488. // Underscore: _.extendOwn
  1489. // Lodash
  1490. function Foo() {
  1491. this.c = 3;
  1492. }
  1493. function Bar() {
  1494. this.e = 5;
  1495. }
  1496. Foo.prototype.d = 4;
  1497. Bar.prototype.f = 6;
  1498. var result = _.assign(new Foo, new Bar);
  1499. console.log(result);
  1500. // output: { 'c': 3, 'e': 5 }
  1501. // Native
  1502. function Foo() {
  1503. this.c = 3;
  1504. }
  1505. function Bar() {
  1506. this.e = 5;
  1507. }
  1508. Foo.prototype.d = 4;
  1509. Bar.prototype.f = 6;
  1510. var result = Object.assign({}, new Foo, new Bar);
  1511. console.log(result);
  1512. // output: { 'c': 3, 'e': 5 }
  1513. ```
  1514. #### Browser Support for `Object.assign()`
  1515. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1516. :-: | :-: | :-: | :-: | :-: | :-: |
  1517. 45.0 ✔ | ✔ | 34.0 ✔ | ✖ | 32.0 ✔ | 9.0 ✔ |
  1518. **[⬆ back to top](#quick-links)**
  1519. ### _.extend
  1520. The method is used to copy the values of all enumerable own and inherited properties from one or more source objects to a target object.
  1521. ```js
  1522. // Underscore
  1523. // Lodash: _.assignIn
  1524. function Foo() {
  1525. this.c = 3;
  1526. }
  1527. function Bar() {
  1528. this.e = 5;
  1529. }
  1530. Foo.prototype.d = 4;
  1531. Bar.prototype.f = 6;
  1532. var result = _.extend({}, new Foo, new Bar);
  1533. console.log(result);
  1534. // output: { 'c': 3, 'd': 4, 'e': 5, 'f': 6 }
  1535. // Native
  1536. function Foo() {
  1537. this.c = 3;
  1538. }
  1539. function Bar() {
  1540. this.e = 5;
  1541. }
  1542. Foo.prototype.d = 4;
  1543. Bar.prototype.f = 6;
  1544. var result = Object.assign({}, new Foo, Foo.prototype, new Bar, Bar.prototype);
  1545. console.log(result);
  1546. // output: { 'c': 3, 'd': 4, 'e': 5, 'f': 6 }
  1547. //Or using a function
  1548. const extend = (target, ...sources) => {
  1549. const length = sources.length;
  1550. if (length < 1 || target == null) return target;
  1551. for (let i = 0; i < length; i++) {
  1552. const source = sources[i];
  1553. for (const key in source) {
  1554. target[key] = source[key];
  1555. }
  1556. }
  1557. return target;
  1558. };
  1559. console.log(extend({}, new Foo, new Bar));
  1560. // output: { 'c': 3, 'd': 4, 'e': 5, 'f': 6 }
  1561. ```
  1562. #### Browser Support for `Object.assign()`
  1563. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1564. :-: | :-: | :-: | :-: | :-: | :-: |
  1565. 45.0 ✔ | ✔ | 34.0 ✔ | ✖ | 32.0 ✔ | 9.0 ✔ |
  1566. **[⬆ back to top](#quick-links)**
  1567. ### _.get
  1568. Gets the value at path of object.
  1569. *Note: If provided path does not exists inside the object js will generate error.*
  1570. ```js
  1571. // Lodash
  1572. var object = { a: [{ b: { c: 3 } }] };
  1573. var result = _.get(object, 'a[0].b.c', 1);
  1574. console.log(result);
  1575. // output: 3
  1576. // Native (ES6 - IE not supported)
  1577. var object = { a: [{ b: { c: 3 } }] };
  1578. var { a: [{ b: { c: result2 = 1 } }] } = object;
  1579. console.log(result2);
  1580. // output: 3
  1581. // Native
  1582. const get = (obj, path, defaultValue) => {
  1583. const travel = regexp =>
  1584. String.prototype.split
  1585. .call(path, regexp)
  1586. .filter(Boolean)
  1587. .reduce((res, key) => (res !== null && res !== undefined ? res[key] : res), obj);
  1588. const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
  1589. return result === undefined || result === obj ? defaultValue : result;
  1590. };
  1591. var object = { a: [{ b: { c: 3 } }] };
  1592. var result = get(object, 'a[0].b.c', 1);
  1593. // output: 3
  1594. ```
  1595. #### Browser Support for Object destructing
  1596. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1597. :-: | :-: | :-: | :-: | :-: | :-: |
  1598. 49.0 ✔ | 14.0 ✔ | 41.0 ✔ | ✖ | 41.0 ✔ | 8.0 ✔ |
  1599. **[⬆ back to top](#quick-links)**
  1600. ### _.keys
  1601. Retrieves all the names of the object's own enumerable properties.
  1602. ```js
  1603. // Underscore/Lodash
  1604. var result = _.keys({one: 1, two: 2, three: 3})
  1605. console.log(result)
  1606. // output: ["one", "two", "three"]
  1607. // Native
  1608. var result2 = Object.keys({one: 1, two: 2, three: 3})
  1609. console.log(result2)
  1610. // output: ["one", "two", "three"]
  1611. ```
  1612. #### Browser Support for `Object.keys()`
  1613. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1614. :-: | :-: | :-: | :-: | :-: | :-: |
  1615. 5.0 ✔ | ✔ | 4.0 ✔ | 9.0 ✔ | 12.0 ✔ | 5.0 ✔ |
  1616. **[⬆ back to top](#quick-links)**
  1617. ### _.omit
  1618. Returns a copy of the object, filtered to omit the keys specified.
  1619. ```js
  1620. var object = { 'a': 1, 'b': '2', 'c': 3 };
  1621. // Underscore/Lodash
  1622. var result = _.omit(object, ['a', 'c']);
  1623. console.log(result)
  1624. // output: { 'b': '2' }
  1625. // Native
  1626. var { a, c, ...result2 } = object;
  1627. console.log(result2)
  1628. // output: { 'b': '2' }
  1629. ```
  1630. #### Browser Support for Spread in object literals
  1631. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1632. :-: | :-: | :-: | :-: | :-: | :-: |
  1633. 60.0 ✔ | ✖ | 55.0 ✔ | ✖ | 37.0 ✔ | ✖ |
  1634. **[⬆ back to top](#quick-links)**
  1635. ### _.pick
  1636. Creates an object composed of the object properties predicate returns truthy for.
  1637. ```js
  1638. var object = { 'a': 1, 'b': '2', 'c': 3 };
  1639. // Underscore/Lodash
  1640. var result = _.pick(object, ['a', 'c']);
  1641. console.log(result)
  1642. // output: {a: 1, c: 3}
  1643. // Native
  1644. const { a, c } = object;
  1645. const result = { a, c};
  1646. console.log(result);
  1647. // output: {a: 1, c: 3}
  1648. // for an array of this object --> array.map(({a, c}) => ({a, c}));
  1649. // Native
  1650. function pick(object, keys) {
  1651. return keys.reduce((obj, key) => {
  1652. if (object && object.hasOwnProperty(key)) {
  1653. obj[key] = object[key];
  1654. }
  1655. return obj;
  1656. }, {});
  1657. }
  1658. var result = pick(object, ['a', 'c']);
  1659. console.log(result)
  1660. // output: {a: 1, c: 3}
  1661. ```
  1662. #### Browser Support
  1663. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1664. :-: | :-: | :-: | :-: | :-: | :-: |
  1665. 38.0 ✔ | ✔ | 13.0 ✔ | 12.0 ✔ | 25.0 ✔ | 7.1 ✔ |
  1666. **[⬆ back to top](#quick-links)**
  1667. ### _.pickBy
  1668. Creates an object composed of the object properties predicate returns truthy for.
  1669. ```js
  1670. var object = { 'a': 1, 'b': null, 'c': 3, 'd': false, 'e': undefined };
  1671. // Underscore/Lodash
  1672. var result = _.pickBy(object);
  1673. console.log(result)
  1674. // output: {a: 1, c: 3}
  1675. // Native
  1676. function pickBy(object) {
  1677. const obj = {};
  1678. for (const key in object) {
  1679. if (object[key]) {
  1680. obj[key] = object[key];
  1681. }
  1682. }
  1683. return obj;
  1684. }
  1685. var result = pickBy(object);
  1686. console.log(result)
  1687. // output: {a: 1, c: 3}
  1688. ```
  1689. #### Browser Support
  1690. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1691. :-: | :-: | :-: | :-: | :-: | :-: |
  1692. ✔ | ✔ | ✔ | 6.0 ✔ | ✔ | ✔ |
  1693. **[⬆ back to top](#quick-links)**
  1694. ### _.toPairs
  1695. Retrieves all the given object's own enumerable property `[ key, value ]` pairs.
  1696. ```js
  1697. // Underscore - also called _.pairs
  1698. // Lodash - also called _.entries
  1699. var result = _.toPairs({one: 1, two: 2, three: 3})
  1700. console.log(result)
  1701. // output: [["one", 1], ["two", 2], ["three", 3]]
  1702. // Native
  1703. var result2 = Object.entries({one: 1, two: 2, three: 3})
  1704. console.log(result2)
  1705. // output: [["one", 1], ["two", 2], ["three", 3]]
  1706. ```
  1707. #### Browser Support for `Object.entries()`
  1708. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1709. :-: | :-: | :-: | :-: | :-: | :-: |
  1710. 54.0 ✔ | 14.0 ✔ | 47.0 ✔ | ✖ | 41.0 ✔ | 10.1 ✔ |
  1711. **[⬆ back to top](#quick-links)**
  1712. ### _.values
  1713. Retrieves all the given object's own enumerable property values.
  1714. ```js
  1715. // Underscore/Lodash
  1716. var result = _.values({one: 1, two: 2, three: 3})
  1717. console.log(result)
  1718. // output: [1, 2, 3]
  1719. // Native
  1720. var result2 = Object.values({one: 1, two: 2, three: 3})
  1721. console.log(result2)
  1722. // output: [1, 2, 3]
  1723. ```
  1724. #### Browser Support for `Object.values()`
  1725. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1726. :-: | :-: | :-: | :-: | :-: | :-: |
  1727. 54.0 ✔ | 14.0 ✔ | 47.0 ✔ | ✖ | 41.0 ✔ | 10.1 ✔ |
  1728. **[⬆ back to top](#quick-links)**
  1729. ## String
  1730. ### _.endsWith
  1731. :heavy_exclamation_mark:`Not in Underscore.js`
  1732. Checks if string ends with the given target string.
  1733. ```js
  1734. // Lodash
  1735. _.endsWith('abc', 'c');
  1736. // => true
  1737. _.endsWith('abc', 'b');
  1738. // => false
  1739. _.endsWith('abc', 'b', 2);
  1740. // => true
  1741. // Native
  1742. 'abc'.endsWith('c');
  1743. // => true
  1744. 'abc'.endsWith('b');
  1745. // => false
  1746. 'abc'.endsWith('b', 2);
  1747. // => true
  1748. ```
  1749. #### Browser Support for `String.prototype.endsWith()`
  1750. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1751. :-: | :-: | :-: | :-: | :-: | :-: |
  1752. 41.0 ✔ | ✔ | 17.0 ✔ | ✖ | 28.0 ✔ | 9.0 ✔ |
  1753. **[⬆ back to top](#quick-links)**
  1754. ### _.isString
  1755. :heavy_exclamation_mark:`Not in Underscore.js`
  1756. Checks if string ends with the given target string.
  1757. ```js
  1758. // Lodash
  1759. _.isString('abc');
  1760. // => true
  1761. _.isString(123);
  1762. // => false
  1763. // Native
  1764. function isString(str){
  1765. if (str && typeof str.valueOf() === "string") {
  1766. return true
  1767. }
  1768. return false
  1769. }
  1770. isString('abc');
  1771. // => true
  1772. isString(123);
  1773. // => false
  1774. ```
  1775. #### Browser Support for `String.prototype.endsWith()`
  1776. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1777. :-: | :-: | :-: | :-: | :-: | :-: |
  1778. 41.0 ✔ | ✔ | 17.0 ✔ | ✔ | 28.0 ✔ | 9.0 ✔ |
  1779. **[⬆ back to top](#quick-links)**
  1780. ### _.padStart and _.padEnd
  1781. :heavy_exclamation_mark:`Not in Underscore.js`
  1782. Pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length.
  1783. ```js
  1784. // Lodash
  1785. console.log(_.padStart('123', 5, '0'))
  1786. // output: '00123'
  1787. console.log(_.padEnd('123', 5, '0'))
  1788. // output: '12300'
  1789. // Native
  1790. console.log('123'.padStart(5, '0'))
  1791. // output: '00123'
  1792. console.log('123'.padEnd(5, '0'))
  1793. // output: '12300'
  1794. ```
  1795. #### Browser Support for `String.prototype.padStart()` and `String.prototype.padEnd()`
  1796. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1797. :-: | :-: | :-: | :-: | :-: | :-: |
  1798. 57.0 ✔ | 15.0 ✔ | 48.0 ✔ | ✖ | 44.0 ✔ | 10.0 ✔ |
  1799. **[⬆ back to top](#quick-links)**
  1800. ### _.startsWith
  1801. :heavy_exclamation_mark:`Not in Underscore.js`
  1802. Checks if string starts with the given target string.
  1803. ```js
  1804. // Lodash
  1805. var result = _.startsWith('abc', 'b', 1)
  1806. console.log(result)
  1807. // output: true
  1808. // Native
  1809. var result = 'abc'.startsWith('b', 1)
  1810. console.log(result)
  1811. // output: true
  1812. ```
  1813. #### Browser Support for `String.prototype.startsWith()`
  1814. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1815. :-: | :-: | :-: | :-: | :-: | :-: |
  1816. 41.0 ✔ | ✔ | 17.0 ✔ | ✖ | 28.0 ✔ | 9.0 ✔ |
  1817. **[⬆ back to top](#quick-links)**
  1818. ### _.repeat
  1819. :heavy_exclamation_mark:`Not in Underscore.js`
  1820. Repeats the given string n times.
  1821. ```js
  1822. // Lodash
  1823. var result = _.repeat('abc', 2)
  1824. console.log(result)
  1825. // output: 'abcabc'
  1826. // Native
  1827. var result = 'abc'.repeat(2)
  1828. console.log(result)
  1829. // output: 'abcabc'
  1830. ```
  1831. #### Browser Support for `String.prototype.repeat()`
  1832. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1833. :-: | :-: | :-: | :-: | :-: | :-: |
  1834. 41.0 ✔ | ✔ | 24.0 ✔ | ✖ | 28.0 ✔ | 9.0 ✔ |
  1835. **[⬆ back to top](#quick-links)**
  1836. ### _.replace
  1837. returns a new string with some or all matches of a `pattern` replaced by a `replacement`
  1838. ```js
  1839. // Lodash
  1840. var re = /apples/gi;
  1841. var str = 'Apples are round, and apples are juicy.';
  1842. var newstr = _.replace(str, re, 'oranges');
  1843. console.log(newstr);
  1844. // output: 'oranges are round, and oranges are juicy.'
  1845. // Native
  1846. var re = /apples/gi;
  1847. var str = 'Apples are round, and apples are juicy.';
  1848. var result = str.replace(re, 'oranges');
  1849. console.log(result);
  1850. // output: 'oranges are round, and oranges are juicy.'
  1851. ```
  1852. #### Browser Support for `String.prototype.replace()`
  1853. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1854. :-: | :-: | :-: | :-: | :-: | :-: |
  1855. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1856. **[⬆ back to top](#quick-links)**
  1857. ### _.split
  1858. :heavy_exclamation_mark:`Not in Underscore.js`
  1859. Splits string by separator.
  1860. ```js
  1861. // Lodash
  1862. var result = _.split('a-b-c', '-', 2)
  1863. console.log(result)
  1864. // output: ['a','b']
  1865. // Native
  1866. var result = 'a-b-c'.split('-', 2)
  1867. console.log(result)
  1868. // output: ['a','b']
  1869. ```
  1870. #### Browser Support for `String.prototype.split()`
  1871. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1872. :-: | :-: | :-: | :-: | :-: | :-: |
  1873. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1874. **[⬆ back to top](#quick-links)**
  1875. ### _.template
  1876. :heavy_exclamation_mark: *Note this is an alternative implementation. Native template literals not escape html.*
  1877. Create a template function.
  1878. ```js
  1879. // Lodash/Underscore
  1880. const compiled = _.template('hello <%= user %>!');
  1881. var result = compiled({ 'user': 'fred' });
  1882. console.log(result);
  1883. // output: 'hello fred'
  1884. // Native
  1885. const templateLiteral = (value) => `hello ${value.user}`;
  1886. var result = templateLiteral({ 'user': 'fred' });
  1887. console.log(result);
  1888. // output: 'hello fred'
  1889. ```
  1890. #### Browser Support for String (template) literals
  1891. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1892. :-: | :-: | :-: | :-: | :-: | :-: |
  1893. 41.0 ✔ | 12.0 ✔ | 34.0 ✔ | ✖ | 28.0 ✔ | 9.0 ✔ |
  1894. **[⬆ back to top](#quick-links)**
  1895. ### _.toLower
  1896. :heavy_exclamation_mark:`Not in Underscore.js`
  1897. Lowercases a given string.
  1898. ```js
  1899. // Lodash
  1900. var result = _.toLower('FOOBAR')
  1901. console.log(result)
  1902. // output: 'foobar'
  1903. // Native
  1904. var result = 'FOOBAR'.toLowerCase()
  1905. console.log(result)
  1906. // output: 'foobar'
  1907. ```
  1908. #### Browser Support for `String.prototype.toLowerCase()`
  1909. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1910. :-: | :-: | :-: | :-: | :-: | :-: |
  1911. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1912. **[⬆ back to top](#quick-links)**
  1913. ### _.toUpper
  1914. :heavy_exclamation_mark:`Not in Underscore.js`
  1915. Uppercases a given string.
  1916. ```js
  1917. // Lodash
  1918. var result = _.toUpper('foobar')
  1919. console.log(result)
  1920. // output: 'FOOBAR'
  1921. // Native
  1922. var result = 'foobar'.toUpperCase()
  1923. console.log(result)
  1924. // output: 'FOOBAR'
  1925. ```
  1926. #### Browser Support for `String.prototype.toUpperCase()`
  1927. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1928. :-: | :-: | :-: | :-: | :-: | :-: |
  1929. ✔ | ✔ | 1.0 ✔ | ✔ | ✔ | ✔ |
  1930. **[⬆ back to top](#quick-links)**
  1931. ### _.trim
  1932. :heavy_exclamation_mark:`Not in Underscore.js`
  1933. Removes the leading and trailing whitespace characters from a string.
  1934. ```js
  1935. // Lodash
  1936. var result = _.trim(' abc ')
  1937. console.log(result)
  1938. // output: 'abc'
  1939. // Native
  1940. var result = ' abc '.trim()
  1941. console.log(result)
  1942. // output: 'abc'
  1943. ```
  1944. #### Browser Support for `String.prototype.trim()`
  1945. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1946. :-: | :-: | :-: | :-: | :-: | :-: |
  1947. 5.0 ✔ | ✔ | 3.5 ✔ | 9.0 ✔ | 10.5 ✔ | 5.0 ✔ |
  1948. **[⬆ back to top](#quick-links)**
  1949. ### _.upperFirst
  1950. :heavy_exclamation_mark:`Not in Underscore.js`
  1951. Uppercases the first letter of a given string
  1952. ```js
  1953. // Lodash
  1954. var result = _.upperFirst('george')
  1955. console.log(result)
  1956. // output: 'George'
  1957. // Native
  1958. const upperFirst = (string) => {
  1959. return string ? string.charAt(0).toUpperCase() + string.slice(1) : ''
  1960. }
  1961. var result = upperFirst('george')
  1962. console.log(result)
  1963. // output: 'George'
  1964. ```
  1965. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1966. :-: | :-: | :-: | :-: | :-: | :-: |
  1967. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  1968. **[⬆ back to top](#quick-links)**
  1969. ## Reference
  1970. * [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
  1971. * [Underscore.js](http://underscorejs.org)
  1972. * [Lodash.js](https://lodash.com/docs)
  1973. ### _.uniq
  1974. Removes all duplicates entries from an array.
  1975. ```js
  1976. // Underscore/Lodash
  1977. var result = _.uniq([1, 2, 1, 4, 1, 3]);
  1978. console.log(result)
  1979. // output: [1, 2, 4, 3]
  1980. // Native
  1981. var result = [... new Set([1, 2, 1, 4, 1, 3])]
  1982. console.log(result)
  1983. // output: [1, 2, 4, 3]
  1984. ```
  1985. #### Browser Support for `new Set()`
  1986. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  1987. :-: | :-: | :-: | :-: | :-: | :-: |
  1988. 38.0 ✔ | ✔ 12.0 | 13.0 ✔ | 11.0 ✔ | 25.0 ✔ | 7.1 ✔ |
  1989. **[⬆ back to top](#quick-links)**
  1990. ## Util
  1991. ### _.times
  1992. Invokes the iteratee n times, returning an array of the results of each invocation.
  1993. ```js
  1994. // Lodash
  1995. var result = _.times(10)
  1996. console.log(result)
  1997. // output: '[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]'
  1998. // Native
  1999. var result = Array.from({length: 10}, (_,x) => x)
  2000. console.log(result)
  2001. // output: '[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]'
  2002. // Native
  2003. var result = [...Array(10).keys()]
  2004. console.log(result)
  2005. // output: '[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]'
  2006. ```
  2007. #### Browser Support for `Array.from()`
  2008. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  2009. :-: | :-: | :-: | :-: | :-: | :-: |
  2010. 45.0 ✔ | ✔ | 32.0 ✔ | ✖ | ✔ | 9.0 ✔ |
  2011. **[⬆ back to top](#quick-links)**
  2012. ## Number
  2013. ### _.clamp
  2014. Clamps number within the inclusive lower and upper bounds.
  2015. ```js
  2016. // Lodash
  2017. _.clamp(-10, -5, 5);
  2018. // => -5
  2019. _.clamp(10, -5, 5);
  2020. // => 5
  2021. _.clamp(10, -5);
  2022. // => -5
  2023. _.clamp(10, 99);
  2024. // => 10
  2025. // Native
  2026. const clamp = (number, boundOne, boundTwo) => {
  2027. if (!boundTwo) {
  2028. return Math.max(number, boundOne) === boundOne ? number : boundOne;
  2029. } else if (Math.min(number, boundOne) === number) {
  2030. return boundOne;
  2031. } else if (Math.max(number, boundTwo) === number) {
  2032. return boundTwo;
  2033. }
  2034. return number;
  2035. };
  2036. clamp(-10, -5, 5);
  2037. // => -5
  2038. clamp(10, -5, 5);
  2039. // => 5
  2040. clamp(10, -5);
  2041. // => -5
  2042. clamp(10, 99);
  2043. // => 10
  2044. ```
  2045. #### Browser Support for `Math.min() and Math.max()`
  2046. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  2047. :-: | :-: | :-: | :-: | :-: | :-: |
  2048. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  2049. **[⬆ back to top](#quick-links)**
  2050. ### _.inRange
  2051. Checks if n is between start and up to, but not including, end. If end is not specified, it's set to start with start then set to 0. If start is greater than end the params are swapped to support negative ranges.
  2052. ```js
  2053. // Lodash
  2054. _.inRange(3, 2, 4);
  2055. // output: true
  2056. _.inRange(-3, -2, -6);
  2057. // output: true
  2058. //Native
  2059. const inRange = (num, init, final) => {
  2060. if(final === undefined){
  2061. final = init;
  2062. init = 0;
  2063. }
  2064. return (num >= Math.min(init, final) && num < Math.max(init, final));
  2065. }
  2066. //Native
  2067. const inRange = (num, a, b=0) => (Math.min(a,b) <= num && num < Math.max(a,b));
  2068. inRange(3, 2, 4);
  2069. // output: true
  2070. inRange(-3, -2, -6);
  2071. // output: true
  2072. ```
  2073. #### Browser Support for `Math.min() and Math.max()`
  2074. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  2075. :-: | :-: | :-: | :-: | :-: | :-: |
  2076. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  2077. **[⬆ back to top](#quick-links)**
  2078. ### _.random
  2079. Produces a random number between the inclusive lower and upper bounds. If only one argument is provided a number between 0 and the given number is returned. If floating is true, or either lower or upper are floats, a floating-point number is returned instead of an integer.
  2080. ```js
  2081. // Lodash
  2082. _.random(0, 5);
  2083. // => an integer between 0 and 5
  2084. _.random(5);
  2085. // => also an integer between 0 and 5
  2086. _.random(5, true);
  2087. // => a floating-point number between 0 and 5
  2088. _.random(1.2, 5.2);
  2089. // => a floating-point number between 1.2 and 5.2
  2090. //Native ES6
  2091. const random = (a = 1, b = 0) => {
  2092. const lower = Math.min(a, b);
  2093. const upper = Math.max(a, b);
  2094. return lower + Math.random() * (upper - lower);
  2095. };
  2096. const randomInt = (a = 1, b = 0) => {
  2097. const lower = Math.ceil(Math.min(a, b));
  2098. const upper = Math.floor(Math.max(a, b));
  2099. return Math.floor(lower + Math.random() * (upper - lower + 1))
  2100. };
  2101. random();
  2102. // => a floating-point number between 0 and 1
  2103. random(5);
  2104. // => a floating-point number between 0 and 5
  2105. random(0, 5);
  2106. // => also a floating-point number between 0 and 5
  2107. random(1.2, 5.2);
  2108. // => a floating-point number between 1.2 and 5.2
  2109. randomInt();
  2110. // => just 0 or 1
  2111. randomInt(5);
  2112. // => an integer between 0 and 5
  2113. randomInt(0, 5);
  2114. // => also an integer between 0 and 5
  2115. randomInt(1.2, 5.2);
  2116. // => an integer between 2 and 5
  2117. ```
  2118. #### Browser Support for `Math.random()`
  2119. ![Chrome][chrome-image] | ![Edge][edge-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
  2120. :-: | :-: | :-: | :-: | :-: | :-: |
  2121. ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
  2122. **[⬆ back to top](#quick-links)**
  2123. ## Inspired by:
  2124. * [You-Dont-Need-jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery)
  2125. * [Rui's blog](http://ktei.github.io/2016/01/07/some-general-js-tips-1.html)
  2126. # License
  2127. MIT
  2128. [chrome-image]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
  2129. [firefox-image]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
  2130. [ie-image]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
  2131. [opera-image]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png
  2132. [safari-image]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png
  2133. [edge-image]:
  2134. https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png