前端学习笔记

===，==的区别

=== 称为等同符，当符号两边的值为相同类型时，直接比较等号两边的值，值相同则返回true；若等号两边的值类型不同时直接返回false。既要判断值，也要判断类型是否相等。

==称为等值符，当等号两边的值为相同类型时，比较值是否相等，类型不同时会发生类型的自动转换，转换为相同类型后再做比较，即只要值相等返回true

MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。MVVM源自于经典的MVC（Model-View-Controller）模式。

数据和视图不能直接通信，只能通过ViewModel来通信，ViewModel定义了一个Observer观察者。ViewModel是连接View和Model的中间件。
MVVM的核心是ViewModel层，该层向上与视图层进行双向数据绑定。向下与Model层通过接口请求进行数据交互。

1. ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
2. ViewModel能够监听到视图的变化，并能够通知数据发生变化。

Vue.js是一个MVVM的实现者，核心为DOM监听与数据绑定。
使用MVVM的原因：

1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
2. 可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。
3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
4. 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

webpack

前端项目工程化的具体解决方案

提供友好的前端模块化开发支持，代码压缩混淆，处理浏览器js的兼容性，性能优化

webpack是一个打包工具，前端半自动化开发工具。它是基于nodejs运行的，它的功能有：压缩代码，压缩图片，解析es6,解析sass语法，代码热更新等。

webpack构成部分？
答：入口，出口，插件，装载机loader，本地服务devServer

webpack的使用步骤：
安装npm i webpack@5.42.1 webpack-cli@4.7.2 -D
1、在项目根目录中，创建webpack.config.js的webpack配置文件
初始化以下基本配置：

module.exports = {
    mode: 'development'
}

2、在package.json的scripts节点下，新增dev脚本

"scripts": {
    "dev": "webpack"
  }

3、在终端运行npm run dev命令，启动动webpack进行项目的打包构建
终端提示

change-row-color@1.0.0 dev
webpack

typeof的返回值

Undefined undefined
Null object
Boolean boolean
Number number
BigInt bigint
String string
Symbol symbol
Function function
其他任何对象 object

typeof(null)返回值为object
typeof(undefined)返回值为undefined

同步和异步

内容参考：https://zhuanlan.zhihu.com/p/67452727
同步
优点是：同步是按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面的代码
缺点：是解析的速度没有异步的快；

异步
优点：异步是接取一个任务，直接给后台，在接下一个任务，一直一直这样，谁的先读取完先执行谁的
缺点：没有顺序 ，谁先读取完先执行谁的 ，会出现上面的代码还没出来下面的就已经出来了，会报错；
采用异步时就会出现运输的代码结果顺序不是按照代码的上下顺序

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

JavaScript的类型

6 种不同的数据类型：
string
number
boolean
object
function
symbol
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

数据验证

大多数情况下，数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象[object Window]。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

显式函数绑定

var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:“John”,
lastName: “Doe”,
}
person1.fullName.call(person2); // 返回 “John Doe”

箭头函数与普通函数的区别

内容参照：https://blog.csdn.net/qq_39903567/article/details/115208019
1.箭头函数不会创建自己的this
2.箭头函数继承而来的this指向永远不变（重要）
3.call()、apply()、bind()无法改变箭头函数中this的指向
4.箭头函数不绑定arguments,取而代之用rest参数…解决
5.不能使用new操作符(作为构造函数使用)
6.不能使用原型属性
7.不能简单返回对象字面量
8.箭头函数不能换行

call()和apply()

内容参照：https://blog.csdn.net/qq_21397815/article/details/90482341
相同点：call和apply 都是用来修改函数中this的指向问题

不同点：不同的传参方式。call方法可以传给该函数的参数分别作为自己的多个参数，而apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数。
通过 call 和 apply 来this的指向时，不传任何参数，则默认为将this指向修改为 windows
有参数时，this 指向第一个参数
当需要传递参数时，call可以直接写多个参数，apply需要用数组方式传递

console.log(person.sayHobby.call(person1, 'swimming', 'hiking')); 
console.log(person.sayHobby.apply(person1, ['swimming', 'hiking']));