大厂基础面试题(之二)

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的目的就是为了防止从缓存中获取过期的资源

相关推荐
Martin -Tang20 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发21 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端