前端JS基础面试技巧
前端JS基础面试技巧 – JS基础知识下
JS 三座大山:原型原型链 、作用域闭包 、异步和单线程 。
知识点:
3-1 异步和单线程
3-2 日期和math
- 日期
- Math
- 数组 API
- 对象 API
3-1 异步和单线程
异步和单线程
题目
知识点
解答
题目
- 同步和异步的区别是什么?分别举一个同步和异步的例子
- 一个关于 setTimeout 的笔试题
- 前端使用异步的场景有哪些
知识点
- 什么是异步(对比同步)
- 前端使用异步的场景
- 异步个单线程
什么是异步
异步(Asynchronous)
一般而言,操作分为发出调用和得到结果两步。发出调用后一直等待,直到拿到结果(这段时间不能做任何事)为 同步 ;发出调用后不等待,继续执行下一个任务,就是 异步任务 。
console.log(100)
setTimeout(function () {
console.log(200)
},1000)
console.log(300)
/*
100
300
200
*/
何时需要异步?
-
在可能发生等待的情况
-
等待过程中不能像 alert 一样阻塞程序运行
-
因此,所有的 “ 等待情况” 都需要异步
前端使用异步的场景
-
定时任务:setTimeout,setInterval
-
网络请求:ajax 请求,动态 <img> 加载
-
事件绑定
单线程
Javascript是单线程的 参考
JS的单线程是指一个浏览器进程中只有一个JS的执行线程,同一时刻内只会有一段代码在执行
在某个特定的时刻只有特定的代码能够被执行,并 阻塞 其它的代码。
console.log(100)
setTimeout(function () {
console.log(200)
})
console.log(300)
上面代码执行过程:
重点总结
- 异步和同步的区别
- 异步和单线程的关系
- 异步在前端的引用场景
解答
-
同步和异步的区别是什么?分别举一个同步和异步的例子
-
同步 是 阻塞模式 ,异步 是 非阻塞模式 。
同步 就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会 一直等待下去 ,知道收到返回信息才继续执行下去;
异步 是指进程 不需要一直等下去 ,而是 继续执行下面的操作,不管其他进程的状态。当有消息返回式系统会通知进程进行处理,这样可以提高执行的效率。
-
alert 是 同步, setTimeout 是 异步
-
-
一个关于 setTimeout 的笔试题
console.log(1)
setTimeout(function () {
console.log(2)
}, 0)
console.log(3)
setTimeout(function () {
console.log(4)
}, 1000)
console.log(5)
/*
1
3
5
2
4
*/
- 前端使用异步的场景有哪些
- 定时任务:setTimeout,setInterval
- 网络请求:ajax 请求,动态 <img> 加载
- 事件绑定
3-2 日期和math
题目
知识点
解答
题目
- 获取 2017 -06 -10 格式的日期
- 获取 随机数,要求是长度一致 的字符串格式
- 写一个 能遍历对象 和数组 的通用 forEach 函数
知识点
- 日期
- Math
- 数组 API
- 对象 API
日期
日期对象用于处理日期和时间。
Math
Math 是一个内置对象, 它具有数学常数和函数的属性和方法。不是一个函数对象。
描述:与其它全局对象不同的是,
Math
不是一个构造器.Math
的所有属性和方法都是静态的. 你用到的常数pi可以用Math.PI
表示,用x
作参数 Math.sin(x)调用sin函数. JavaScript中的常数, 是以全精度的实数定义的.Math.random() 在前端的作用:随时改变,清除缓存。
数组 API
详情可以参考我的博客:JavaScript 数组那些事
面试官最常问的几个 :
- forEach 遍历所有元素
- every 判断所有元素是否都符合条件
- some 判断是否有至少一个元素符合条件
- sort 排序
- map 对元素重新组装,生成新数组
- filter 过滤符合条件的元素
对象 API
Object.prototype API
Object.prototype
表示对象的原型对象
Object.prototype
属性的属性特征
解答
- 获取 2019-07-17 格式的日期
function formatDate(dt) {
if (!dt) {
dt = new Date()
}
var dt = new Date()
var year = dt.getFullYear()
var month = dt.getMonth() + 1
var data = dt.getDate()
if (month < 10) {
month = '0' + month
}
if (data < 10) {
data = '0' + data
}
return year + '-' + month + '-' + data
}
var dt = new Date()
console.log(formatDate(dt))
// 2019-07-17
- 获取 随机数,要求是长度一致 的字符串格式
var random = Math.random()
random =random +'0000000000'
random = random.slice(0,10)
console.log(random)
- 写一个 能遍历对象 和数组 的通用 forEach 函数
// 写一个 能遍历对象 和数组 的通用 forEach 函数
function forEach(obj, fn) {
if (obj instanceof Array) {
obj.forEach(function (item, index) {
fn(item, index)
})
} else {
for (let key in obj) {
fn(key, obj[key])
}
}
}
// 使用 forEach 函数
var arr = [1, 2, 3]
var obj = {x: 100, y: 200}
forEach(arr, function (index, item) {
console.log(index + '---' + item)
})
forEach(obj, function (key, value) {
console.log(key, value)
})
/*
2---1
3---2
x 100
y 200
*/