前端基础（之二）

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的运行顺序

//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就指向谁）

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