总结

1.递归应用实例

/**
 * 递归一维数组变二维 
 */
let originalList = [1, 2, 3, 5, 7, 2, 4]

// 分行数据列表
let dataList = []

// 展示几行
let rowNum = 3
// 每行个数
const num = Math.ceil(originalList.length / rowNum)

// 处理数据 分成固定等分
const getItem = (list: any) => {
    dataList.push(list.splice(0, rowNum))

    if (list.length) {
        getItem(list)
    }
}

getItem(originalList)
console.log(dataList) // [[1, 2, 3], [5, 7, 2], [4]]

 2.动态获取图片

const getUrl = (imgName: string) => {
    const urlList = import.meta.globEager('../../assets/header/**.png')
    const path = `../../assets/header/${imgName}.png`
    return urlList[path].default
}

3.数组扁平化

const arr: any[] = [1, [[2, 3], 4], 5]

/**
 * 递归
 */
const flatten = (arr: Record<string, any>[]) => {
    let result: Record<string, any>[] = []
    arr.forEach((item) => {
        if (Array.isArray(item)) {
            result = result.concat(flatten(item))
        } else {
            result.push(item)
        }
    })
    return result
}

console.log(flatten(arr))

/**
 * flat：arr.flat() ：默认操作一层 Infinity不论多少层 都展开
 */
console.log(arr.flat(Infinity))

/**
 * reduce：支持多层数组扁平
 */
const myFlat = (arr: any[]) =>
    arr.reduce(
        (pre, cur) => pre.concat(Array.isArray(cur) ? myFlat(cur) : cur),
        []
    )

console.log(myFlat(arr))

/**
 * 扩展运算符 + some
 */
const flatten2 = (arr: any[]) => {
    while (arr.some((item) => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}
console.log(flatten2(arr))

/**
 * split 和 toString 共同处理：（有使用局限 数组各项均为字符串适用(其他类型会被转为字符串)） ×
 */
const flatten3 = (arr: any[]) => arr.toString().split(',')
console.log(flatten3(arr))

 4.vue3读取excel

import * as XLSX from 'xlsx'

const onChange = (res: Record<string, any>) => {
    const fileReader = new FileReader()
    fileReader.onload = (ev: any) => {
        try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
                type: 'binary'
            })
            let sheet = Object.keys(workbook.Sheets)[0]
            let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) //获得以第一列为键名的sheet数组对象

            console.log('excel内容----', json)
        } catch (e) {
            console.log(e)
        }
    }
    fileReader.readAsBinaryString(res.raw)
}

 5.vue3 使用keepalive

<!-- 配置化 -->
<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <div class="main-box">
            <keep-alive>
                <component
                    :is="markRaw(Component)"
                    v-if="$route.meta?.keepAlive"
                    :key="$route.fullPath"
                />
            </keep-alive>
            <component
                :is="markRaw(Component)"
                v-if="!$route.meta?.keepAlive"
                :key="$route.fullPath"
            />
        </div>
    </transition>
</router-view>


<!-- 使用include属性 -->
<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <div class="main-box">
            <!-- include格式 :include="'a,b'"  :include="['a','b']"  其中 a,b 为组件name 不是路由name！！-->
            <keep-alive :include="['a', 'b']">
                <component :is="markRaw(Component)" />
            </keep-alive>
        </div>
    </transition>
</router-view>