数据结构和算法--JavaScript编码能力

[Yolo-0317]

JavaScript编码能力

来源：https://segmentfault.com/a/1190000016418021

1.多种方式实现数组去重、扁平化、对比优缺点

测试数组：

const arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null,
  null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];

去重

1、利用ES6 Set去重（ES6中最常用）

function unique(arr) {
  return Array.from(new Set(arr));
}

const arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null,
  null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];

console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性，这种去重的方法代码最少。

{} === {}; // false
NaN === NaN; // false

这种方法认为NaN等于自身，而===认为NaN不等于自身

lodash中的_.uniq结果与此相同

2、通过for循环+数组相关方法（ES5中最常用）

// 判断数组合法性
function isValid(arr) {
  return !!(Array.isArray(arr) && arr.length > 0);
}

2-1、双重for循环+Array.splice

function unique(arr) {
  if (isValid(arr)) {
    const len = arr.length;
    for (let i = 0; i < len; i += 1) {
      for (let j = 0; j < len; j += 1) {
        if (arr[i] === arr[j]) {
          // 第一个等同于第二个，splice方法删除第二个
          arr.splice(j, 1);
        }
      }
    }
  }
  return [];
}

2-2、for循环+Array.indexOf

function unique1(arr) {
  const newArr = [];
  const len = arr.length;
  if (isValid(arr)) {
    for (let i = 0; i < len; i += 1) {
      const element = arr[i];
      const index = newArr.indexOf(element);
      if (index === -1) {
        newArr.push(element);
      }
    }
  }
  return newArr;
}

2-3、for循环+Array.sort

// sort 利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
function unique(arr) {
  let newArr = [];
  let srcArr = arr;
  if (isValid(arr)) {
    srcArr = arr.sort();
    newArr = [srcArr[0]];
    const len = srcArr.length;
    for (let i = 1; i < len; i += 1) {
      const ele = arr[i];
      if (ele !== arr[i + 1]) {
        newArr.push(ele);
      }
    }
  }
  return newArr;
}
// console.log('sort：', unique(arr)); // [ 0, 0, 1, 15, 'NaN', NaN, NaN, {}, {}, 'a', false, null, true, 'true' ]

明显缺点是改变了原数组的顺序

2-4、for循环+Array.includes

与indexOf思路相同

function unique3(params) {
  const newArr = [];
  const len = arr.length;
  if (isValid(arr)) {
    for (let i = 0; i < len; i += 1) {
      const element = arr[i];
      if (!newArr.includes(element)) {
        newArr.push(element);
      }
    }
  }
  return newArr;
}

4.手写防抖和节流工具函数、并理解其内部原理和应用场景

1. 防抖debounce：在事件触发n秒后执行回调，如果n秒内再次触发事件，则重新计时

使用场景：search输入联想限制请求次数

防抖函数：https://github.com/ShadowWalker627/JavascriptBlog/blob/master/utils/debounce.js

防抖实现：https://codepen.io/ShadowWalker627/pen/EzZZJO

！！！这篇老文章把防抖说成了节流：浅谈javascript的函数节流

2. 节流throttle：n秒内事件只会被触发一次

在页面滚动加载更多中应用防抖与节流的区别：

1. 防抖：只有当用户停止滚动n秒后才会判断是否滚动到页面底部；
2. 节流：每个n秒判断是否滚动到页面底部