js优秀代码片段（持续更新）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.数组去重

// 第一种
let array = [1,1,2,3,4,4,5];
let res = [...new Set(array)];
// 第二种
let array = [1,1,2,3,4,4,5];
let res = Array.from(new Set(array));
// 第三种
let array = [1,1,2,3,4,4,5];
let res = array.filter((item,index) => array.indexOf(item) === index);

2.两个数组对象对比，去除重复的对象

// array1中去除在array2重复的
let array1 = [{id:1,name:'zhangsan'},{id:2,name:'lisi'},{id:3,name:'wangwu'}];
let array2 = [{id:1,name:'zhangsan'},{id:3,name:'wangwu'}];
let res = array1.filter(v=> !array2.some(vv=> v.id === vv.id));
// 打印后，res只有id是2的了

3.生成指定长度的数组

// 生成100个数组
let array = [...Array(100).keys()];

4.数组取交集

const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
const duplicatedValues = [...new Set(a)].filter(item => b.includes(item))
duplicatedValues // [3, 4, 5]

5.数组取差集

const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
const diffValues = [...new Set([...a, ...b])].filter(item => !b.includes(item) || !a.includes(item)) // [0, 1, 2, 6, 7, 8]

6.数组reduce

代替some和every
const scores = [
    { score: 45, subject: "chinese" },
    { score: 90, subject: "math" },
    { score: 60, subject: "english" }
];

// 代替some：至少一门合格
const isAtLeastOneQualified = scores.reduce((t, v) => t || v.score >= 60, false); // true

// 代替every：全部合格
const isAllQualified = scores.reduce((t, v) => t && v.score >= 60, true); // false

6.一维数组转树形结构一

 let source = [
      { id: 1, name: "节点1", pid: 0 },
      { id: 11, name: "节点1-1", pid: 1 },
      { id: 111, name: "节点1-1-1", pid: 11 },
      { id: 12, name: "节点1-2", pid: 1 },
      { id: 121, name: "节点1-2-1", pid: 12 },
      { id: 2, name: "节点2", pid: 0 },
      { id: 3, name: "节点3", pid: 0 },
      { id: 31, name: "节点3-1", pid: 3 },
      { id: 32, name: "节点3-2", pid: 3 },
    ];
    function toTree(list, pid) {
      let res = [];
      list.forEach((v) => {
        if (v.pid == pid) {
          v.children = toTree(list, v.id);
          res.push(v);
        }
      });
      return res;
    }
    console.log(toTree(source, 0)); // 输出包含children层级关系的树形结构

7.一维数组转树形结构二

/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
  list.forEach(item => {
    // 判断是否为父级菜单
    if (item.parentId === parentId) {
      const child = {
        ...item,
        key: item.key || item.name,
        children: []
      }
      // 迭代 list， 找到当前菜单相符合的所有子菜单
      listToTree(list, child.children, item.id)
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      // 加入到树中
      tree.push(child)
    }
  })
}

8. 递归遍历异步路由

/**
 * 根据权限 - 递归过滤异步路由
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = [];

  routes.forEach(route => {
    const temp = { ...route };
    // 还可以在递归中拼接全路径
    if (hasPermission(roles, temp)) {
      if (temp.children) {
        temp.children = filterAsyncRoutes(temp.children, roles);
      }
      res.push(tmp);
    }
  });

  return res;
}

9. 自动导入vuex的modules下所有文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store