Utils

平级数组转为树状

const dataTree = [
        {id: 1, name: '总公司', parentId: 0},
        {id: 2, name: '深圳分公司', parentId: 1},
        {id: 3, name: '北京分公司', parentId: 1},
       {id: 4, name: '研发部门', parentId: 2},
        {id: 5, name: '市场部门', parentId: 2},
        {id: 6, name: '测试部门', parentId: 2},
        {id: 7, name: '财务部门', parentId: 2},
        {id: 8, name: '运维部门', parentId: 2},
        {id: 9, name: '市场部门', parentId: 3},
        {id: 10, name: '财务部门', parentId: 3},
       
    ]
    function changeData(data, parentId = 0) {
        let tree = [];//新建空数组
        //遍历每条数据
        data.map((item) => {
            //每条数据中的和parentId和传入的相同
            if (item.parentId == parentId) {
                //就去找这个元素的子集去  找到元素中parentId==item.id 这样层层递归
                item.children = changeData(data, item.id);
                tree.push(item);
            }
        })
        return tree
    }
    console.log(changeData(dataTree, 0));

树状转为数组

    //树级结构转平级
    treeToList(tree) {
      let arrs = [];
      let result = [];
      arrs = arrs.concat(tree);
      // 把数组中每一项全部拉平
      while (arrs.length) {
        let first = arrs.shift(); // 弹出第一个元素
        // 直到每一项数据都没有children
        if (first.$children) {
          //如果有children
          arrs = arrs.concat(first.$children);
          delete first['$children'];
        }
        result.push(first);
      }
      return result;
    },

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs

import dayjs from 'dayjs'
 
dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)

qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs
import s from 'qs'
 
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

js-cookie

一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie
import Cookies from 'js-cookie'
 
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'

flv.js

bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

npm install flv.js
<video autoplay controls width="100%" height="500" id="myVideo"></video>
 
import flvjs from 'flv.js'
 
// 页面渲染完成后执行
if (flvjs.isSupported()) {
  var myVideo = document.getElementById('myVideo')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://localhost:8080/test.flv' // 视频 url 地址
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole
import VConsole from 'vconsole'
 
const vConsole = new VConsole()
console.log('Hello world')

Animate.css

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

npm install animate.css
<h1 class="animate__animated animate__bounce">An animated element</h1>
 
import 'animate.css'

animejs

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs
<div class="ball" style="width: 50px; height: 50px; background: blue"></div>
 
import anime from 'animejs/lib/anime.es.js'
 
// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})

lodash.js

一个一致性、模块化、高性能的 JavaScript 实用工具库

npm install lodash
import _ from 'lodash'
 
_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]

优雅​​​​​​​随机字符串

Math.random().toString(16).substring(2)
//3324f982047b

打乱数组
 

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
return Math.random() - 0.5;
});
// 输出
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

将Object属性转成属性数组
​​​​​​​

const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
Object.keys(obj);
(3) ["a", "b", "c"]
Object.values(obj);
(3) [1, 2, 3]

对象深拷贝

 function clone(obj) {
      var newObj = {}
      for (var key in obj) {
        if (typeof obj[key] === 'object') {
          newObj[key]=  clone(obj[key])
        } else {
          newObj[key] = obj[key]
        }
      }
      return newObj
    }

字符串加空格

'你好 \xa0 \xa0 ！'