常见的JavaScript算法

前言

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。

Q1 判断一个单词是否是回文？

回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider .

很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数，将字符串转换成数组，这个思路很重要，我们可以拥有更多的自由度去进行字符串的一些操作。

function checkPalindrom(str) {  
    return str == str.split('').reverse().join('');
}

Q2 去掉一组整型数组重复的值

比如输入: [1,13,24,11,11,14,1,2]
输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

这道问题出现在诸多的前端面试题中，主要考察个人对Object的使用，利用key来进行筛选。

function unique(arr) {
    let hashTable = {};
    let data = [];
    for (var i = 0; i < arr.length; i++) {
        if (!hashTable[(arr[i])]) {
            hashTable[arr[i]] = true;
            data.push(arr[i]);
        }
    }
    return data;
}

Q3 统计一个字符串出现最多的字母

给出一段英文连续的英文字符窜，找出重复出现次数最多的字母
输入 ： afjghdfraaaasdenas
输出 ： a

前面出现过去重的算法，这里需要是统计重复次数。

function findMaxDuplicateChar(str) {
        //如果字符串长度为1，直接返回当前字符串
        if (str.length == 1) {
            return str;
        }
        let charObj = {};
        for (let index = 0; index < str.length; index++) {
            //如果charObj不包含当前index索引值
            if (!charObj[str.charAt(index)]) {
                charObj[str.charAt(index)] = 1;
            } else {
                charObj[str.charAt(index)] += 1;
            }
        }
        let maxChar = '', maxValue = 1;
        for (let l in charObj) {
            if (charObj[l] >= maxValue) {
                maxChar = l;
                maxValue = charObj[l];
            }
        }
        return maxChar;
    }

Q4 排序算法

如果抽到算法题目的话，应该大多都是比较开放的题目，不限定算法的实现，但是一定要求掌握其中的几种，所以冒泡排序，这种较为基础并且便于理解记忆的算法一定需要熟记于心。冒泡排序算法就是依次比较大小，小的的大的进行位置上的交换。

function bubbleSort(array) {
        for (let index = 0; index < array.length; index++) {
            for (let j = index + 1; j < array.length; j++) {
                if (array[index] > array[j]) {
                    let temp = array[index];
                    array[index] = array[j];
                    array[j] = temp;
                }
            }
        }
        return array;
    }

除了冒泡排序外，其实还有很多诸如 插入排序,快速排序，希尔排序等。每一种排序算法都有各自的特点。全部掌握也不需要，但是心底一定要熟悉几种算法。 比如快速排序，其效率很高.

算法参考某个元素值，将小于它的值，放到左数组中，大于它的值的元素就放到右数组中，然后递归进行上一次左右数组的操作，返回合并的数组就是已经排好顺序的数组了。

function quickSort(arr) {
        if (arr.length <= 1) return arr;
        var leftArr = [];
        var rightArr = [];
        var pivotIndex = Math.floor(arr.length / 2);
        var pivot = arr.splice(pivotIndex, 1)[0];
        for (var i = 0; i < arr.length; i++) {
            arr[i] > pivot ? rightArr.push(arr[i]) : leftArr.push(arr[i]);
        }
        return [].concat(quickSort(leftArr), [pivot], quickSort(rightArr))
    }

这种是阮一峰老师推荐的方法，最近网络上有篇文章：面试官：阮一峰版的快速排序完全是错的
我个人感觉前端的重点工作主要在界面实现和交互上面，对于专业的算法知识的确认知不够，但是够用就好。（感谢阮一峰老师的系列博客！！！）

冒泡排序、快速排序和JavaScript数组sort（）排序效率对比

本来准备用一千万数据来测试，可是我抽完一支烟回来，冒泡排序还没有执行完。。。

    const arr = [];

    // 生成十万个成员的数组
    generateArr(100000);

    console.time('bubbleSort');
    bubbleSort(arr)
    console.timeEnd('bubbleSort');

    console.time('quickSort');
    quickSort(arr)
    console.timeEnd('quickSort');

    console.time('sort');
    arr.sort(compare)
    console.timeEnd('sort');


    //比较函数
    function compare(x, y) {
        if (x < y) {
            return -1;
        } else if (x > y) {
            return 1;
        } else {
            return 0;
        }
    }
    // 生成随机整数
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 生成len长度的随机数组
    function generateArr(len) {
        for (var i = 0; i < len; i++) {
            arr.push(random(1, len));
        }
    }

测试结果

bubbleSort: 23268.48486328125ms
quickSort: 58.161865234375ms
sort: 68.755859375ms

Q5 不借助临时变量，进行两个整数的交换

输入 a = 2, b = 4 输出 a = 4, b =2

这种问题非常巧妙，需要大家跳出惯有的思维，利用 a , b进行置换。
主要是利用 + – 去进行运算，类似 a = a + ( b – a) 实际上等同于最后 的 a = b;

function swap(a, b) {
        b = b - a;
        a = a + b;
        b = a - b;
        return [a, b]
    }

Q6 找出下列正数组的最大差值比如:

输入 [10,5,11,7,8,9]
输出 6

这是通过一道题目去测试对于基本的数组的最大值的查找，很明显我们知道，最大差值肯定是一个数组中最大值与最小值的差。

 function getMaxProfit(arr) {
        var min = arr[0];
        var max = 0;
        for (let index = 0; index < arr.length; index++) {
            var current = arr[index];
            min = Math.min(min, current);
            var potentialProfit = current - min;
            max = Math.max(max, potentialProfit);
        }
        return max;
    }

Q7 随机生成指定长度的字符串

实现一个算法，随机生成指制定长度的字符窜。
比如给定 长度 8 输出 4ldkfg9j

function randomString(n) {
        let str = 'ABCDEFGHIJKLMNOPQRSTUVWXWZabcdefghijklmnopqrstuvwxyz9876543210', tmp = '';
        for (let index = 0; index < n; index++) {
            tmp += str.charAt(Math.floor(Math.random() * str.length));
        }
        return tmp;
    }

Q8 实现类似getElementsByClassName 的功能

自己实现一个函数，查找某个DOM节点下面的包含某个class的所有DOM节点？不允许使用原生提供的 getElementsByClassName querySelectorAll 等原生提供DOM查找函数。

function queryClassName(node, name) {  
  var starts = '(^|[ \n\r\t\f])',
       ends = '([ \n\r\t\f]|$)';
  var array = [],
        regex = new RegExp(starts + name + ends),
        elements = node.getElementsByTagName("*"),
        length = elements.length,
        i = 0,
        element;
    while (i < length) {
        element = elements[i];
        if (regex.test(element.className)) {
            array.push(element);
        }
        i += 1;
    }
    return array;
}

参考