Loadsh 常用方法总结以及在vue中使用Loadsh

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。处理复杂数组，对比等可以直接采用该库，也方便快捷。

官方网站

https://www.lodashjs.com/

一. 在vue中使用Loadsh中的节流函数 debounce和throttle

.throttle是lodash中的节流函数,.debounce是lodash中的防抖函数。
具体作用可以直接看官方文档。

在vue中具体怎么用

import _ from 'lodash'
export default{
 methods:{
    click:_.throttle(function(){
            console.log('test')
            console.log(this)
    },1000)
 }
}
import _ from 'lodash'
export default{
 methods:{
 onUpdateNote: _.debounce(function() {
      this.updateNote({ noteId: this.curNote.id, title: this.curNote.title, content: this.curNote.content })
        .then(data => {
          this.statusText = '已保存'
        }).catch(data => {
          this.statusText = '保存出错'
        })
    }, 300)
}

在lodash的throttle，debounce方法中,可以直接使用function,而且无需重新指向this,在函数内部中已经做了apply,所以这里的this指向的就是vue实例,对已有函数的外面包一层.throttle/.debounce就可以了。

二.另外一种方法在vue中使用debounce和throttle

1、安装

cnpm i lodash -S

2、方法一全局使用

引入

import _ from 'lodash'
Vue.prototype._ = _

使用

this._.debounce(this.handleClick,1000,false)

3、方法二局部使用

引入

let _ = require('lodash')

使用

_.debounce(this.handleClick,1000,false)

4、vue单文件组件中使用

里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！

<template>
  <div>
    <el-button @click="myDebounce">我的debounce</el-button>
    <el-button @click="_debounce">lodash的debounce</el-button>
  </div>
</template>

<script>
import { debounce } from '@/utils/util'
let _ = require('lodash')
export default {
  methods: {
    handleClick1() {
      console.log(`真正执行的函数，次数比较少：handleClick1.....`)
    },
    handleClick2() {
      console.log(`真正执行的函数，次数比较少：handleClick2.....`)
    },
    myDebounce() {
      console.log(`myDebounce.....`)
      this.DB()
    },
    _debounce() {
      console.log(`_debounce.....`)
       this._DB()
    }
  },
  created() {
    this.DB = debounce(this.handleClick1, 1000, false)
    this._DB = this._.debounce(this.handleClick2,1000,false)
  }
}
</script>

注意：以前我是在data选项里面定义，然后再methods里面初始化函数，但是需要判断‘如果有了就不赋函数，如果为空就赋’，发现比较麻烦；后来直接在created钩子里面定义，就很方便了！或者挂载之后。

三. Loadsh学习笔记

有多年开发经验的工程师，往往都会有自己的一套工具库，称为utils、helpers等等，这套库一方面是自己的技术积累，另一方面也是对某项技术的扩展，领先于技术规范的制订和实现。

Lodash就是这样的一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前ECMAScript尚未制订的规范，但同时被业界所认可的辅助函数。莫倩每天使用npm安装Lodash的数量在百万级以上，这在一定程度上证明了其代码的健壮性，值得我们在项目中一试。

模块组成

Lodash听得辅助函数主要分为以下几类，函数列表和用法实力请查看Lodash的官方文档：

Array，适合于数组类型，比如填充数据、查找元素、数组分片等操作
Collocation，适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
Function，适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
Lang，普遍适用于各种类型，常用于执行类型判断和类型转换
Math，使用与数值类型，常用于执行数学运算
Number，适用于生成随机数，比较数值与数值区间的关系
Object，适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
Seq，常用于创建链式调用，提高执行性能（惰性计算）
String，适用于字符串类型
lodash/fp 模块提供了更接近函数式编程的开发方法，其内部的函数经过包装，具有immutable、auto-curried、iteratee-first、data-last（官方介绍）等特点。
Fixed Arity，固化参数个数，便于柯里化
Rearragned Arguments，重新调整参数位置，便于函数之间的聚合
Capped Iteratee Argument，封装Iteratee参数

在React + Webpack + Babel(ES6)的开发环境中，使用Lodash需要安装插件babel-plugin-lodash并更新Babel配置文件：

npm install --save lodash
npm install --save-dev babel-plugin-lodash

更新Bable的配置文件 .babelrc:

[ 复制代码 ](javascript:void(0)😉

{
    "presets":[
        "react",
        "es2015",
        "stage-0"
    ],
    "plugins":[
        "lodash"
    ]
}

[ 复制代码 ](javascript:void(0)😉

使用方式：

import _ from 'lodash';
import { add } from 'lodash/fp';

const addOne = add(1);
_.map([1, 2, 3], addOne);

性能

在 Filip Zawada的文章《How to Speed Up Lo-Dash ×100? Introducing Lazy Evaluation》中提到了Lodash提高执行速度的思路，主要有三点： Lazy Evaluation、Pipelining和Deferred Execution。下面两张图来自Filip的博客：

假设有如上图所示的问题：从若干个求中取出三个面值小于10的球。第一步是从所有的求中取出所有面值小于10的球，第二部是从上一步的结果中去三个球。

上图是另一个解决方案，如果一个球能够通过第一步，那么就继续执行第二步，直至结束然后测试下一个球。。。当我们取到三个球之后就中断整个循环。Filip称这是Lazy Evaluation Algorithm，就个人理解这并不全面，他后续提到的Pipelining（管道计算），再加上一个中断循环执行的算法应该更符合这里的图示。

此外，使用Lodash的链式调用时，只有现实或隐式调用 .value 方法才会对链式调用的整个操作进行取值，这种不在声明时立即求值，而在使用时进行求职的方式，是Lazy Evaluation最大的特点。

九个实例

收益于Lodash的普及程度，使用它可以提高很多人开发时于都代码的效率，减少彼此之间的误解（Loss of Consciousness）。在《Lodash: 10 Javascript Utility Functions That You Should Probably Stop Rewriting》一文中，作者列举了多个常用的Lodash函数，实例演示了使用Lodash的技巧。

1. N次循环

[ 复制代码 ](javascript:void(0)😉

// 1. Basic for loop.
for(var i = 0; i < 5; i++){
    //...
}

// 2. Using Array's join and split methods
Array.apply(null, Array(5)).forEach(function(){
    //...
});

// Lodash
_.times(5, function(){
    //...
});

[ 复制代码 ](javascript:void(0)😉

for 语句是执行虚幻的不二选择，Array.apply也可以模拟循环，但在上面代码的使用场景下，_.tiems()的解决方法更加简洁和易于理解。

2. 深层查找属性值

[ 复制代码 ](javascript:void(0)😉

// Fetch the name of the first pet from each owner
var ownerArr = [{
    "owner": "Colin",
    "pets": [{"name": "dog1"}, {"name": "dog2"}]
}, {
    "owner": "John",
    "pets": [{"name": "dog3"}, {"name": "dog4"}]
}];

// Array's map method.
ownerArr.map(function(owner){
    return owner.pets[0].name;
});

// Lodash
_.map(ownerArr, "pets[0].name");

[ 复制代码 ](javascript:void(0)😉

_.map 方法是对原生 map 方法的改进，其中使用 pets[0].name 字符串对嵌套数据取值的方式简化了很多冗余的代码，非常类似使用jQuery选择DOM节点 ul>li>a , 对于前端开发者来说有种久违的亲切感。

3. 个性化数组

[ 复制代码 ](javascript:void(0)😉

// Array's map method.
Array.apply(null, Array(6)).map(function(item, index){
    return "ball_" + index; 
});

// Lodash
_.times(6, _.uniqueId.bind(null, 'ball_'));

// Lodash
_.times(6, _.partial(_.uniqueId, 'ball_'));
// eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_6]

[ 复制代码 ](javascript:void(0)😉

在上面的代码中，我们要创建一个初始值不同、长度为6的数组，其中 _.uniqueId 方法用于生成独一无二的标示符（递增的数字，在程序运行期间保持独一无二）， _.partial 方法是对 bind 的封装。

4. 深拷贝

[ 复制代码 ](javascript:void(0)😉

var objA = {
    "name": "colin"
}

// 常用的方法一般会比较长，循环对象等
// http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false

[ 复制代码 ](javascript:void(0)😉

JavaScript 没有直接提供深拷贝的函数，但是我们可以用其他杉树来模拟，比如 JSON.parse(JSON.stringify(objectToClone)), 但这种方法要求对象中的属性值不能是函数。Lodash 中的 _.cloneDeep 函数封装了深拷贝的逻辑，用起来更加简洁。

5. 随机数

[ 复制代码 ](javascript:void(0)😉

// Native utility method
function getRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomNumber(15, 20);

// Lodash
_.random(15, 20);

[ 复制代码 ](javascript:void(0)😉

Lodash 的随机数生成函数更贴近实际开发，ECMAScript 的随机数生成函数式底层必备的接口，两者都不可获取。此外，使用 _.random(15, 20, true) 还可以在15到20之间生成随机的浮点数。

6. 对象扩展

[ 复制代码 ](javascript:void(0)😉

// Adding extend function to Object.prototype
Object.prototype.extend = function(obj) {
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            this[i] = obj[i];
        }
    }
};

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};

objA.extend(objB);
objA; // {"name": "james", "age": 17, "car": "suzuki"};

// Lodash
_.assign(objA, ojbB);

[ 复制代码 ](javascript:void(0)😉

_.assign 是浅拷贝，和ES6新增的 Object.assign 函数功能一致（建议优先使用Object.assign）。

7. 筛选属性

[ 复制代码 ](javascript:void(0)😉

// Native method: Remove an array of keys from object
Object.prototype.remove = function(arr) {
    var that = this;
    arr.forEach(function(key){
        delete(this[key]);
    });
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

objA.remove(['car', 'age']);
objA; // {"name": "colin"}

// Lodash
objA = _.omit(objA, ['car', 'age']);
// => {"name": "colin"}

objA = _.omit(objA, "car");
// => {"name": "colin", "age": 17}

objA = _.omit(objA, _.isNumber);
// => {"name": "colin", "car": "suzuki"};

[ 复制代码 ](javascript:void(0)😉

大多数情况下，Lodash所提供的辅助函数都会比原声的函数更贴近开发需求。在上面的代码中，开发者可以使用数组、字符串以及函数的方式筛选对象的属性，并且最终会返回一个新的对象，中间执行筛选时不会对旧对象产生影响。

[ 复制代码 ](javascript:void(0)😉

// Native method: Returning a new object with selected properties
Object.prototype.pick = function(arr) {
    var _this = this;
    var obj = {};
    arr.forEach(function(){
        obj[key] = _this[key];
    });
    
    return obj;
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

var objB = objA.pick(['car', 'age']);
// => {"car": "suzuki", "age": 17}

// Lodash
var objB = _.pick(objA, ['car', 'age']);
// => {"car": "suzuki", "age":17}

[ 复制代码 ](javascript:void(0)😉

_.pick 是 _.omit 的相反操作，用于从其他对象中挑选属性生成新的对象。

8.随机元素

[ 复制代码 ](javascript:void(0)😉

var luckDraw = ["Colin", "John", "James", "Lily", "Mary"];

function pickRandomPerson(luckyDraw){
    var index = Math.floor(Math.random() * (luckyDraw.length - 1));
    return luckyDraw[index];
}

pickRandomPerson(luckyDraw); //John

// Lodash
_.sample(luckyDraw); // Colin

// Lodash - Getting 2 random item
_.sample(luckyDraw, 2); // ['John', 'Lily']

[ 复制代码 ](javascript:void(0)😉

_.sample 支持随机挑选多个元素并返回新的数组。

9. 针对 JSON.parse 的错误处理

[ 复制代码 ](javascript:void(0)😉

// Using try-catch to handle the JSON.parse error
function parse(str){
    try {
        return JSON.parse(str);
    }
    
    catch(e) {
        return false;
    }
}

// With Lodash
function parseLodash(str){
    return _.attempt(JSON.parse.bind(null, str));
}

parse('a');
// => false
parseLodash('a');
// => Return an error object

parse('{"name": "colin"}');
// => Return {"name": "colin"}
parseLodash('{"name": "colin"}');
// => Return {"name": "colin"}

[ 复制代码 ](javascript:void(0)😉

如果你在使用 JSON.parse 时没有预置错误处理，那么它很有可能会成为一个定时炸弹，我们不应该默认接收的JSON对象都是有效的。 try-catch 是常见的错误处理方式，如果项目中使用Lodash，那么可以使用 _.attmpt 替代 try-catch 的方式，当解析JSON出错时，该方法会返回一个 Error 对象。

随着ES6的普及，Lodash的功能或多或少会被原生功能所替代，所以使用时还需要进一步甄别，建议优先使用原生函数，有关ES6替代Lodash的部分，请参考文章《10 个可用 ES6 替代的 Lodash 特性》。

其中有两处分厂值得一看：

[ 复制代码 ](javascript:void(0)😉

// 使用箭头函数创建可复用的路径
const object = { 'a': [{ 'b': { 'c': 3 } }, 4] };

[
    obj => obj.a[0].b.c,
    obj => ojb.a[1]
].map(path => path(object));

// 使用箭头函数编写链式调用
const pipe = function => data => {
    return functions.reduce(
        (value, func) => func(value),
        data
    );
};

const pipeline = pipe([
    x => x * 2,
    x => x / 3,
    x => x > 5,
    b => !b
]);

pipeline(5);
// true
pipeline(20);
// false

[ 复制代码 ](javascript:void(0)😉

在ES6中，如果一个函数只接收一个形参且函数提示一个 return 语句，就可以使用箭头函数简化为：

[ 复制代码 ](javascript:void(0)😉

const func = p => v;

// 类似于（不完全相同）
const func = function(p) {
    return v;
}

[ 复制代码 ](javascript:void(0)😉

当有多重嵌套时，可以简化为：

[ 复制代码 ](javascript:void(0)😉

const func = a => b => c => a + b + c;
func(1)(2)(3);
// => 6

// 类似于
const func = function (a) {
    return function (b) {
        return function (c) {
            return a + b + c;
        }
    }
}

[ 复制代码 ](javascript:void(0)😉

四. Loadsh 常用方法总结

日常开发中，通常会对数据，特别是数组和对象进行各种读写等操作：比如去重，拷贝，合并，过滤，求交集，求和等等。根据平时开发中对数据的操作，我对Lodash常见的用法做了以下总结，方便今后的学习和整理。

Array

Create

创建一个数组，元素为0, 1, 2, ... , 23

_.range([start=0], end, [step=1])
```
let arr = _.range(24)

console.log(arr) // [0, 1, 2, 3, ... , 23]
```
创建一个数组，元素为100, 100, 100, 100, 100

_.fill(array, value, [start=0], [end=array.length])
```
let arr = _.fill(Array(5), 100)

console.log(arr) // [100, 100, 100, 100, 100]
```

Read

获取数组中最后一个元素

_.last(array)

let arr = [1, 2, 3, 4, 5]
let lastElement = _.last(arr) 

console.log(lastElement) // 5

获取数组中倒数第二个元素

_.nth(array, [n=0])

let arr = [1, 2, 3, 4, 5]
let lastSecondElement = _.nth(-2) 

console.log(lastSecondElement) // 4

获取对象数组中某一同名属性的属性值集合

.map(collection, [iteratee=.identity])

let users = [{
      id: 12,
      name: 'Adam',
      hobbies: [
        {name: 'running', index: 100},
        {name: 'cycling', index: 95}
      ]
   },{
      id: 14,
      name: 'Bob',
      hobbies: [
        {name: 'movie', index: 98},
        {name: 'music', index: 85}
      ]
   },{
      id: 16,
      name: 'Charlie',
      hobbies: [
       {name: 'travelling', index: 90},
       {name: 'fishing', index: 88}
      ]
   },{
      id: 18,
      name: 'David',
      hobbies: [
       {name: 'walking', index: 99},
       {name: 'football', index: 85}
     ]                


   }
]
let userIds = _.map(users, 'id')
let mostFavouriteHobbies = _.map(users, 'hobbies[0].name')

console.log(userIds) // [12, 14, 16, 18]
console.log(mostFavouriteHobbies) // ["running", "movie", "travelling", "walking"]

获取对象数组中某一属性值最大的对象

.maxBy(array, [iteratee=.identity])

let arr = [{a:1, b: 2, c: {d:4}}, {a:3, b: 4, c: {d:6}}]
let maxBObj = _.maxBy(arr, 'b')

console.log(maxBObj) // {a: 3, b: 4, c: {d: 6}}

找出两个数组中元素值相同的元素

_.intersection([arrays])

let arr1 = [2, 1, {a: 1, b: 2}]
let arr2 = [2, 3, {a: 1, b: 2}]
let intersection = _.intersection(arr1, arr2) 

console.log(intersection) // [2]

求数值数组中元素值的平均数

_.mean(array)

let numbers = [1, 2, 3, 4, 5]
let average = _.mean(numbers)

console.log(average) // 3

求对象数组中某个属性值的平均数

.meanBy(array, [iteratee=.identity])

let objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]
let average = _.meanBy(objects, 'n')

console.log(average) // 5

获取数组中前n个元素，不改变原数组

_.take(array, [n=1])

let arr = [1, 2, 3, 4, 5]
let part1Arr = _.take(arr, 4)
let part2Arr = _.take(arr, 6)
let part3Arr = _.take([], 5)

console.log(part1Arr) // [1, 2, 3, 4]
console.log(part2Arr) // [1, 2, 3, 4, 5]
console.log(part3Arr) // []

Delete

删除数组中值为falsy的元素

_.compact(array)

let arr = [0, 1, false, 2, '', 3, null, undefined, NaN]
let truthyArr = _.compact(arr) 

console.log(truthyArr) // [1, 2, 3]

Format

去重。

_.uniq(array)

let arr = [2, 1, 2, '2', true]
let uniqArr = _.uniq(arr)

console.log(uniqArr) // [2, 1, '2', true]

排序。对象数组，根据对象中的某个属性的值，升序或降序排序

.orderBy(collection, [iteratees=[.identity]], [orders])

let users = [
  {user: 'Tom', age: 25},
  {user: 'Amy', age: 23},
  {user: 'Perter', age: 22},
  {user: 'Ben', age: 29}
]
let sortedUsers = _.orderBy(users, 'age', 'desc')

console.log(sortedUsers)
// [{user: "Ben", age: 29}, {user: "Tom", age: 25}, {user: "Amy", age: 23}, {user: "Perter", age: 22}]

分割数组[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]为 [1, 2, 3, 4, 5] 和 [6, 7, 8, 9, 10]

_.chunk(array, [size=1])

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [left, right] = _.chunk(arr, 5)

console.log(left) // [1, 2, 3, 4, 5]
console.log(right) // [6, 7, 8, 9, 10]

脱掉一层[]

_.flatten(array)

let address = {
  '江苏省': ['南京市', '苏州市'],
  '浙江省': ['杭州市', '绍兴市']
}
let cities = _.flatten(_.values(address))

console.log(cities) // ["南京市", "苏州市", "杭州市", "绍兴市"]

将多维数组转为一维数组

_.flattenDeep(array)

let flattenedArr = _.flattenDeep([1, [2, [3, [4]], 5]]);

console.log(flattenedArr) // [1, 2, 3, 4, 5]

Object

Create

通过数组["x", "y"] 和数组[10, 10] 创建对象

_.zipObject([props=[]], [values=[]])

let keys = ["x", "y"]
let values = [10, 10]
let obj = _.zipObject(keys, values) 

console.log(obj) // {x: 10, y: 10}

合并对象

_.assign(object, [sources])

let desObj = {name: '', gender: 'male', job: 'developer'}
let sourceObj = {name: 'Tom', job: ''}
let mergedObj = _.assign(desObj, sourceObj)

console.log(mergedObj) // {name: "Tom", gender: "male", job: ""}

深拷贝对象

_.cloneDeep(value)

let sourceObj = {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}
let desObj = _.cloneDeep(sourceObj)
desObj.permissions.store.push(15, 16)

console.log(desObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14, 15, 16]}}
console.log(sourceObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}

合并多个对象中key值相同的键值对

_.merge(object, [sources])

let obj1 = {'9': {name: '乐购超市'}}
let obj2 = {'9': {storeToken: 'xxx'}}
let obj3 = {'9': {storePosition: 'Hangzhou'}}
let mergedObj = _.merge(obj1, obj2, obj3) 

console.log(mergedObj)
// 9: {name: "乐购超市", storeToken: "xxx", storePosition: "Hangzhou"}

Read

判断对象中是否有某个属性

_.has(object, path)

let obj = {a: [{b: {c: 3}}]}
let hasC = _.has(obj, 'a[0].b.c')

console.log(hasC) // true

获取对象中的某个属性的值

_.get(object, path, [defaultValue])

let obj = {a: [{b: {c: 3}}]}
let c = _.get(obj, 'a[0].b.c')

console.log(c) // 3

Update

设置对象中的某个属性的值

_.set(object, path, value)

let obj = {a: [{b: {c: 3}}]}
let newObj = _.set(obj, 'a[0].b.c', 4);

console.log(obj.a[0].b.c); // 4

对多个对象相同属性的属性值求和。

let customers = {
  new_customer: {0: 33, 1: 5, ... , 23: 0},
  old_customer: {0: 22, 1: 7, ... , 24: 0}
}
let customer = {}
let keys = _.keys(customers.new_customer)
let values = _.values(customers)
_.map(keys, key => {
  customer[key] = _.sumBy(values, key)
})

customers.customer = customer

console.log(customers)
// console
{
  customer: {0: 55, 1: 12, ... , 23: 0}
  new_customer: {0: 33, 1: 5, ... , 23: 0}
  old_customer: {0: 22, 1: 7, ... , 23: 0}
}

Number

生成一个随机数，范围n~m

_.random([lower=0], [upper=1], [floating])

let random1 = _.random(2, 5)
let random2 = _.random(5)

console.log(random1) // 2, 3, 4, 5
console.log(random2) // 0, 1, 2, 3, 4, 5

Data Type

判断数据类型

_.isNumber(value)

_.isInteger(value)

...

_.isPlainObject(value)

let variable = 'hello';
// Number
console.log(_.isNumber(variable));
// Integer
console.log(_.isInteger(variable));
// Boolean
console.log(_.isBoolean(variable));
// String
console.log(_.isString(variable));
// Null
console.log(_.isNull(variable));
// Undefined
console.log(_.isUndefined(variable));
// Array
console.log(_.isArray(variable));
// Function
console.log(_.isFunction(variable));
// Object
console.log(_.isPlainObject(variable));
// Date
console.log(_.isDate(variable));

// DOM element
console.log(_.isElement(variable));

数据类型转换

_.toArray
```
_.toArray('abc') // ["a", "b", "c"]
```

_.toInteger

_.toInteger(3.2); // 3
_.toInteger('3.2'); // 3

_.toNumber
```
_.toNumber('3.2') // 3.2
```

_.toString

_.toString(1); // "1"
_.toString([1, 2, 3]); // "1,2,3"

Util

重复多次某个元素

.times(n, [iteratee=.identity])

const dateParams = _.times(2, () => '2018-08-27');
console.log(dateParams) // ["2018-08-27", "2018-08-27"]

posted @ 2019-10-29 23:54 道理我都懂Zz 阅读(4907) 评论(0) 编辑收藏举报

刷新页面返回顶部

道理我都懂Zz

层楼终究误少年，自由早晚乱余生。

Loadsh 常用方法总结以及在vue中使用Loadsh

Loadsh 常用方法总结以及在vue中使用Loadsh

一. 在vue中使用Loadsh中的节流函数 debounce和throttle

在vue中具体怎么用

二.另外一种方法在vue中使用debounce和throttle

1、安装

2、方法一全局使用

3、方法二局部使用

4、vue单文件组件中使用

三. Loadsh学习笔记

模块组成

性能

九个实例

1. N次循环

2. 深层查找属性值

3. 个性化数组

4. 深拷贝

5. 随机数

6. 对象扩展

7. 筛选属性

8.随机元素

9. 针对 JSON.parse 的错误处理

四. Loadsh 常用方法总结

Array

Create

Read

Delete

Format

Object

Create

Read

Update

Number

Data Type

Util

公告

道理我都懂Zz

层楼终究误少年，自由早晚乱余生。

Loadsh 常用方法总结以及在vue中使用Loadsh

Loadsh 常用方法总结以及在vue中使用Loadsh

一. 在vue中使用Loadsh中的节流函数 debounce和throttle

在vue中具体怎么用

二.另外一种方法在vue中使用debounce和throttle

1、安装

2、方法一 全局使用

3、方法二 局部使用

4、vue单文件组件中使用

三. Loadsh学习笔记

模块组成

性能

九个实例

1. N次循环

2. 深层查找属性值

3. 个性化数组

4. 深拷贝

5. 随机数

6. 对象扩展

7. 筛选属性

8.随机元素

9. 针对 JSON.parse 的错误处理

四. Loadsh 常用方法总结

Array

Create

Read

Delete

Format

Object

Create

Read

Update

Number

Data Type

Util

公告

2、方法一全局使用

3、方法二局部使用