大厂基础面试题(之二)

Q1:flex布局

Flex布局容器属性包括:

flex-direction: 定义主轴的方向,决定flex容器中的子元素的排列方式

flex-wrap:设置子元素是否换行

flex-flow:是flex-direction和flex-wrap的简写形式,用于设置容器的排列方式和是否换行

justify-content:定义主轴上的子元素的排列方式

align-items:定义侧轴上的子元素的排列方式

align-content:当容器中的行为发生换行时,定义侧轴上多行子元素的排列方式

Q2:ES6的新功能

1.块级作用域:ES6引入了let和const关键字,可以在块级作用域中声明变量。使用let声明变量只在当前作用域内有效,避免了变量提升和全局命名冲突的问题。而使用const声明的常量是一个只读变量,一旦被赋值,就不能再改变。

2.箭头函数:箭头函数式ES6中的一种新的函数声明方式,使用箭头(=>)取代了传统的funtion关键字,箭头函数具有更简洁的语法,并且自动绑定立刻上下文,解决了毁掉含税中this指向问题。

3.解构赋值:解构赋值是一种从数组或对象中提取并赋值给变量的语法。在ES6中,可以使用解构赋值语法快速获取数组或对象中的元素,简化了代码编写和数据交换。

4.默认参数:ES6引入了函数的默认参数,允许在函数定义时为参数提供默认值。如果调用未传递参数,将使用默认值。这样可以简化函数的使用,并且可以传递部分参数,而不是全部参数。

5.扩展运算符:扩展运算符可以将数组或对象展开,提取出其中的元素。在函数调用或数组和对象字面量中,使用...语法可以将数组或对象展开成独立的元素,或将多个元素合并成数组对象。

6.模板字符串:模版字符串时一种更方便的字符串拼接方式,使用反引号(')定义字符串,并可以在其中插入比那辆和表达式,提高了代码的可读性和可维护性。

7.类和模块:ES6引入了类的语法糖,使得面向对象编程更加简洁和易用。类可以通过extends关键字实现继承,使用super关键字调用父类的方法。此外,ES6还引入了模块化的概念,通过import和export关键字可以方便地导入和导出模块。

8.迭代器和生成器:ES6中引入了迭代器和生成器的概念,可以简化处理集合和异步变成的复杂度。迭代器是一个包含next()方法的对象,可以按照定义的顺序诸葛返回值,而生成器是一种特殊的函数,可以通过field关键字将状态保存下来,并在需要的时候恢复执行

9.Promise对象:Promise是异步变成的额一种解决方案,可以避免回调地狱和提供更好的错误处理。Promise对象可以表示一个异步操作的最终完成或失败,并能够链式调用和处理多个异步操作。

10.模块化导入和导出:ES6中模块化语法可以更好地组织和管理代码,提供了import和export关键字,以及export default关键字来导入和导出模块。

Q3:promise的运行顺序

主任务 > 微任务(then()、catch()) > 宏任务(setTimeout、requestAnimationFrame)

当我们new 一个Promise时,传入的回调函数为同步代码,会立即执行,而.then() .catch()里面的为异步微任务

Q4: forEach包裹asnyc函数和async for in 循环体里await的运行顺序

javascript 复制代码
//forEach + async/await的例子
function example1() {
    let promises = [
        Promise.resolve(1),
        Promise.resolve(2),
        Promise.resolve(3),
    ]
    promises.forEach(async (promise) => {
        let result = await promise;
        console.log(result)
    })
    console.log(4)
    console.log(5)
}
example1();

答:4 5 1 2 3 content loaded

先执行console.log(4),这是因为JavaScript的异步处理机制。在你的代码中,forEach循环中的每个Promise都被标记为async,这意味着它们将在后台运行,而主线程将继续执行后面的代码。因此console.log(4)和console.log(5)将首先执行。

当你在javascript中年使用async/await时,你实际上是在创建一个新的Promise。这个Promise在后台运行,而主线程继续执行其他代码。当Promise完成时,它的结果将被返回,但这可能发生在主线程已经执行了代码之后

所以在例子中,forEach循环中的Promise可能还在运行,而主线程已经执行了console.log(4)和console.log(5)。这就是为什么你看到4和5首先被打印出来,然后是1、2、3

Q5:普通函数和箭头函数的this指向

普通函数this指向:哪个对象调用的函数,函数的this就指向谁,否则指向全局,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this指向谁;

箭头函数this指向:指向最外层作用域中的this所指对象

那js的编译和c, c++的编译有什么区别

C++和JavaScript是两种不同类型的编程语言,它们的编译和执行过程有很大的不同。C++需要再编译期间将源代码编译成机器指令,生成可执行文件后才能在特定操作系统上运行。而Javascript则是在解释器中逐步解析和执行源代码。在执行速度、调试难易程度、跨平台支持等方面,C++和Javascript都有各自的优缺点。

Q6:变量提升和暂时性死区的相关概念

变量提升:ES6明确规定,如果区块存在let和const命令,那么就会星程封闭作用域。凡是在声明之前使用这些变量,就会报错。也就是说let、const声明的变量,不会存在变量提升,而var会

暂时性死区:当程序的控制流程在新的作用域进行实例化时,在此作用域中的let/const声明的变量,会现在作用域中创建出来,但此时还未在语法环境中进行注册(没有语法绑定),则此时是不能被访问的,访问就会报错。

从创建变量到可以被访问这一瞬间,叫做暂时性死区

Q7:说一下你了解的http状态码,401和 403的区别

401错误同城与身份验证问题相关,而403错误则与权限相关

Q8: http的缓存机制,cache-control 的nostore和 nocache的区别

Http的缓存机制旨在提高Web性能和减少带宽使用,主要通过在客户端或代理服务器中存储相应数据来实现,以便后续请求中复用这些数据。Http缓存可以分为两类:强缓存和协商缓存。
no-store:彻底禁用缓冲,所有内容都不会被缓存到缓存或临时文件中

no-cache:在浏览器使用缓存前,会往返对比ETag,如果ETag没变,返回304,则使用缓存;使用no-cache的目的就是为了防止从缓存中获取过期的资源

相关推荐
如若12319 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript