智一面gtalent-前端面经js必遇真题

637 05-17

JS面试题真题

1.异步和单线程

题目

同步和异步的区别是什么?
手写Promise加载一张图片
前端使用异步的场景有哪些？

场景题：1，2，3，4，5以什么顺序打印出来？

//setTimeout笔试题
console.log(1)
setTimeout(function(){
  console.log(2)
},1000)
console.log(3)
setTimeout(function(){
  console.log(4)
},0);
console.log(5);
//1,3,5,4,2

知识点

单线程和异步
- JS是单线程语言，只能同时做一件事儿（产生异步的原因）
- 浏览器和node.js已经支持JS启动进程，如web worker
- JS 和DOM渲染共用一个线程，因为JS可修改DOM结构
- 遇到等待（网络请求，定时任务）不能卡住，所以需要异步
- 异步回调callback函数形式
```
 // 异步会执行（callback 回调函数）  (setTiemout里面的)
 console.log(100)
 setTimeout(() => {     
   console.log(200)
 }, 1000)//不会卡在这里，会先向下执行，执行完毕后再后执行回调函数
 console.log(300)
 console.log(400)
```
```
// 同步
console.log(100)
alert(200)//卡在这里，确认在继续执行
console.log(300)
```
- 基于JS是单线程语言的本质,异步不会阻塞代码
- 同步会阻塞代码的执

异步应用场景（等待的情况）

网络请求，如ajax和图片加载这时cpu是空闲的，所以要有异步，这样cpu才能饱和工作

//ajax
console.log('start');
$.get('./data1.json',function(data1){
  console.log(data1);
})
console.log('end');
/*
	1.打印start.
	2.执行网络请求（耗费时间），跳过继续向下执行
	3.打印end
	4.打印完end,网络请求什么时候完毕，什么时候就执行回调函数，返回请求数据
*/

//图片加载
console.log('start');
let img = document.createElement('img');
img.onload = function(){//onload 事件会在页面或图像加载完成后立即发生
  console.log('loaded');
}
//加载图片
img.src = '/xxx.png';
console.log('end');
//这里的onload是另一种形式的回调函数，程序执行到img.src进行加载图片，会花费一些时间，此时程序不会等待，而是会继续向下执行，打印end，什么时候图片加载完成，什么时候回调用onload函数，打印’onload‘

定时任务，如setTimeout，这时cpu是空闲的，所以要有异步，这样cpu才能饱和工作

//setTimeout 
setTimeout(() => {     
   console.log(200)
 }, 1000)//不会卡在这里，会先向下执行，执行完毕后再掉执行回调函数
 console.log(300)

//setInterval
console.log(100)
setInterval(function(){
  console.log(200)
},1000)
console.log(300)

问题解答:

异步同步的区别是什么？
- 基于JS是单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行

手写用Promise加载一张图片

const url1 = 'https://img1.sycdn.imooc.com/5968a7860001fed401000100-140-140.jpg';
const url2 = 'https://img3.sycdn.imooc.com/szimg/5eddd7aa09cfdb1c12000676-360-202.png'
    function loadImg(src) {
				//pending
        return new Promise((resolve,reject)=>{
           const img = document.createElement('img');
           img.onload = ()=>{//onload也是一种回调形式
               resolve(img);//resolved
           }
           img.onerror=()=>{
               const err = new Error(`图片加载失败${src}`);
               reject(err);//rejected
           }
           img.src = src;
        })
    }
    //1.加载一张图片
    /*
    loadImg(url).then(img=>{
        console.log(img.width);
        return img;
    }).then(img=>{
        console.log(img.height);
    }).catch(ex=>console.error(ex))
     */
    //2.加载两张图片
    loadImg(url1).then(img1=>{
        console.log(img1.width);//普通对象
        return img1;
    }).then(img1=>{
        console.log(img1.height);
        return loadImg(url2);//promise实例
    }).then(img2=>{
        console.log(img2.width);
        return img2;
    }).then(img2=>{
        console.log(img2.height)
    }).catch(ex=>console.error(ex))

前端使用异步的场景有哪些
- 网络请求，如ajax，图片加载
- 定时任务，如setTimeout

JS基础总结

内容回顾
- 变量的类型和计算
- 原型和原型链
- 作用域和闭包
- 异步和单线程
回顾题目
- typeof能判断哪些类型
- 何时使用=何时使用
- 值类型和引用类型的区别
- 手写深拷贝
回顾知识点
- 值类型vs引用类型，堆栈模型，深拷贝
- typeof 运算符作用
- 类型转化
原型和原型链的题目
- 如何准确判断一个变量是不是一个数组？
  - intanceof
- 手写一个jQuery，考虑插件和扩展性
- class的原型本质，怎么理解
原型和原型链--知识点
- class和继承，结合手写jQuery的实例来理解
- instanceof
- 原型和原型链:图示和执行规则
闭包和作用域-题目
- this的不同应用长江，如何取值
- 手写bind函数
- 实际开发中闭包的应用场景，举例说明
  - 坑:创建10个a标签，点击……
作用域和闭包--知识点
- 作用域和自由变量
- 闭包：两种常见形式&自由变量查找规则
- this
异步和单线程-题目
- 同步和异步的区别是什么？
- 手写promise加载一张图片
- 前端使用异步的场景有哪些
- setTimeout定时器的场景题
异步单线程-知识点
- 单线程和异步，异步和同步的区别
- 前端异步的应用场景：网络请求&定时任务
- Promise解决callback hell