手写代码

数组

1、数组去重

// 方式1：set
var arr = [1, 2, 2, 4, 3, 4, 1, 3, 2, 7, 5, 6, 1];
var newArr = new Set(arr);
// 输出结果：Set(7) {1, 2, 4, 3, 7, 5, 6}

// 方式2：indexOf
function fn(arr) {
  let newArr = [];
  arr.forEach((val) => {
    if (newArr.indexOf(val) == -1) {
      newArr.push(val);
    }
  });
  return newArr;
}
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。indexOf() 方法区分大小写。

function fn(arr) {
  return arr.filter((item, index, arr) => arr.indexOf(item) === index);
}
// 输出结果：[1, 2, 4, 3, 7, 5, 6]

// 方式3：普通去重
for (var i = 0; i < arr.length; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) {
      arr.splice(j, 1);
    }
  }
}
// 输出结果：[1, 2, 4, 3, 7, 5, 6]

// 方式4：键值
function fn(arr) {
  let arr1 = [],
    arr2 = [];
  arr.forEach((val) => {
    arr1[val] = val;
  });
  // arr1数组会存在空的情况
  // 所以返回arr2
  arr1.forEach((val) => {
    if (!!val) {
      arr2.push(val);
    }
  });
  return arr2;
}
// 输出结果：[1, 2, 3, 4, 5, 6, 7]

// 方式5：sort
function fn(arr) {
  let newArr = [];
  arr.sort((a, b) => {
    return a - b;
  });
  arr.forEach((val, index) => {
    if (val != arr[index + 1]) {
      newArr.push(val);
    }
  });
  return newArr;
}
// 输出结果：[1, 2, 3, 4, 5, 6, 7]

2、寻找两数组不同

function getDiff(arr1, arr2) {
  return arr1
    .concat(arr2)
    .filter((item, index, arr) => arr.indexOf(item) === arr.lastIndexOf(item));
}

// eg:
var a1 = [1, 2, 3, 4, 5],
  a2 = [2, 3, 4, 5, 6];
getDiff(a1, a2); // 输出结果：[1, 6]

注： concat 用来合并两个数组，也可以写成 [...arr1, ...arr2] ； filter 用来过滤数组，参数 arr 表示合并后的数组； indexOf 表示元素第一次出现的位置， lastIndexOf 表示元素最后一次出现的位置。

3、寻找两数组相同

function getSame(arr1, arr2) {
  return [...new Set(arr1)].filter((item) => arr2.includes(item));
}

// eg:
var a1 = [1, 2, 3, 3, 4, 5],
  a2 = [2, 3, 4, 5, 6];
getSame(a1, a2); // 输出结果：[2, 3, 4, 5]

Set方法 是 es6 新增的方法，用来去重；以上方法通过过滤数组 a1 ，遍历每一项，找到 a2 和 a1 的交集。

4、树状转扁平

var data = [
  {
    id: "a",
    pid: 0,
    value: "陕西",
    children: [
      { id: 01, pid: "a", value: "西安" },
      { id: 02, pid: "a", value: "渭南" },
      { id: 03, pid: "a", value: "咸阳" },
    ],
  },
  {
    id: "b",
    pid: 0,
    value: "广东",
    children: [
      { id: 11, pid: "b", value: "广州" },
      { id: 12, pid: "b", value: "深圳" },
      { id: 13, pid: "b", value: "潮汕" },
    ],
  },
  {
    id: "c",
    pid: 0,
    value: "湖南",
    children: [
      { id: 21, pid: "c", value: "长沙" },
      { id: 22, pid: "c", value: "常德" },
      { id: 23, pid: "c", value: "岳阳" },
    ],
  },
];

function toLine(data) {
  return data.reduce(
    (arr, { id, value, pid, children = [] }) =>
      arr.concat([{ id, value, pid }], toLine(children)),
    []
  );
}
var listarr = toLine(data);
console.log(listarr);

5、扁平转树状

var data = [
  { pid: 0, id: "a", value: "陕西" },
  { pid: "a", id: 01, value: "西安" },
  { pid: "a", id: 02, value: "渭南" },
  { pid: "a", id: 03, value: "咸阳" },
  { pid: 0, id: "b", value: "广东" },
  { pid: "b", id: 11, value: "广州" },
  { pid: "b", id: 12, value: "深圳" },
  { pid: "b", id: 13, value: "潮汕" },
  { pid: 0, id: "c", value: "湖南" },
  { pid: "c", id: 21, value: "长沙" },
  { pid: "c", id: 22, value: "常德" },
  { pid: "c", id: 23, value: "岳阳" },
];

function toTree(data) {
  let cloneData = JSON.parse(JSON.stringify(data)); // 对源数据深度克隆
  let tree = cloneData.filter((father) => {
    // 循环所有项
    let branchArr = cloneData.filter((child) => {
      return father.id == child.pid; // 返回每一项的子级数组
    });
    if (branchArr.length > 0) {
      father.children = branchArr; // 如果存在子级，则给父级添加一个children属性，并赋值
    }
    return father.pid == 0; //返回第一层
  });
  return tree; // 返回树形数据
}
var tree = toTree(data);
console.log(tree);

// 递归方法
function toTree(data) {
  // 删除所有 children,以防止多次调用
  data.forEach(function (item) {
    delete item.children;
  });
  // 将数据存储为 以 id 为 KEY 的 map 索引数据列
  var map = {};
  data.forEach(function (item) {
    map[item.id] = item;
  });
  var val = [];
  data.forEach(function (item) {
    // 以当前遍历项，的pid,去map对象中找到索引的id
    var parent = map[item.pid];
    // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
      val.push(item);
    }
  });
  return val;
}
console.log(toTree(data));