慕课网前端JavaScript面试（2）

我不是女神ヾ 2022-03-15 15:08 287阅读 0赞

**4.JS基础知识-异步**

4.1异步

题目：  
同步和异步的区别是什么？分别举一个同步和异步的例子  
一个关于setTimeout的笔试题  
前端使用异步的场景有哪些？

知识点：  
什么是异步（对比同步）  
前端使用异步的场景  
异步和单线程

console.log(1000)
    setTimeout(function(){
    	console.log(200)
    },1000)
    console.log(300)

从上面代码看，如果同步执行，那么300就会被阻塞，这就是异步的好处。

何时需要异步：  
1.在可能发生等待的情况  
2.等待过程中不能像alert一样阻塞程序运行  
3.因此，所有的“等待的情况”都需要异步

前端使用异步的场景：  
1.定时任务：setTimeout，setInverval  
2.网络请求：ajax请求，动态`<img>`加载  
3.事件绑定

//ajax请求代码示例
    console.log('start')
    $.get('./data1.json',function(data1){
    	console.log(data1)
    })
    console.log('end')

`<img>`加载示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
事件绑定示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

也就是请求处理过程中，你不能闲着，会产生异步的请求，回头再处理，然后继续执行下面的请求。

**同步阻塞示例：**

console.log(1000)
    alert(200)
    console.log(3000)

上面就是同步阻塞示例，你不点击alert确认窗口，不会打印3000

4.2异步和单线程

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
同步和异步的区别是什么？分别举一个同步和异步的例子

同步会阻塞代码执行，而异步不会  
alert是同步，setTimeout是异步

一个关于setTimeout的笔试题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]  
1 3 5 2 4

前端使用异步的场景有哪些？

1.定时任务：setTimeout，setInverval  
2.网络请求：ajax请求，动态`<img>`加载  
3.事件绑定

特点是：需要等待，而且因为JavaScript是单线程，所以需要异步

4.3日期和math

题目：  
1.获取2017-06-10格式的日期  
2.获取随机数，要求是长度一致的字符串格式  
3.写一个能遍历对象和数组的通用forEach函数

知识点：  
1.日期  
2.Math  
3.数组API  
4.对象API

Date日期  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

Math

Math.random()

4.4数组和对象

**数组：**

forEach 遍历所有元素  
every 判断所有元素**是**否都符合条件  
some 判断是否有**至少一个**元素符合条件  
sort 排序  
map 对元素重新组装，生成新数组  
filter 过滤符合条件的元素(保存符合条件的数组)

var arr = [1,2,3]
    arr.forEach(function (item,index){
    	//遍历数组的所有元素
    	console.log(index,item)
    })
    
    var arr=[1,2,3]
    var result = arr.every(function(item,index){
    	if(item<4){
    		//都要满足条件
    		return ture
    	}
    })
    console.log(result)
    
    var arr=[1,2,3]
    var result = arr.some(function(item,index){
        //至少一个满足
    	if(item<2){
    		return ture
    	}
    })
    console.log(result)
    
    var arr = [1,4,2,3,5]
    var arr2 = arr.sort(function(a,b){
    	//从小到大
    	return a-b
    	//从大到小
    	return b-a
    })
    console.log(arr2)
    
    var arr = [1,2,3,4]
    var arr2 = arr.map(function(item,index){
    	//将元素重新组装，并返回
    	return '<b>' + item + '</b>'
    })
    consolelog(arr2)
    
    var arr = [1,2,3]
    var arr2 = arr.filter(function(item,index){
    	//通过设置条件，过滤符合条件的数据,保存符合条件的数组
    	if(item>=2){
    		return true
    	}
    })
    console.log(arr2)   // [2,3]

**对象API**  
for in遍历所有元素

var obj = {
    	x:100,
    	y:200,
    	z:300
    }
    var key
    for (key in obj){
    	if(obj.hasOwnProperty(key)){
    		console.log(key,obj[key])
    	}
    }

1.获取2017-06-10格式的日期

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

2.获取随机数，要求是长度一致的字符串格式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

3.写一个能遍历对象和数组的通用forEach函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]  
总结：日期、Math、数组API、对象API

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220315/eecf630d206547939670fb0e5d875d8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/adbdaeb72d4c49e58b12b81656c27855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220315/05f982785cde4458bc572609092507c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220315/e2a843880655473ca116636933a0dacb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220315/89470bf452964199a43798006e2e44c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220315/b99bdbab8fe44bf39ae65ace6bf74d68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220315/e8a56e61fe664ddb930a249b627659e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220315/87efca1a61924913b03d5c35d64bffbf.png