lodash-es
<template><div class="content"><input type="text" v-model="valinput" placeholder="请输入内容" v-focus /><div><h2><font color="#6F42C1">1. chunk</font></h2><p>将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。如果 array无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。</p><p>_.chunk(['a', 'b', 'c', 'd'], 2) // [['a', 'b'], ['c', 'd']]</p><p>_.chunk(['a', 'b', 'c', 'd'], 3) // [['a', 'b', 'c'], ['d']]</p><el-button @click="chunkClick">chunkList2</el-button><el-button @click="chunkClick3">chunkList3</el-button><span v-show="chunkResult"> 运行结果:{{ chunkResult }}</span></div><!-- compact 方法示例 --><div><h2><font color="#6F42C1">2. compact</font></h2><p>创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, "",undefined, 和 NaN 都是被认为是“假值”。</p><p>[0, 1, false, 2, '', undefined, null, NaN, 3] // [1, 2, 3]</p><el-button @click="compactClick">compactList</el-button><span v-show="compactResult"> 运行结果:{{ compactResult }}</span></div><!--concat 方法示例 --><div><h2><font color="#6F42C1">3. concat</font></h2><p>将所有给定数组中的元素连接在一起。如果传入的值是可遍历的(比如对象),那么 _.concat 会将这些值转为数组。如果传入的值是 null 或 undefined,那么将返回一个空数组。</p><p>array = [1];2, [3], [[4]] // [1, 2, 3, 4]</p><el-button @click="concatClick">concatList</el-button><span v-show="concatResult"> 运行结果:{{ concatResult }}</span></div></div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import _ from "lodash-es";
const valinput = ref("");
const vFocus = {mounted(el: any) {el.focus();el.style.color = "red";el.style.background = "yellow";},
};
const chunkList = ref(["a", "b", "c", "d"]);
const chunkSize2 = ref(2);
const chunkSize3 = ref(3);
const chunkResult = ref();
const chunkClick = () => {chunkResult.value = _.chunk(chunkList.value, chunkSize2.value);
};
const chunkClick3 = () => {chunkResult.value = _.chunk(chunkList.value, chunkSize3.value);
};
const compactList = ref([0, 1, false, 2, "", undefined, null, NaN, 3]);
const compactResult = ref();
const compactClick = () => {compactResult.value = _.compact(compactList.value);
};var array = [1];const concatResult = ref();const concatClick =()=>{console.log("222:",array,2, [3], [[4]]); concatResult.value =_.concat(array,2, [3], [[4]]);};</script>
<style lang="scss" scoped></style>
chunk、compact、concat
<template>
<div class="content">
<input type="text" v-model="valinput" placeholder="请输入内容" v-focus />
<div>
<h2><font color="#6F42C1">1. chunk</font></h2>
<p>
将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。
如果 array
无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。
</p>
<p>_.chunk(['a', 'b', 'c', 'd'], 2) // [['a', 'b'], ['c', 'd']]</p>
<p>_.chunk(['a', 'b', 'c', 'd'], 3) // [['a', 'b', 'c'], ['d']]</p>
<el-button @click="chunkClick">chunkList2</el-button>
<el-button @click="chunkClick3">chunkList3</el-button>
<span v-show="chunkResult"> 运行结果:{{ chunkResult }}</span>
</div>
<!-- compact 方法示例 -->
<div>
<h2><font color="#6F42C1">2. compact</font></h2>
<p>
创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, "",
undefined, 和 NaN 都是被认为是“假值”。
</p>
<p>[0, 1, false, 2, '', undefined, null, NaN, 3] // [1, 2, 3]</p>
<el-button @click="compactClick">compactList</el-button>
<span v-show="compactResult"> 运行结果:{{ compactResult }}</span>
</div>
<!--concat 方法示例 -->
<div>
<h2><font color="#6F42C1">3. concat</font></h2>
<p>
将所有给定数组中的元素连接在一起。
如果传入的值是可遍历的(比如对象),那么 _.concat 会将这些值转为数组。
如果传入的值是 null 或 undefined,那么将返回一个空数组。
</p>
<p>array = [1];2, [3], [[4]] // [1, 2, 3, 4]</p>
<el-button @click="concatClick">concatList</el-button>
<span v-show="concatResult"> 运行结果:{{ concatResult }}</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import _ from "lodash-es";
const valinput = ref("");
const vFocus = {
mounted(el: any) {
el.focus();
el.style.color = "red";
el.style.background = "yellow";
},
};
const chunkList = ref(["a", "b", "c", "d"]);
const chunkSize2 = ref(2);
const chunkSize3 = ref(3);
const chunkResult = ref();
const chunkClick = () => {
chunkResult.value = _.chunk(chunkList.value, chunkSize2.value);
};
const chunkClick3 = () => {
chunkResult.value = _.chunk(chunkList.value, chunkSize3.value);
};
const compactList = ref([0, 1, false, 2, "", undefined, null, NaN, 3]);
const compactResult = ref();
const compactClick = () => {
compactResult.value = _.compact(compactList.value);
};
var array = [1];
const concatResult = ref();
const concatClick =()=>{
console.log("222:",array,2, [3], [[4]]);
concatResult.value =_.concat(array,2, [3], [[4]]);
};
</script>
<style lang="scss" scoped></style>