2024年Web前端最新【面试必备】 【ES6】学Vue前必须掌握的内容（上(1)，如何成为一个更好的前端开发者

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

console.log(name,age) ->打印报错 未声明
//同名的可以将name:name省略成name
let {age,name}=obj;
console.log(name,age) -> ‘hua’ 18

### **③ 字符串解构**


     此时字符串被转换成一个类似于数组的对象。

let str=‘hello World’;
let [a,b,c]=str;
console.log(a,b,c,typeof(a)) -> h e l string

## 


## 扩展


### ① 函数的扩展 ⭐


#### **res参数（剩余参数）**


 用于获取函数的多余参数，会将多余的实参放进一个数组里。

function fn(a,…arr){
console.log(a); -> 1
console.log(arr); -> [‘a’, ‘b’]
console.log(arr[0]); -> a
console.log(arr[2]); -> undefined
}
fn(1,‘a’,‘b’);//方法中的定义了4个参数，但调用函数时只使用了3个参数，ES6 中并不会报错。

注意，res参数之后不能再有任何参数。函数的length属性（指明函数形参的个数）不包括res参数

(function(a){}).length //1
(function(…a){}).length //0

#### 严格模式


规定只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能显示设定为严格模式，会报错。

function fn(a,b=1){ //报错
‘use strict’;
}

 两种方式可以避免这种限制：


* 设定全局性的严格模式；
* 把函数包在一个无参数的立即执行函数里。


#### name属性


具名函数返回函数原本的名字，匿名函数返回实际的函数名

function fn(){}
let fun=function(){}
fn.name //fn
fun.name //fun （ES5中返回空字符串）

#### 箭头函数 ( 参数 ) => { 函数体 }


*注意要点：*


* 不会创建自己的this，只会从自己的作用域链的上一层继承this；⭐
* 不能作为构造的实例化对象，即不能用new；
* 不能使用argument函数内置对象；
* 当只有一个参数时，小括号可以省略；
* 当函数体只有一条语句且为return，可以省略return和大括号；
* 不能使用yield命令，因此不能作为Generator函数。


由于箭头函数this指向的特殊性，箭头函数不适用于定义对象的方法，且该方法内部包括this。

s = 21;
const obj = {
s: 42,
f: () => console.log(this.s)//继承作用域的上一层的this，指向全局
};
obj.f() // 21

### ② 数组的扩展 ⭐


#### Array.from()


可将类似数组的对象和可遍历的对象（包括新增的数据结构Set、Map）



> 
> 伪数组：有索引，有长度，但是没有方法
> 
> 
> 

let arrayLike={
‘0’:‘a’,
‘1’:‘b’,
‘2’:‘c’,
length:3
};
const arr=Array.from(arryLike);
console.log(arr); //[‘a’,‘b’,‘c’]
//length:2->[‘a’,‘b’] length:4->[‘a’,‘b’,‘c’,undefined]

实际应用开中，我们常见的伪数组就是DOM操作中返回的元素对象集合，以及函数的内置arguments对象。都能用Array.from()方法将伪数组转为真正的数组。

let arrayLike=document.querySelectorAll(‘button’);
let a=document.getElementsByTagName(‘button’);
console.log(arrayLike,a);//NodeList(5) HtmlCollection(5)
const arr=Array.from(arrayLike);
console.log(arr);//(5)

> 
> ⭐补充一下，DOM操作中三种方式返回的伪数组类型有些不同：
> 
> 
> * querySelectorAll()：NodeList类型，获取子节点操作中的childNodes属于该类型。即返回的集合中包含元素节点和文本节点（文字、空格）等；
> * getElementsBytagName()和getElementsByClassName()返回的是HtmlCollection类型，获取子节点操作中的children就属于该类型.即返回的集合中只有元素节点。
> 
> 
> 


#### Array.of()


将一组值转换为数组。

console.log(Array.of(1,2,3)); //[1,2,3]
console.log(Array.of(1,2,3).length); //3

 Array.of() 返回由参数组成的数组，如果没有参数就返回一个空数组。这就弥补了数组构造函数中参数个数不同导致行为有差异的问题。

//没有参数时,一致
Array() //[]
Array.of() //[]
//一个参数时，一个是长度，一个是值
Array(2) //[empty × 2] length:2
Array.of(2) //[2]
//多个参数时，一致
Array(1,2) //[1,2]
Array.of(1,2) //[1,2]

### ③ 对象的扩展 ⭐


#### **Object.defineProperty**



> 
>  Object.defineProperty(obj, prop, descriptor) 定义新属性或修改原有的属性
> 
> 
> 

let obj={
name:‘hua’,
age:18
}
console.log(obj); //{name: ‘hua’, age: 18}
/* 传统方式
obj.sex=‘man’;
obj.age=19; */
Object.defineProperty(obj,‘sex’,{
value:‘man’
});
Object.defineProperty(obj,‘age’,{
value:19
});
console.log(obj); //{name: ‘hua’, age: 19, sex: ‘man’}

 **第三个参数，以对象的形式书写**


* value: 设置属性的值，默认为undefined；
* writable: 值是否可以重写，当属性是由该方法新创建的时候，默认值为false；

 

console.log(obj); //{name: ‘hua’, age: 18}
Object.defineProperty(obj,‘sex’,{
value:‘man’,
writable:true, //当属性是由该方法新创建的时候，默认值才为false
});
Object.defineProperty(obj,‘sex’,{
value:1
});
Object.defineProperty(obj,‘age’,{
value:20,
writable:false
});
console.log(obj); //{name: ‘hua’, age: 20, sex: 1}
obj.sex=0;
obj.age=30;
console.log(obj); //{name: ‘hua’, age: 20, sex: 0}

* enumerable: 目标属性是否可以被枚举，当属性是由该方法新创建的时候，默认值为false；

 

console.log(Object.keys(obj)); //[‘name’, ‘age’]
Object.defineProperty(obj,‘sex’,{
value:‘man’,
enumerable: true
});
console.log(Object.keys(obj)); //[‘name’, ‘age’, ‘sex’]
Object.defineProperty(obj,‘age’,{
enumerable:false
});
console.log(Object.keys(obj)); //[‘name’, ‘sex’]

* configurable: 目标属性是否可以被删除或再次修改特性，当属性是由该方法新创建的时候，默认值为false。

 

Object.defineProperty(obj,‘sex’,{
value:‘man’,
configurable:true
});
console.log(obj); //{name: ‘hua’, age: 18, sex: ‘man’}
delete obj.sex;
console.log(obj); //{name: ‘hua’, age: 18}
delete obj.name;
Object.defineProperty(obj,‘age’,{
configurable:false
});
delete obj.age;
console.log(obj); //{age: 18}

Object.defineProperty(obj,‘sex’,{
value:‘man’,
configurable:false
});
Object.defineProperty(obj,‘sex’,{
value:1,
writable:true
});
console.log(obj); //Error:Cannot redefine property: sex

#### Object.freeze



> 
>   Object.freeze()方法作用就是冻结一个对象，即让该对象无法修改。可以提升性能
> 
> 
> 

const a=1;
//a=2; //报错
const obj={b:2};
obj.b=3;
console.log(obj.b); //3

我们都知道，用const声明基本数据类型是无法进行修改的，但声明的对象的属性是可以修改的，因为赋给的变量里存的是该对象的地址。这时就可以使用Object.freeze()方法来冻结。


 被冻结后的对象：


* 不能添加新属性；
* 不能修改、删除原有的属性；
* 不能修改原型；
* 不能修改已有属性的可写性writable、可枚举性enumerable和可配置性configurable。

let obj={
name:‘hua’,
age:18
}
console.log(obj); //{name: ‘hua’, age: 18}
Object.freeze(obj);
obj.sex=‘man’;
obj.age=19;
console.log(obj); //{name: ‘hua’, age: 18}
console.log(Object.freeze(obj))//{name: ‘hua’, age: 18}

//该方法返回的就是传入的对象本身，所以一般不用接收返回值。也可以冻结数组，毕竟数组的本质也是对象。


注意，该方式属于浅冻结。当冻结的对象里还有对象时，内层的对象仍可以被修改

let obj={
name:‘hua’,
deep:{
age:18
}
};
Object.freeze(obj);
obj.name=123;
obj.deep.age=19;
console.log(obj.name,obj.deep); //hua {age:19}

 解决办法：封装一个深冻结函数，随时调用。

function deepFreeze(obj){
//获取所有属性
let proName=Object.getOwnPropertyNames(obj);
//遍历
proName.forEach(item=>{
let pro=obj[item];
//如果某个属性的属性值是对象，则递归调用
if(pro instanceof Object && pro!==null){
deepFreeze(pro);
}
})
return Object.freeze(obj);
}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Object && pro!==null){
deepFreeze(pro);
}
})
return Object.freeze(obj);
}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Lf3IIMvv-1714924705559)]