前端面试题

1.请顺序写出输出日志

console.log(‘start’)

function test () {
console.log(‘start-test’)
return new Promise((resolve, reject) => {
console.log(‘promise’);
setTimeout(() => {
console.log(‘setTimeout’);
}, 0)
resolve();
reject();
})
console.log(‘end-test’);
}

test()
.then(() => {
console.log(‘then’);
})
.catch(() => {
console.log(‘catch’)
})

答:输出依次为 start start-test promise then setTimeout

2.使用单层循环求交集（a&b 均为递增整型数组），期望结果 var c = [2, 4, 7]

var a = [1, 2, 3, 4, 5, 7]
var b = [2, 4, 6, 7]

答：

 Array.prototype.intersect = function (b) {
            var flip = {};
            var res = [];
            for (var i = 0; i < b.length; i++) flip[b[i]] = i;
            for (i = 0; i < this.length; i++)
                if (flip[this[i]] != undefined) res.push(this[i]);
            return res;
        }
        var a = [1, 2, 3, 4, 5, 7]
        var b = [2, 4, 6, 7]
        var c = []
        c = a.intersect(b)
        console.log(c); //[2, 4, 7]

3.实现一个简单的防抖函数

答:

function fun() {
            console.log('即将要做的事情')
        }

        function debounce(fn, delay) {
            var handle;
            return function () {
                clearTimeout(handle)
                handle = setTimeout(function () {
                    fn()
                }, delay)
            }
        }
        window.addEventListener('resize', debounce(fun, 500));

4.简述css3 中transform都有哪些属性，分别都会产生什么效果

答: 1.translate 位移,scale 缩放,rotate 旋转,skew 倾斜

5.js中对数组的操作有哪些，分别有什么作用

答:1.every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true;
2.some()： 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true;
3.filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组;
4.map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组;
5.forEach()：对数组中的每一项运行给定函数，这个方法并没有返回值

6.写出至少两种数组去重的方法 arr = [‘1’, ‘2’, ‘3’, ‘1’, ‘a’, ‘b’, ‘b’]

答: 1.es5嵌套for循环数组去重

function unique(arr) {
            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);
                        j--;
                    }
                }
            }
            return arr;
        }
        var arr = ['1', '2', '3', '1', 'a', 'b', 'b']
        console.log(unique(arr)) //["1", "2", "3", "a", "b"]

2.es6去重

function unique(arr) {
            return Array.from(new Set(arr))
        }
        var arr = ['1', '2', '3', '1', 'a', 'b', 'b']
        console.log(unique(arr)) //["1", "2", "3", "a", "b"]

7.请写出项目中常用的语义化标签（例如：p-段落）：

答: section-节,header-页眉,footer-页脚,nav-导航栏,video-视频,audio-音频,time-时间,a-链接,ul-无序列表,ol-有序列表,address-地址,img-图片,h1到h6-标题,aside-侧边栏标签,title-标题,strong-加粗,em-倾斜,

8.请计算出字符串string = 'aaabbcdefc’中每个字母出现的次数

答:

function charStats(string) {
            var visitStats = {};
            for (var i = 0; i < string.length; i++) {
                var char = string[i];
                if (!visitStats[char]++)
                    visitStats[char] = 1;
            }
            return visitStats;
        }
        var string = 'aaabbcdefc'
        console.log(charStats(string)); //a: 3 b: 2 c: 2 d: 1 e: 1 f: 1

9.循环数组arr，每个值加数字number，大于等于数组arr中最大的值，返回true，反之返回false

let arr = [10,15,18,6,8], number = 6;
let newArr = [false,true,true,false,false]

答:

let arr = [10, 15, 18, 6, 8],
            number = 6,
            newArr = [],
            max = Math.max(...arr)

        function fun(arr) {

            for (var i = 0; i < arr.length; i++) {
                newArr[i] = arr[i] + number;
                if (newArr[i] >= max) {
                    console.log("true ")
                } else {
                    console.log("false ")
                }
            }
        }
        fun(arr); //false,true,true,false,false