前端面试题学习笔记-- 持续更新

HTML5

1、HTML5的新特性

• 语义化标签，比如header、footer、nav、aside、article、section
• 音视频，比如audio、video
• 画布canvas、矢量图svg
• 画布，canvas 的api 有 getContext 、fillStyle、fillRect 等
• web worder

2、语义化的好处

• 1.代码分块清晰
• 2.页面结构清晰，便于浏览器。搜索引擎解析
• 3.便于搜索引擎爬取，利于SEO

3、canvas 的常用api 有哪些

• getContext：返回一个指定的canvas的绘画环境对象
• beginPfath：开始绘制
• moveTo：移动画笔位置
• lineTo：用来画线段
• stroke：用来实时绘制的操作
• lineStyle：设置线段的样式
• closePath：结束绘制

4、web worker有什么作用？应用场景有哪些？

开启一个子线程，且子线程的操作不受线程的影响

• 大数据处理
• 好费时间较长的操作

5、浏览器本地缓存localStoreage 与 sessionStorage的区别

• 生命周期不同：前者一直在浏览器中，除非用户手动清除，后者生命周期结束于浏览器或者tab页关闭

CSS3

1、有哪些新特性

flex、animation、transform、border-radius、box-shadow、opacity

2、背景毛玻璃如何实现

filter：blur()

3、position有哪几种

• static：默认
• relative：相对于自身
• absolute：相对于最近的一个非static的祖先级元素进行定位
• fixed：相对于屏幕窗口进行定位
• sticky：用来实现吸顶效果

4、flex 布局如何更改主轴方向

设置flex-direction样式属性

5、flex 布局实现水平垂直居中

设置 justify-content 和 align-items 都为 center

6、flex 布局如何允许换行

设置 flex-wrap 样式属性

7、flex：1 的原理是什么

flex-grow、flex-shrink、flex-basis 这三个样式的合集

flex-grow:1 flex-shrink:1 flex-basis:0%

8、rem与em的区别是什么

• rem：相对于 标签的font-size去决定大小
• em：相对于自身的font-size 去决定大小，自身没有font-size 则继承祖先级元素的font-size

javaScript

1、原型链是什么？有什么作用吗

• 原型链：原型链是一条对象隐式原型不断往上指向一条指向链，尽头是Object的隐式原链，也就是null
• 作用：构造函数原型上的东西可以让实例们共享，从而节省了空间

2、闭包是什么？有什么优缺点

闭包是一个能让函数外部访问到函数内部变量的一个函数

• 优点是：延长函数内部变量的寿命，使函数外部能够访问到函数内部
• 缺点是：滥用闭包会导致内存溢出，页面卡顿

3、JavaScript总共有几种数据类型

String、Boolean、Number、undefined、null、object、symbol、bigInt

4、javaScript判断类型的方式是什么？

• typeof：只能判断字符串、布尔值、数值、undefined、function、object、symbol、bigInt，不能区别数组，null，对象

• A instanceof B：判断A 是否为B 的实例对象，从而判断A是否为B类型

• Object.prototype.toString.call()：可以判断所有的数据类型

  • 使用方法

5、JavaScript不同类型的存储方式有何区别

普遍认为

• 基础数据类型存于栈内存
• 引用数据类型存于堆内存

我认为

• 所有数据都存于堆内容，栈内存只存指针

6、你说字符串存储在栈内存，那如果字符串很长。超过了栈内容最大容量呢？

所以我觉得所有数据内存都存于堆内存，毕竟栈内存容量有限

call、apply、bind的基本语法

• call 可以调用函数，call 可以改变函数中this的指向

  • 第一个的参数为this的指向，往后的参数为传给函数的参数

  • // 例如
    dog.eat.call(cat,"鱼","肉")
    // cat 表示中的 this 指向dog，后面两个是传给dog中eat的值
    

• apply可以调用函数，call 可以改变函数中this的指向

  • // 区别是传参的不同,apply 后面传的是一个数组
    dog.eat.apply(cat,["鱼","肉"])
    

• bind不立即可以调用函数，call 可以改变函数中this的指向

  • // 传参的方法跟call一样，不同的是 bind 不会立即调用函数，而是会返回一个函数
    // 用法
    let fun = dog.eat.bind(cat,"鱼","肉")
    fun()
    

7、call、apply、bind的区别

• call 与 apply 的区别在于传参，前者直接传参，后者传一个数组
• bind 传参后不立即执行，而是会返回一个函数，这个函数可以继续传参，且执行（bind函数可以分为两次传参）

8、 bind 返回的函数能作为构造函数吗？

不能，会报错的

9、赋值、浅拷贝和深拷贝有什么不同

• 赋值：赋值指针指向，还是用的同一个内存空间
• 浅拷贝：只拷贝第一层（对象）
  • 例如 A 拷贝 B，A会开辟一个新的空间，但是B深层的内容是引用A的
• 深拷贝：所有层都会进行拷贝（对象）
  • 例如 A 拷贝 B， A 与 B是完全分隔开来，互不影响

javaScript的运行机制

同步和异步

异步：

1. 计数器(setTimeout, setInterval)
2. ajax
3. 读取文件 fs

• js 中同步程序执行完 才执行异步程序

  • console.log(1);
    setTimeout(()=>{console.log(2),0})
    setTimeout(()=>{console.log(3),0})
    setTimeout(()=>{console.log(4),0})
    console.log(5);
    // 输出的结果为：1 5 2 3 4 
    

单线程

js 是单线程的，要执行完一个任务之后才能执行另外一个

// 例子
for(let i = 0;i<2000;i++){
    console.log(1)
}
setTimeout(()=>{console.log(2),0})
setTimeout(()=>{console.log(3),0})
setTimeout(()=>{console.log(4),0})
console.log(5);
// 执行结果： 1...(此处省略2000个1) 5 2 3 4

事件循环

js执行顺序

1. 同步

2. nextTick

   setImmediate(()=>{
       console.log(1)
   })
   

3. 异步

4. setImmediate( 当前事件循环结束后执行 )

   process,nextTick(()=>{
       console.log(2)
   })
   

// 先执行运行栈里面的任务（同步），再执行任务队列里面的任务（异步）
// 事件循环会一直循环检查队列中是否有任务，有任务就执行
// 以setTimeout为例，等运行栈任务执行完之后， 计时器到点了就把任务放入任务队列中执行

综上例子

setImmediate(()=>{
    console.log(1)
})
process.nextTick(()=>{
    console.log(2)
})
console.log(3)
setTimeout(()=>{console.log(4)},0)
setTimeout(()=>{console.log(5)},1000)
setTimeout(()=>{console.log(6)},0)
console.log(7)

// 结果为3 7 2 4 6 1 5

宏任务和微任务

• 宏任务：计时器、Ajax、读取文件
• 微任务：promise.then

执行顺序：

1. 同步顺序
2. process.nextTick
3. 微任务( promise.then )
4. 宏任务（计时器、Ajax、读取文件） 可以看成异步？
5. setImmediate

setImmediate(()=>{
    console.log(1)
})
console.log(2)
setTimeout(()=>{console.log(3)},0)
setTimeout(()=>{console.log(4)},1000)
console,log(5)
new Promise((resolve)=>{
    console.log(6) // 这里的是同步任务，then里面的才是微任务
    resolve
}).then(()=>{
    console.log(7)
})
process.nextTick(()=>{
    console.log(8)
})

// 结果为：2 5 6 8 7 3 1 4

promise async

async 函数的返回值是 promise 对象

async function fun(){
    return 1
}
fun().then(data => {
    console.log(data)
})
// 打印为1
// async 函数等值于如下
function fun(){
    return new Promise(reslove => {
        resolve(1)
    })
}

await + promise对象 可以直接拿到 resolve的值

let p1 = new Promise((resolve) => {
    resolve(1)
})
let p2 = new Promise((resolve) => {
    resolve(2)
})
async function fun(){
    let a = await p1;
    let b = await p2;
    console.log(a);
    console.log(b)
}
fun()

顺序题

console.log(1);
async function async1(){
    await async2()
    console.log(2); // 可以看成 then 中执行的代码
}
async function async2(){
    console.log(3);
}
async1()
setTimeout(function(){
    console.log(4);
},0)
new Promise(resolve =>{
    console.log(5);
    resolve()
}).then(function(){
    console.log(6);
}).then(function(){
    console.log(7);
})
console.log(8)
// 结果为 1,3,5,8,2,6,7，4

对象属性的表述，可枚举，可配置，可重写

• configurable：true 属性是否可以删除
• enumerate：true 属性是否可枚举
• value：“小明” 属性值
• writable：true 属性是否可以修改

const student = {
    name:"小明",
    age:12,
    [Symbol("level")]:"优秀",
    [Symbol("level")]:"有钱",
}
const val = Object.getOwnPropertyDescriptor(student,"name") // 通过此方法，可以查看对象的描述信息（如下图）

// 该方法可以用来设置对象的描述信息
Object.defineProperty(student,"gender",{
	configurable:true,  // 属性是否可以删除
    enumerable:true,  // 属性是否可枚举
    value:"男",  // 属性值
    writable:true // 属性是否可以修改
})

delete student.gender // 可以用来删除student中gender的属性

闭包

闭包的概念：函数嵌套函数，内部函数就是闭包