You don't need Lodash Underscore

最新推荐文章于 2024-06-23 09:24:07 发布
最新推荐文章于 2024-06-23 09:24:07 发布
阅读量1.5k 收藏
点赞数
分类专栏： javascript

Lodash和Underscore是极好的js工具库，在前端开发中得到了广泛的使用。然而如果你想减少项目依赖，并且所支持的浏览器非常先进的话(IE8之前的除外)，你会发现在ES5与ES6中已经提供了非常多的原生方法，你可以不是用Lodash或者Underscore.

目录

Array

  1. _.compact
  2. _.concat
  3. _.fill
  4. _.find
  5. _.findIndex
  6. _.first
  7. _.flatten
  8. _.flattenDeep
  9. .head and .tail
  10. _.indexOf
  11. _.join
  12. _.last
  13. _.lastIndexOf
  14. _.reverse
  15. _.without
  16. _.slice
  17. _.isArray

Collection*
1. _.each
1. _.every
1. _.filter
1. _.groupBy
1. _.includes
1. _.map
1. .minBy and .maxBy
1. _.pluck
1. _.range
1. _.reduce
1. _.reduceRight
1. _.size
1. _.some

Function

  1. _.after

Lang

  1. _.isNaN

Object

  1. _.assign
  2. _.keys
  3. _.toPairs
  4. _.values

String

  1. _.repeat
  2. _.template
  3. _.toLower
  4. _.toUpper
  5. _.trim
  6. _.replace

注意

上述目录标记为*的表示只有数组提供了等同的原生方法。如果你想在对象上使用这些方法只能选择Lodash/Underscore.

Array

_.compact

移除数组中所有非真的数，并返回一个新的数组。

  // Underscore/Lodash
  _.compact([0, 1, false, 2, '', 3]);

  // Native
  [0, 1, false, 2, '', 3].filter(v => v)
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.concat

连接其他的数组或对象，并返回一个新的数组

  // Underscore/Lodash
  var array = [1]
  var other = _.concat(array, 2, [3], [[4]])

  console.log(other)
  // output: [1, 2, 3, [4]]

  // Native
  var array = [1]
  var other = array.concat(2, [3], [[4]])

  console.log(other)
  // output: [1, 2, 3, [4]]
浏览器支持
ChromeFirefoxIEOperaSafari
1.0 ✔1.0 ✔5.5 ✔✔✔

_.fill

填充数组，从某个位置开始到某个位置结束，但不包括结束位。

  // Underscore/Lodash
  var array = [1, 2, 3]

  _.fill(array, 'a')

  console.log(array)
  // output: ['a', 'a', 'a']

  _.fill(Array(3), 2)
  // output: [2, 2, 2]

  _.fill([4, 6, 8, 10], '*', 1, 3)
  // output: [4, '*', '*', 10]

  // Native
  var array = [1, 2, 3]

  array.fill('a')

  console.log(array)
  // output: ['a', 'a', 'a']

  Array(3).fill(2)
  // output: [2, 2, 2]

  [4, 6, 8, 10].fill('*', 1, 3)
  // output: [4, '*', '*', 10]
浏览器支持
ChromeFirefoxIEOperaSafari
45.0 ✔31.0 ✔Not supportedNot supported7.1 ✔

_.find

返回数组中第一个满足条件的值，否则返回undefined

  // Underscore/Lodash
  var users = [
    { 'user': 'barney',  'age': 36, 'active': true },
    { 'user': 'fred',    'age': 40, 'active': false },
    { 'user': 'pebbles', 'age': 1,  'active': true }
  ]

  _.find(users, function (o) { return o.age < 40; })
  // output: object for 'barney'

  // Native
  var users = [
    { 'user': 'barney',  'age': 36, 'active': true },
    { 'user': 'fred',    'age': 40, 'active': false },
    { 'user': 'pebbles', 'age': 1,  'active': true }
  ]

  users.find(function (o) { return o.age < 40; })
  // output: object for 'barney'
浏览器支持
ChromeFirefoxIEOperaSafari
45.0 ✔25.0 ✔Not supportedNot supported7.1 ✔

_.findIndex

返回数组中第一个满足条件的位置，如果未找到，则返回-1.

  // Underscore/Lodash
  var users = [
    { 'user': 'barney',  'age': 36, 'active': true },
    { 'user': 'fred',    'age': 40, 'active': false },
    { 'user': 'pebbles', 'age': 1,  'active': true }
  ]

  var index = _.findIndex(users, function (o) { return o.age >= 40; })
  console.log(index)
  // output: 1

  // Native
  var users = [
    { 'user': 'barney',  'age': 36, 'active': true },
    { 'user': 'fred',    'age': 40, 'active': false },
    { 'user': 'pebbles', 'age': 1,  'active': true }
  ]

  var index = users.findIndex(function (o) { return o.age >= 40; })
  console.log(index)
  // output: 1
浏览器支持
ChromeFirefoxIEOperaSafari
45.0 ✔25.0 ✔Not supportedNot supported7.1 ✔

_.first

返回数组中第一个或前几个元素.

  // Underscore/Lodash
  _.first([1, 2, 3, 4, 5]);
  // => 1

  _.first([1, 2, 3, 4, 5], 2);
  // => [1, 2]

  // Native
  [1, 2, 3, 4, 5][0];
  // => 1

  [1, 2, 3, 4, 5].slice(0, 2);
  // => [1, 2]
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.flatten

降低一级数组嵌套。

  // Underscore/Lodash
  _.flatten([1, [2, [3, [4]], 5]]);
  // => [1, 2, [3, [4]], 5]

  // Native
  const flatten = [1, [2, [3, [4]], 5]].reduce( (a, b) => a.concat(b), [])
  // => [1, 2, [3, [4]], 5]
浏览器支持
ChromeFirefoxIEOperaSafari
46.0 ✔16.0 ✔Not supportedNot supported7.1 ✔

_.flattenDeep

去除数组中所有其他数组.

  // Underscore/Lodash
  _.flattenDeep([1, [2, [3, [4]], 5]]);
  // => [1, 2, 3, 4, 5]

  // Native
  const flattenDeep = (arr) => Array.isArray(arr)
    ? arr.reduce( (a, b) => [...flattenDeep(a), ...flattenDeep(b)] , [])
    : [arr]

  flattenDeep([1, [[2], [3, [4]], 5]])
  // => [1, 2, 3, 4, 5]
浏览器支持
ChromeFirefoxIEOperaSafari
46.0 ✔16.0 ✔Not supportedNot supported7.1 ✔

.head and .tail

获得数组中的第一个元素；获得数组中除第一个元素之外的其他元素

  const array = [1, 2, 3]

  // Underscore: _.first, _.head, _.take
  // Lodash: _.first, _.head
  _.head(array)
  // output: 1

  // Underscore: _.rest, _.tail, _.drop
  // Lodash: _.tail
  _.tail(array)
  // output: [2, 3]


  // Native
  const [ head, ...tail ] = array
  console.log(head)
  // output: 1
  console.log(tail)
  // output [2, 3]
浏览器支持
ChromeFirefoxIEOperaSafari
49 ✔34 ✔Not SupportedNot Supported✔

_.indexOf

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1.

  var array = [2, 9, 9]
  var result = _.indexOf(array, 2)
  console.log(result)
  // output: 0

  // Native
  var array = [2, 9, 9]
  var result = array.indexOf(2)
  console.log(result)
  // output: 0
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.join

使用给定的分隔符连接数组中的所有元素

  // Lodash
  var result = _.join(['one', 'two', 'three'], '--')
  console.log(result)
  // output: 'one--two--three'

  // Native
  var result = ['one', 'two', 'three'].join('--')
  console.log(result)
  // output: 'one--two--three'
浏览器支持
ChromeFirefoxIEOperaSafari
1.0 ✔1.0 ✔5.5 ✔✔✔

_.last

返回数组中最后的一到多个元素.

  // Underscore/Lodash
  const numbers = [1, 2, 3, 4, 5];
  _.last(numbers);
  // => 5

  _.last(numbers, 2);
  // => [4, 5]

  // Native
  const numbers = [1, 2, 3, 4, 5];
  numbers[numbers.length - 1];
  // => 5
  //or
  numbers.slice(-1)[0];
  // => 5

  numbers.slice(-2);
  // => [4, 5]
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.lastIndexOf

返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1.

  // Underscore/Lodash
  var array = [2, 9, 9, 4, 3, 6]
  var result = _.lastIndexOf(array, 9)
  console.log(result)
  // output: 2

  // Native
  var array = [2, 9, 9, 4, 3, 6]
  var result = array.lastIndexOf(9)
  console.log(result)
  // output: 2
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔9 ✔✔✔

_.reverse

使数组中元素逆序.

  // Lodash
  var array = [1, 2, 3]
  console.log(_.reverse(array))
  // output: [3, 2, 1]

  // Native
  var array = [1, 2, 3]
  console.log(array.reverse())
  // output: [3, 2, 1]
浏览器支持
ChromeFirefoxIEOperaSafari
1.0 ✔1.0 ✔5.5 ✔✔✔

_.without

返回去除给定元素的数组

  // Lodash
  var array = [1, 2, 3]
  console.log(_.without(array, 2))
  // output: [1, 3]

  // Native
  var array = [1, 2, 3]
  console.log(array.filter(function(value) {
    return value !== 2;
  }));
  // output: [1, 3]
浏览器支持
ChromeFirefoxIEOperaSafari
1.0 ✔1.5 ✔9 ✔✔✔

_.slice

返回给定范围的一个浅拷贝数组.

  // Lodash
  var array = [1, 2, 3, 4]
  console.log(_.slice(array, 1, 3))
  // output: [2, 3]

  // Native
  var array = [1, 2, 3, 4]
  console.log(array.slice(1, 3));
  // output: [2, 3]
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.isArray

判断一个对象是不是数组.

  // Lodash
  var array = []
  console.log(_.isArray(array))
  // output: true

  // Native
  var array = []
  console.log(Array.isArray(array));
  // output: true

#### 浏览器支持

ChromeFirefoxIEOperaSafari
5 ✔4 ✔9 ✔10.5 ✔5 ✔

Collection*

_.each

迭代循环数组中的每个元素。

  // Underscore/Lodash
  _.each([1, 2, 3], function (value, index) {
    console.log(value)
  })
  // output: 1 2 3

  // Native
  [1, 2, 3].forEach(function (value, index) {
    console.log(value)
  })
  // output: 1 2 3
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.every

测试数组的所有元素是否都通过了指定函数的测试.

  // Underscore/Lodash
  function isLargerThanTen (element, index, array) {
    return element >= 10
  }
  var array = [10, 20, 30]
  var result = _.every(array, isLargerThanTen)
  console.log(result)
  // output: true

  // Native
  function isLargerThanTen (element, index, array) {
    return element >= 10
  }

  var array = [10, 20, 30]
  var result = array.every(isLargerThanTen)
  console.log(result)
  // output: true
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素.

  function isBigEnough (value) {
    return value >= 10
  }
  var array = [12, 5, 8, 130, 44]
  var filtered = _.filter(array, isBigEnough)
  console.log(filtered)
  // output: [12, 130, 44]

  // Native
  function isBigEnough (value) {
    return value >= 10
  }
  var array = [12, 5, 8, 130, 44]
  var filtered = array.filter(isBigEnough)
  console.log(filtered)
  // output: [12, 130, 44]
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.groupBy

根据关键字或者函数分组数组中的所有元素.

  // Underscore/Lodash
  var grouped = _.groupBy(['one', 'two', 'three'], 'length')
  console.log(grouped)
  // output: {3: ["one", "two"], 5: ["three"]}

  // Native
  var grouped = ['one', 'two', 'three'].reduce((r, v, i, a, k = v.length) => ((r[k] || (r[k] = [])).push(v), r), {})
  console.log(grouped)
  // output: {3: ["one", "two"], 5: ["three"]}
  // Underscore/Lodash
  var grouped = _.groupBy([1.3, 2.1, 2.4], num => Math.floor(num))
  console.log(grouped)
  // output: {1: [1.3], 2: [2.1, 2.4]}

  // Native
  var grouped = [1.3, 2.1, 2.4].reduce((r, v, i, a, k = Math.floor(v)) => ((r[k] || (r[k] = [])).push(v), r), {})
  console.log(grouped)
  // output: {1: [1.3], 2: [2.1, 2.4]}
浏览器支持
ChromeFirefoxIEOperaSafari
✔3.0 ✔9 ✔10.5 ✔4.0 ✔

_.includes

检测数组中是否存在某个元素.

  var array = [1, 2, 3]
  // Underscore/Lodash - also called _.contains
  _.includes(array, 1)
  // output: true

  // Native
  var array = [1, 2, 3]
  array.includes(1)
  // output: true

  // Native (does not use same value zero)
  var array = [1, 2, 3]
  array.indexOf(1) > -1
  // output: true
浏览器支持 for Array.prototype.includes
ChromeFirefoxIEOperaSafari
47 ✔43 ✔Not supported34 ✔9 ✔
浏览器支持 for Array.prototype.indexOf
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.map

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果.

  // Underscore/Lodash
  var array1 = [1, 2, 3]
  var array2 = _.map(array1, function (value, index) {
    return value * 2
  })
  console.log(array2)
  // output: [2, 4, 6]

  // Native
  var array1 = [1, 2, 3]
  var array2 = array1.map(function (value, index) {
    return value * 2
  })
  console.log(array2)
  // output: [2, 4, 6]

.minBy and .maxBy

获取数组中的最大或最小的值.

  // Underscore/Lodash
  var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  var minItem = _.minBy(data, 'value')
  var maxItem = _.maxBy(data, 'value')
  console.log(minItem, maxItem)
  // output: { value: 2 } { value: 6 }

  // Native
  var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  var minItem = data.reduce(function(a, b) { return a.value <= b.value ? a : b }, {})
  var maxItem = data.reduce(function(a, b) { return a.value >= b.value ? a : b }, {})
  console.log(minItem, maxItem)
  // output: { value: 2 }, { value: 6 }

  // ES6
  // utils
  const makeSelect = (comparator) => (a, b) => comparator(a, b) ? a : b
  const minByValue = makeSelect((a, b) => a.value <= b.value)
  const maxByValue = makeSelect((a, b) => a.value >= b.value)

  // main logic
  const data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  const minItem = data.reduce(minByValue, {})
  const maxItem = data.reduce(maxByValue, {})

  console.log(minItem, maxItem)
  // output: { value: 2 }, { value: 6 }

  // or also more universal and little slower variant of minBy
  const minBy = (collection, key) => {
    // slower because need to create a lambda function for each call...
    const select = (a, b) => a[key] <= b[key] ? a : b
    return collection.reduce(select, {})
  }

  console.log(minBy(data, 'value'))
  // output: { value: 2 }
浏览器支持
ChromeFirefoxIEOperaSafari
✔3.0 ✔9 ✔10.5 ✔4.0 ✔

_.pluck

抽取数组中元素对象的某个属性值组成一个新数组.

  // Underscore/Lodash
  var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  var names = _.pluck(array1, "name")
  console.log(names)
  // output: ["Alice", "Bob", "Jeremy"]

  // Native
  var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  var names = array1.map(function(x){
    return x.name
  })
  console.log(names)
  // output: ["Alice", "Bob", "Jeremy"]
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

_.reduce

对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值.

  // Underscore/Lodash
  var array = [0, 1, 2, 3, 4]
  var result = _.reduce(array, function (previousValue, currentValue, currentIndex, array) {
    return previousValue + currentValue
  })
  console.log(result)
  // output: 10

  // Native
  var array = [0, 1, 2, 3, 4]
  var result = array.reduce(function (previousValue, currentValue, currentIndex, array) {
    return previousValue + currentValue
  })
  console.log(result)
  // output: 10
浏览器支持
ChromeFirefoxIEOperaSafari
✔3.0 ✔9 ✔10.5 ✔4.0 ✔

_.range

创建一个填充好的数值数组.

  // Underscore/Lodash
  _.range(4)  // output: [0, 1, 2, 3]
  _.range(-4) // output: [0, -1, -2, -3]
  _.range(1, 5)     // output: [1, 2, 3, 4]
  _.range(0, 20, 5) // output: [0, 5, 10, 15]

  // Native ( solution with Array.from )
  Array.from({length: 4}, (_, i) => i)  // output: [0, 1, 2, 3]
  Array.from({length: 4}, (_, i) => -i) // output: [0, -1, -2, -3]
  Array.from({length: 4}, (_, i) => i + 1) // output: [1, 2, 3, 4]
  Array.from({length: 4}, (_, i) => i * 5) // output: [0, 5, 10, 15]

  // Native ( solution with keys() and spread )
  [...Array(4).keys()] // output: [0, 1, 2, 3]
浏览器支持 ( Array.from )
ChromeFirefoxIEOperaSafari
45 ✔32 ✔Not supported✔9.0 ✔
浏览器支持 ( keys and array spread )
ChromeFirefoxIEOperaSafari
46 ✔16 ✔Not supported37 ✔7.1 ✔

_.reduceRight

接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值.

  // Underscore/Lodash
  var array = [0, 1, 2, 3, 4]
  var result = _.reduceRight(array, function (previousValue, currentValue, currentIndex, array) {
    return previousValue - currentValue
  })
  console.log(result)
  // output: -2

  // Native
  var array = [0, 1, 2, 3, 4]
  var result = array.reduceRight(function (previousValue, currentValue, currentIndex, array) {
    return previousValue - currentValue
  })
  console.log(result)
  // output: -2
浏览器支持
ChromeFirefoxIEOperaSafari
✔3.0 ✔9 ✔10.5 ✔4.0 ✔

_.size

返回对象属性的个数.

  // Underscore/Lodash
  var result = _.size({one: 1, two: 2, three: 3})
  console.log(result)
  // output: 3

  // Native
  var result2 = Object.keys({one: 1, two: 2, three: 3}).length
  console.log(result2)
  // output: 3
浏览器支持
ChromeFirefoxIEOperaSafari
5 ✔4.0 ✔9 ✔12 ✔5 ✔

_.some

测试数组中的元素是否通过由提供的函数实现的测试，只要有不通过的则立即返回.

 // Underscore/Lodash
  function isLargerThanTen (element, index, array) {
    return element >= 10
  }
  var array = [10, 9, 8]
  var result = _.some(array, isLargerThanTen)
  console.log(result)
  // output: true

  // Native
  function isLargerThanTen (element, index, array) {
    return element >= 10
  }

  var array = [10, 9, 8]
  var result = array.some(isLargerThanTen)
  console.log(result)
  // output: true
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔

Function

_.after

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.

“`js
var notes = [‘profile’, ‘settings’]
// Underscore/Lodash
var renderNotes = _.after(notes.length, render)
notes.forEach(function (note) {
console.log(note)
renderNotes()
})

// Native
notes.forEach(function (note, index) {
console.log(note)
if (notes.length === (index + 1)) {
render()
}
})
“`

浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

Lang

_.isNaN

检测一个值是否不是一个数字.

  // Underscore/Lodash
  console.log(_.isNaN(NaN))
  // output: true

  // Native
  console.log(isNaN(NaN))
  // output: true

  // ES6
  console.log(Number.isNaN(NaN))
  // output: true
浏览器支持 for isNaN
ChromeFirefoxIEOperaSafari
✔✔✔✔✔
浏览器支持 for Number.isNaN
ChromeFirefoxIEOperaSafari
25 ✔15 ✔Not supported✔9 ✔

Object

_.assign

将所有可枚举属性的值从一个或多个源对象复制到目标对象.

  // Underscore: _.extendOwn
  // Lodash
  function Foo() {
    this.c = 3;
  }
  function Bar() {
    this.e = 5;
  }
  Foo.prototype.d = 4;
  Bar.prototype.f = 6;
  var result = _.assign(new Foo, new Bar);
  console.log(result);
  // output: { 'c': 3, 'e': 5 }

  // Native
  function Foo() {
    this.c = 3;
  }
  function Bar() {
    this.e = 5;
  }
  Foo.prototype.d = 4;
  Bar.prototype.f = 6;
  var result = Object.assign(new Foo, new Bar);
  console.log(result);
  // output: { 'c': 3, 'e': 5 }
浏览器支持
ChromeFirefoxIEOperaSafari
45 ✔34 ✔No support32 ✔9 ✔

_.keys

获取一个由一个给定对象的自身可枚举属性组成的数组.

  // Underscore/Lodash
  var result = _.keys({one: 1, two: 2, three: 3})
  console.log(result)
  // output: ["one", "two", "three"]

  // Native
  var result2 = Object.keys({one: 1, two: 2, three: 3})
  console.log(result2)
  // output: ["one", "two", "three"]
浏览器支持
ChromeFirefoxIEOperaSafari
5 ✔4.0 ✔9 ✔12 ✔5 ✔

_.toPairs

获取一个给定对象自身可枚举属性的键值对数组.

  // Underscore - also called _.pairs
  // Lodash - also called _.entries
  var result = _.toPairs({one: 1, two: 2, three: 3})
  console.log(result)
  // output: [["one", 1], ["two", 2], ["three", 3]]

  // Native
  var result2 = Object.entries({one: 1, two: 2, three: 3})
  console.log(result2)
  // output: [["one", 1], ["two", 2], ["three", 3]]
浏览器支持
ChromeFirefoxIEOperaSafari
38 ✔28 ✔Not supported25 ✔7.1 ✔

_.values

返回对象自身可枚举的属性值.

  // Underscore/Lodash
  var result = _.values({one: 1, two: 2, three: 3})
  console.log(result)
  // output: [1, 2, 3]

  // Native
  var result2 = Object.values({one: 1, two: 2, three: 3})
  console.log(result2)
  // output: [1, 2, 3]
浏览器支持
ChromeFirefoxIEOperaSafari
54 ✔47 ✔Not supportedNot supportedNot supported

String

_.repeat

构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本.

  // Lodash
  var result = _.repeat('abc', 2)
  // output: 'abcabc'

  // Native
  var result = 'abc'.repeat(2)
  console.log(result)
  // output: 'abcabc'
浏览器支持
ChromeFirefoxIEOperaSafari
41 ✔24 ✔Not supportedNot supported9 ✔

_.template

创建一个模板函数.

  // Lodash/Underscore
  const compiled = _.template('hello <%= user %>!');
  compiled({ 'user': 'fred' });

  // Native
  const templateLitreal = (value) => `hello ${value.user}`;
  templateLitreal({ 'user': 'fred' });
浏览器支持
ChromeFirefoxIEOperaSafari
41 ✔34 ✔Not supported28 ✔9 ✔

_.toLower

将调用该方法的字符串值转换为小写形式，并返回.

  // Lodash
  var result = _.toLower('FOOBAR')
  console.log(result)
  // output: 'foobar'

  // Native
  var result = 'FOOBAR'.toLowerCase()
  console.log(result)
  // output: 'foobar'
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.toUpper

将调用该方法的字符串值转换为大写形式，并返回.

  // Lodash
  var result = _.toUpper('foobar')
  console.log(result)
  // output: 'FOOBAR'

  // Native
  var result = 'foobar'.toUpperCase()
  console.log(result)
  // output: 'FOOBAR'
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

_.trim

移除字符数组两端空格.

  // Lodash
  var result = _.trim(' abc ')
  console.log(result)
  // output: 'abc'

  // Native
  var result = ' abc '.trim()
  console.log(result)
  // output: 'abc'
浏览器支持
ChromeFirefoxIEOperaSafari
5.0 ✔3.5 ✔9.0 ✔10.5 ✔5.0 ✔

_.replace

返回一个由替换值替换一些或所有匹配的模式后的新字符串.

  // Lodash
  var re = /apples/gi;
  var str = 'Apples are round, and apples are juicy.';
  var newstr = _.replace(str, re, 'oranges');
  console.log(newstr);
  // output: 'oranges are round, and oranges are juicy.'

  // Native
  var re = /apples/gi;
  var str = 'Apples are round, and apples are juicy.';
  var result = str.replace(re, 'oranges');
  console.log(result);
  // output: 'oranges are round, and oranges are juicy.'
浏览器支持
ChromeFirefoxIEOperaSafari
✔✔✔✔✔

Reference

_.uniq

删除数组中的重复元素.

  // Underscore/Lodash
  var result = _.uniq([1, 2, 1, 4, 1, 3]);
  console.log(result)
  // output: [1, 2, 4, 3]

  // Native
  var result = [... new Set([1, 2, 1, 4, 1, 3])]
  console.log(result)
  // output: [1, 2, 4, 3]
浏览器支持
ChromeFirefoxIEOperaSafari
38 ✔13 ✔11 ✔25 ✔7.1 ✔
浏览器支持
ChromeFirefoxIEOperaSafari
✔1.5 ✔9 ✔✔✔
Fei_Liu
关注
专栏目录
高性能的js第三方库——lodash、 Underscore、async、md5及moment
08-13 836
背景：为了实现某些功能，如：数据排序、分组、筛选、深拷贝等，自己写的函数或网上搜索处理的转换函数质量无法保证，这时直接使用成熟的js第三方库是首选。 *注：“framework(框架)”，“library(库)”和“tool(工具)” 可以根据情境，在不同时期，对不同的人，意味着不同的东西。 一、Lodash 和 Underscore(推荐参考阮一峰的日志) 1.优点：将 Loda...
underscore-template-loader:用于Webpack的Underscore和Lodash模板加载器
05-05
用于Webpack的Underscore.js和Lodash模板加载器 变更日志 * 1.1：通过`query`支持宏（thx @ JimYan，@ devlinjunker）* 1.0：Loader现在可与Webpack 4一起使用。 安装 npm install underscore-template-loader ...
You-Dont-Need-Lodash-Underscore：您可以原生使用JavaScript方法列表+ ESLint插件
02-03
您不需要（可能不需要）Lodash / Underscore Lodash和Underscore是很棒的现代JavaScript实用程序库，它们被前端开发人员广泛使用。 但是，当您针对现代浏览器时，由于ECMAScript5 [ES5]和ECMAScript2015 [ES6]，您可能会发现许多方法已经得到了本机支持。 如果您希望您的项目需要更少的依赖项，并且清楚地了解目标浏览器，则可能不需要Lodash / Underscore。 欢迎您为下面提供的更多物品做出贡献。 如果您要使用这些ES5方法定位旧版JavaScript引擎，则可以使用 请注意，下面使用的示例仅向您显示执行某些任务的本机替代方法。 对于某些功能，Lodash提供的功能比本地内置功能更多。 此列表不是1：1的比较。 如果您想添加或修改代码，请发送PR。 除非问题太大并且您要讨论，否则无需打开问题。 开发者之声 —库迪·林德利（Cody Lindley），《 和 —Daniel Lamb，计算机科学家， 和技术审阅者 —Tero Parviainen，《 — @ therebelrobot，网络事物制
你并不需要Underscore/Lodash
weixin_33935777的博客
02-19 218
You don't (may not) need Lodash/Underscore Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。但是，当我们现在是针对现代化浏览器进行开发时，很多时候我们利用的Underscore中的方法已经被ES5与ES6所支持了，如果我们希望...
Lodash-js工具库
最新发布
m0_72560900的博客
06-23 802
Lodash 是一个现代 实用工具库，提供了许多有用的函数，帮助开发者处理常见的编程任务，如数组操作、对象处理、字符串处理等。Lodash 使得代码更简洁、更高效，极大地提高了开发效率。Lodash 的设计灵感来自于 Underscore.js，但提供了更多的功能和更好的性能。Lodash 是一个强大的 工具库，提供了许多实用的函数，帮助开发者简化数据操作。无论是数组、对象、集合、函数还是字符串操作，Lodash 都提供了丰富的 API，使得代码更简洁、高效。
《其实你并不需要Lodash / Underscore》
theScoreONE的博客
12-07 7031
一、unshift向数组添加的第一个元素 const data = ['1', '2', '3']; data.unshift('0'); console.log(data); // ["0", "1", "2", "3"] 二、Array.from(); creates a new Array instance from an array-like or iterable object.
无需Lodash/Underscore：充分利用JavaScript原生功能
gitblog_00065的博客
05-10 708
无需Lodash/Underscore：充分利用JavaScript原生功能 项目地址:https://gitcode.com/you-dont-need/You-Dont-Need-Lodash-Underscore 在前端开发中，Lodash和Underscore是两个广泛使用的JavaScript工具库，它们为开发者提供了大量的便利方法。然而，随着现代浏览器对ECMAScript 5（ES5...
You-Dont-Need : 你不需要系列
weixin_34007879的博客
12-29 274
1 You-Dont-Need-JavaScript CSS是强大的，你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。 内容目录 手风琴/切换 圆盘传送带 检查复选框的计数器 翻转点击 Textfield上的浮动标签 字体（拉丁） 游戏 悬停/弹出信息 图片廊 菜单 移动菜单关闭画布 汉堡菜单 花式菜单 莫代尔/弹出 ...
lodash underscore js库速查手册
04-04
Collection Functions (Arrays or Objects) _.each(list, iterator, [context]) Alias: forEach Iterates over a list of elements, yielding each in turn to an iterator function. The iterator is bound to the ...
lodashpp:lodash (underscore.js) for C++14 的实现
06-26
在编程世界中，JavaScript库lodash(underscore.js)因其强大的实用工具函数而备受青睐，它为开发者提供了大量便捷的编程工具，简化了代码并提高了效率。现在，这个优秀的理念已经被移植到了C++14中，形成了名为...
probe:用Lodash（或Underscore）方法扩展JS原型
05-20
Titon Probe v0.4.1 使用Lo-Dash，Underscore或其他供应商的功能扩展本机原型。 这允许以下代码： _.uniq(_.flatten([1, 2, [2], 3, 2]));... _ = probe._, // lodash/underscore _s = probe._s
使用lodash原地起飞，总结了几个常用的lodash方法
~~~
01-14 4791
Lodash是一个流行的JavaScript实用工具库，提供了许多高效、高兼容性的工具函数，能够方便地处理集合、字符串、数值、函数等多种数据类型，大大提高工作效率，本文总结了一些常用的lodash工具方法。
这些lodash方法真香！！
winne雪
01-30 5032
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash官网Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于：1、 遍历 array、object 和 string2、对值进行操作和检测3、创建符合功能的函数lodash-es模块使得我们能按需引入lodash对应的工具方法。
Lodash 使用及常用方法
热门推荐
ShIcily的博客
04-26 1万+
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于： 1.遍历 array、object 和 string 2.对值进行操作和检测 3.创建符合功能的函数
什么是lodash
juan_lutter的博客
03-03 8140
什么是lodash? lodash是一个javascript库，也是Node JS的常用模块，可以用 npm install -g lodash 命令安装。 lodash可以用来做什么? 软件产品大都是根据广泛的需求应运而生的，很少有东西先做出来，然后再看看它可以应用到哪些地方。原生的javascript在功能实现上面更原子化，很多常用功能没有形成模块。lodash做了这些事情。比如，合并数组...
Underscore和lodash 介绍
赶路人儿
11-30 9434
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。 如官方所介绍的那样，Lodash是一个具有一致接口、模块化、高性能的JavaScript工具库。一开始Lodash只是Underscore.js的一个fork，之后再原有的成功基础上取得了更大的成果，lodash的性能远远的超过了Underscore。因此，很多模块放弃了Un...
JS实用工具库（一）：lodash各类实用方法整理（基于lodash官网）
m0_56065511的博客
05-09 2202
基于lodash官方文档中的各个方法的快速查找及使用
30个常用的lodash工具函数
温暖前端的博客
01-31 1109
22.: 返回数组除了第一个元素的所有元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值