不改变原有数据 复制出一个新的数据 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>