Lodash

256 阅读1分钟

不改变原有数据 复制出一个新的数据 Lodash内部封装了很多字符串 数组 对象等常见数据类型的处理函数

参考地址:blog.csdn.net/weixin_4122…

<template>
  <div>
    <div>Lodash 文档</div>
    <div>
      不改变原有数据 复制出一个新的数据 Lodash内部封装了很多字符串 数组
      对象等常见数据类型的处理函数
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
import {
  chunk,
  compact,
  concat,
  difference,
  drop,
  fill,
  flatten,
  flattenDeep,
  fromPairs,
  initial,
  intersection,
  nth,
  pull,
  pullAll,
  remove,
  zip,
  zipObject,
  sample,
  sampleSize,
  shuffle,
  after,
  delay,
  clone,
  cloneDeep,
} from 'lodash';
const data = reactive({
  list: ['1', '2', '3', '4', '5', '6', 0, null, undefined],
  a: 20,
});
console.log('data.list', data.list);
// 将数组拆分成指定长度的区块
var listChunk = chunk(data.list, 3);
console.log('拆分数组', listChunk);
// 过滤假值,例如:false, null, 0, "", undefined, 和 NaN
var listCompact = compact(data.list);
console.log('过滤假值', listCompact);
const { list } = toRefs(data);
// concat 创建一个新数组,将array与任何数组 或 值连接在一起
var listConcat = concat(data.list, 9, [[9]]);
console.log('concat拼接', listConcat);
// difference 创建一个新数组,排除掉原数组中指定的值
var listDifference = difference(data.list, [0, null, '2']);
console.log('排除值', listDifference);
// drop 切片数组 去除数组前面的n个元素,默认值1
var listDrop = drop(data.list, 3);
console.log('数组切片', listDrop);
// fill 从start开始到end填充 使用 value 值来填充(替换) array,从start位置开始, 到end位置结束(但不包含end位置)。
var listFill = fill(data.list, 2, 1, 5);
console.log('填充数组', listFill);
// flatten 减少一级array嵌套深度
console.log('flatten', flatten(['1', ['2', '3'], [['4']]]));
// flattenDeep 将array递归为一维数组
console.log('flattenDeep', flattenDeep(['1', ['2', '3'], [['4']]]));
// fromPairs 返回一个由键值对pairs构成的对象
var listFrompairs = fromPairs([
  ['fred', 30],
  ['barney', 40],
]);
console.log('listFrompairs', listFrompairs);
// initial 获取数组中除最后一个元素外所有元素
var listInitial = initial(data.list);
console.log('listInitial', listInitial);
// intersection 常见唯一值的数组,包含所有给定元素都包含的元素(交集)
var listIntersection = intersection([2, 1], [4, 2, 1], [1, 2, 1]);
console.log('listIntersection', listIntersection);
// nth 获取array数组的第n个元素。如果n为负数,则返回从数组结尾开始的第n个元素。不如直接[]
var listNth = nth(data.list, 1);
console.log('listNth', listNth);
// pull 移除数组中所有和给定值相等的元素
var listPull = pull(data.list, null, 0);
console.log('listPull', listPull);
// pullAll 类似pull 区别是接受的是一个要移除的数组
var listPullall = pullAll(data.list, [0, null, undefined]);
console.log('listPullall', listPullall);
// remove  remove(array, [predicate=_.identity]) 移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)
var evens = remove(data.list, function (n) {
  return n % 2 === 0;
});
console.log('evens', evens);
// 创建一个分组元素的数组,数组的第一个元素包含所有给定数组的第一个元素,数组的第二个元素包含所有给定数组的第二个元素,以此类推
console.log('分组元素的数组', zip(['fred', 'barney'], [30, 40], [true, false]));
// zipObject 接受两个数组,第一个数组中的值为属性标识符,第二个数组中的值为相应的属性值
console.log('zipObject', zipObject(['a', 'b'], [1, 2]));
console.log('随机数', sample(data.list));
console.log('n个随机数', sampleSize(data.list, 9));
// shuffle 返回打乱的新数组。
console.log('打乱的数组', shuffle(data.list));

// after(n, func) 创建一个函数,当他被调用n或更多次之后将马上触发

let done = after(5, function () {
  console.log(data.a++);
});
for (let i = 0; i < 10; i++) {
  console.log(i);
  done();
} // 0 1 2 3 4 20 5 21 6 22 7 23 8 24 9 25

// 防抖 debounce(func, [wait=0], [options={}])
// delay(func, wait, [args])  延迟 wait 毫秒后调用 func。 调用时,任何附加的参数会传给func。
delay(
  function (text) {
    console.log(text);
  },
  5000,
  '我是要展示的数据'
);

// once(func) 创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果。
// 节流  throttle(func, [wait=0], [options={}])

// clone(value) 创建一个 value 的浅拷贝。
// cloneDeep(value) 深拷贝

</script>