2020年前端面试题·四

实现一个函数，判断输入是不是回文字符串

回文字符串：一个字符串的正序和倒序一模一样，例如：‘level’ ，‘12321’

思路一：取单个字符与倒序位置上的字符进行比对

let str = 'level'
let isTrue = true
for (let i = 0; i < Math.floor(str.length) - 1; i++) {
	str[i] === str.charAt(str.length - 1 - i) ? false : isTrue = false
}

思路二：将字符串转换为数组，翻转后在拼合，与原来的字符串进行比较

let str = 'level'
let isTrue = str === str.split('').reverse().join('')

 

怎么给一个DOM元素绑定多个同类型事件？

利用 addEventListener 进行事件监听，可以支持同一个元素监听多个同类型事件

拓展：利用 removeEventListener 可以移除事件，但是第三个参数需要传入回调函数的名称，所以在监听时，应将回调函数抽出，单独声明为命名函数

注意：addEventListener 和 removeEventListener 中传入的事件名称都不要用 on 开头

let btnObj = document.getElementById('btn')
let fn1 = () => {
    console.log('Hello World')
}
let fn2 = () => {
    console.log('Hi World')
}
btnObj.addEventListener('click', fn1)
btnObj.addEventListener('click', fn2)
// btnObj.removeEventListener('click', fn1)

 

写一个通用的事件监听器函数

class Event {
	addEvent(element, type, callback) {
        if (element.addEventListener) {
            element.addEventListener(type, callback)
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, callback)
        } else {
            element['on' + type] = callback
        }
    }

	removeEvent(element, type, callback) {
        if (element.removeEventListener) {
            element.removeEventListener(type, callback)
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, callback)
        } else {
            element['on' + type] = null
        }
    }
}

 

判断一个对象是否为数组

let checkType = t => i => Object.prototype.toString().call(i) === `[object ${t}]`
let arr = []
let isArray = checkType('Array')
console.log(isArray(arr)) // true

 

冒泡排序

每次比较相邻的两个数，如果第二个数比第一个小，换位置

for (let i = 0; i < arr.length - 1, i++) {
	for (let j = 0; j < arr.length - 1 - i; j++) {
		if (arr[j] > arr[j + 1]) {
			let n = arr[j]
			arr[j] = arr[j + 1]
			arr[j + 1] = n
		}
	}
}

 

快速排序

采用二分法，取出中间数，数组每次和中间数作比较，小的放左边，大的放右边

let sort = (arr) => {
	if (arr.length <= 1) {
		return arr
	}
	let cIndex = Math.floor(arr.length / 2)
	let c = arr.splice(cIndex, 1)[0]
	let l = []
	let r = []
	for (let i = 0; i < arr.length; i++) {
		if (arr[i] <= c) {
			l.push(arr[i])
		} else {
			r.push(arr[i])
		}
	}
	return sort(l).concat(c, sort(r))
}

 

ul 点击其中的 li 时 alert 其 index

方法一：使用 let 关键字声明，let 会生成块级作用域

let liObj = document.getElementsByTagName('li')
for (let i = 0; i < liObj.length; i++) {
	liObj[i].onclick = function () {
		alert(i)
	}
}

闭包

var liObj = document.getElementsByTagName('li')
for (var i = 0; i < liObj.length; i++) {
	liObj[i].onclick = (function (i) {
		return function () {
			alert(i)
		}
	})(i)
}

 

输出 YYYY-MM-DD HH:mm:ss 格式和 YYYY-MM-DD 格式的时间

function formatTimeOfYMDHms(time) {
    time = new Date(time)
    let year = time.getFullYear()
    let month = (time.getMonth() + 1).toString().padStart(2, '0')
    let day = time.getDate().toString().padStart(2, '0')
    let hour = time.getHours().toString().padStart(2, '0')
    let minutes = time.getMinutes().toString().padStart(2, '0')
    let seconds = time.getSeconds().toString().padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
}

function formatTimeOfYMD(time) {
    time = new Date(time)
    let year = time.getFullYear()
    let month = (time.getMonth() + 1).toString().padStart(2, '0')
    let day = time.getDate().toString().padStart(2, '0')
    return `${year}-${month}-${day}`
}

 

取 n, m 之间的随机数

let getRandom(n, m) {
	return Math.random() * (m - n) + n
}

 

解析 url 中的参数

function getParams(url) {
    let paramsList = url.split('?')[1].split('&')
    let params = {}
    for (let i = 0; i < paramsList.length; i++) {
        const itemList = paramsList[i].split('=')
        params[itemList[0]] = itemList[1]
    }
    return params
}

 

清除字符串前后空格

String.prototype.myTrim = function () {
    return this.replace(/^\s+/, '').replace(/$\s+/, '')
}