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