JavaScript前端面试题整理

最新推荐文章于 2024-08-13 21:39:51 发布

zeddme

最新推荐文章于 2024-08-13 21:39:51 发布

阅读量288

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_44888570/article/details/115602345

版权

js 专栏收录该内容

35 篇文章

订阅专栏

本文精选了若干前端JavaScript面试题目并提供了详细的解答过程，涵盖了函数调用、数组操作、对象属性处理、Set与Promise等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本博客部分题目来自B站UP主峰华前端工程师

笔者觉得有些题目不错，记录一下。

正文

运行结果是？

const a = (b)=>{
	return b instanceof Function ? b() : b
}

console.log(a) 
console.log(a(()=>'hello'))
console.log(a('world'))

.
.
.
.
.
.
答案：a函数本身，“hello”，“world”

运行结果是？

const myFunc = str=>{
	if(str.length > 1){
		return myFunc(str.slice(1))
	}

	return str
}

console.log(myFunc('hello world'))

.
.
.
.
.
.
答案：“d”

运行结果是？

const obj = {
	1:'1',
	2:'2',
	3:'3'
}

console.log(Object.keys(obj), Object.values(obj))
console.log(Object.keys(obj) == Object.values(obj))
console.log(Object.keys(obj) == Object.keys(obj))

.
.
.
.
.
.
答案：[ ‘1’, ‘2’, ‘3’ ] [ ‘1’, ‘2’, ‘3’ ] false false
tips:虽说两个数组字面量相等，但是地址不同，所以不相等

运行结果是？

const arr = [...new Set([3, 1, 2, 3, 4])]
console.log(arr.length, arr[2])

.
.
.
.
.
.
答案：4 2

运行结果是？

const map = ['a', 'b', 'c'].map.bind([1, 2, 3])
map(el => console.log(el))

.
.
.
.
.
.
答案：1，2，3
tips：相当于map = Array.prototype.map.bind([1, 2, 3])，与前面的字符数组无关

运行结果是？

const map = ['a', 'b', 'c'].map.bind([1, 2, 3])
map(el => console.log(el))

.
.
.
.
.
.
答案：1，2，3
tips：相当于map = Array.prototype.map.bind([1, 2, 3])，与前面的字符数组无关

运行结果是？

const arr1 = [{firstName:'james'}]
const arr2 = [...arr1]
arr2[0].firstName = 'zed'

console.log(arr1)

.
.
.
.
.
.
答案：[ { firstName: ‘zed’ } ]

运行结果是？

const arr = [
	x => x * 1,
	x => x * 2,
	x => x * 3,
	x => x * 4
]

console.log(arr.reduce((acc, cur) => acc + cur(acc), 1))

.
.
.
.
.
.
答案：120

运行结果是？

const timer = a =>{
	return new Promise(resolve => {
		setTimeout(()=>{
			resolve(a)
		}, Math.random() * 100)
	})
}

Promise.all([
	timer('hello'),
	timer('world')
])
	.then(data => {
		console.log(data)
	})

.
.
.
.
.
.
答案：[ ‘hello’, ‘world’ ]
tips：Promise.all([…]) 的结果顺序是按照Promise数组的顺序来的，爬虫中乱序不是all的原因，是并发的多个getOne函数的请求时间不同，进入Promise数组的顺序也就是乱序的

运行结果是？

function Dog(name){
	this.name = name
	this.speak = function() {
		return 'woof'
	}
}

const dog = new Dog('lishuai')

Dog.prototype.speak = function() {
	return 'arf'
}

console.log(dog.speak())

.
.
.
.
.
.
答案：woof

运行结果是？

const user = {
	name: 'Joe',
	age: 25,
	pet: {
		type: 'dog',
		name: 'lishuai'
	}
}

Object.freeze(user)

user.pet.name = 'zed'

console.log(user.pet.name)

.
.
.
.
.
.
答案：lishuai
tips：Object.freeze是浅冻结

运行结果是？

const mySet = new Set([{a:1},{a:1}])
console.log([...mySet])

.
.
.
.
.
.
答案：[ { a: 1 }, { a: 1 } ]
tips：字面量相同的引用类型数据，不会被Set当做同一个数据。

运行结果是？

const arr1 = ['a', 'b', 'c']
const arr2 = ['c', 'b', 'a']

console.log(
	arr1.sort() === arr1,
	arr2 == arr2.sort(),
	arr1.sort() === arr2.sort()
)

.
.
.
.
.
.
答案：true true false
tips：Array.prototype.sort改变原数组，所以第一行和第二行是true；第三行数组的字面量虽然相同，但是内存地址不同

如何判断一个数是否是整数？

const val = 1
//第一种方式
console.log(Number.isInteger(val))
//第二种方式
console.log(isInt(val))
//第三种方式
function isInt(val){
	return Math.round(val) === val
}

运行结果是？

let arr = new Array(3)
arr = arr.map(() => 1)
console.log(arr)

.
.
.
.
.
.
答案：[ < 3 empty items > ]
tips：Array.prototype.map 不会遍历空数组

运行结果是？

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()

.
.
.
.
.
.
答案：undefined lily
解释：因为使用var声明的变量，存在变量声明提升特性，在change函数中，就相当与，第一行有var uname，在打印这个未赋值的uname后，就uname = lily，然后在打印。

网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
.
.
.
.
.
.答案：

<body>
<h2 id="cd"></h2>
<script>
    const cd = document.querySelector('#cd')
    const nextYear = new Date().getFullYear() + 1
    const getTime = ()=>{
        const startTime = Date.now()
        const endTime = new Date(`${nextYear}-1-1 00:00:00`).getTime()
        return  endTime-startTime
    }
    let cdTime = getTime()

    setInterval(()=>{
      cdTime -= 1000;
      let d = Math.floor(cdTime / (24*60*60*1000));
      let h = Math.floor(cdTime % (24*60*60*1000) / (60*60*1000));
      let m = Math.floor(cdTime % (60*60*1000) / (60*1000));
      let s = Math.floor(cdTime % (60*1000) / 1000);

      cd.innerHTML = `${nextYear - 1}年还剩${d}天${h}时${m}分${s}秒`
    },1000)
</script>
</body>

写一个function，清除字符串前后的空格。（兼容所有浏览器）
.
.
.
.
.
.
答案：

    var trim = function (str){
        var index = 0
        var index1 = str.length-1

        while (str[index] === ' ') {
            index++;
        }
        while (str[index1] === ' '){
            index1--
        }

        return str.slice(index,index1 + 1)
    }

    console.log(trim('  1 2 3    '))

判断一个字符串中出现次数最多的字符，统计这个次数
.
.
.
.
.
答案：

const theOftenChar = (str)=>{
        const query = {}
        let max = -1
        let maxKey;

        for (let item of str){
            if (typeof query[item] === 'undefined'){
                query[item] = 1
            }else {
                query[item]++
            }
        }

        for (let key in query){
            if (query[key] > max){
               max =  query[key]
               maxKey = key
            }
        }

        return maxKey
    }