前端面试题积累（持续更新）

前端面试题

计算数组的最大值和平均值

1. 题目：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。
2. 思路：
   (1)声明一个求和变量 sum。
   (2)遍历这个数组，把里面每个数组元素加到 sum 里面。
   (3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。
3. 代码：

 var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
        }
        average = sum / arr.length;
        console.log(sum, average); // 想要输出多个变量，用逗号分隔即可
        

求最大值（数组版）

1. 题目：求数组[2,6,1,77,52,25,7]中的最大值
2. 思路：
   (1)声明一个保存最大元素的变量 max。
   (2) 默认最大值可以取数组中的第一个元素。
   (3) 遍历这个数组，把里面每个数组元素和 max 相比较。
   (4) 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
   (5) 最后输出这个 max
3. 代码：

 var arr = [2, 6, 1, 77, 52, 25, 7, 99];
        var max = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        console.log('该数组里面的最大值是：' + max);

求最大值（函数版）

1. 题目：利用函数求数组 [5,2,99,101,67,77] 中的最大数值。

        function getArrMax(arr) { // arr 接受一个数组  arr =  [5,2,99,101,67,77]
            var max = arr[0];
            for (var i = 1; i <= arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        // getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
        // **在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单**
        // var re = getArrMax([5, 2, 99, 101, 67, 77]);
        var re = getArrMax([3, 77, 44, 99, 143]);
        console.log(re);

数组转换为字符串

1. 题目：将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分割
2. 思路：
   （1）需要一个新变量用于存放转换完的字符串 str。
   （2）遍历原来的数组，分别把里面数据取出来，加到字符串里面。
   （3）同时在后面多加一个分隔符
3. 代码：

var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        var sep = '*';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + sep;
        }
        console.log(str);
        

数组去重

1. 题目：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
2. 思路：
   (1)需要一个新数组用于存放筛选之后的数据。
   (2)遍历原来的数组， 把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。
   (3)新数组里面的个数， 用 length 不断累加。
3. 代码：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);

翻转数组（数组版）

1. 将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放
2. 思路：
   (1)声明一个新数组 newArr
   (2) 把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
   (3) 我们采取 递减的方式 i–
3. 代码：

 var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);

冒泡排序

1. 代码

 // 冒泡排序
        // var arr = [5, 4, 3, 2, 1];
        var arr = [4, 1, 2, 3, 5];
        for (var i = 0; i <= arr.length - 1; i++) { // **外层循环管趟数** 
            for (var j = 0; j <= arr.length - i - 1; j++) { // **里面的循环管 每一趟的交换次数**
                // 内部交换2个变量的值 前一个和后面一个数组元素相比较
                if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }

            }
        }

倒计时效果

1. 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
2. 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3. 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
   转换公式如下：
   d = parseInt(总秒数/ 60/60 /24); // 计算天数
   h = parseInt(总秒数/ 60/60 %24) // 计算小时
   m = parseInt(总秒数 /60 %60 ); // 计算分数
   s = parseInt(总秒数%60); // 计算当前秒数
4. 代码：

function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2019-5-1 18:00:00'));
        var date = new Date();
        console.log(date);

数组去重

1. 要求：数组去重 [‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’] 要求去除数组中重复的元素。
2. 目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
3. 核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
4. 我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
5. 代码：

function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']；
        console.log(demo);

查找字符出现的位置及次数

1. 核心算法：先查找第一个o出现的位置，然后 只要indexOf 返回的结果不是 -1 就继续往后查找，因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找。
2. 代码

 var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        // console.log(index);
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是: ' + num);

统计出现次数最多的字符和次数

1. 核心算法：利用 charAt(） 遍历这个字符串；把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1；遍历对象，得到最大值和该字符
2. 代码

  var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);