本文总结了JavaScript基础语法、操作符、数据类型、函数声明及变量概念，着重讲解了Vue中数组操作、状态管理Vuex、路由守卫等关键知识点，适合初学者系统学习或高手查漏补缺。
文章为个人整合的笔记，并无商业用途(我在叠垃圾堆很多都是废话或者纯小白看的 勿喷)
点进来之后你的噩梦就要来了，接下来是我从业以来整理的一些基础与难点(多数来源于阅读文章与实践中遇到的问题)，如果你
- 是个小白：
推荐使用2~3周的时间来消化接下来的内容，
遇到不会的没听说过名词请立刻去搜；
文章中只是简答，如果想要详细了解的话还需要你自觉去搜索 - 如果你是个大神：
好叭先给您拜个早年
请温柔点黑我。
顺便，如果有错误的地方请各位一定要指出，免得误导更多人，如果我的文章存在侵权等行为请联系我删除。
学习理念：这一点非常重要在学习任何一门技术时都是有知识串联性的，比如要学习websocket要学习TCP IP等知识，但是要学习TCP IP等知识又要学习网络安全等知识，所以说不要为了学某样技术而埋头深究，技术是从0到1的金字塔只有做好底层建设才能越走越高，这也是当下培训等的弊端
JS
基础语法操作符等
**JS数据类型分为基本数据类型与引用数据类型**--
基本数据类型有:
Number - String - Boolean - Null - Undefined - Symbol（ES6新增数据类型） - bigInt
引用数据类型统称为Object细分有:
Object - Array - Date - Function - RegExp
基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，在栈中保存数据的引用地址，这个引用地址指向的是对应的数据，以便快速查找到堆内存中的对象，如果不清楚什么是栈内存、堆内存下文会有介绍
操作符
typeof操作符
JavaScript中的操作符可以分为以下几类：
### 算术操作符
1. `+`：加法
2. `-`：减法
3. `*`：乘法
4. `/`：除法
5. `%`：取模（求余数）
6. `**`：幂运算
7. `++`：自增
8. `--`：自减
### 比较操作符
1. `==`：等于
2. `!=`：不等于
3. `===`：严格等于（值和类型都相等）
4. `!==`：严格不等于（值或类型不相等）
5. `<`：小于
6. `>`：大于
7. `<=`：小于等于
8. `>=`：大于等于
### 逻辑操作符
1. `&&`：逻辑与
2. `||`：逻辑或
3. `!`：逻辑非
### 位操作符
1. `&`：按位与
2. `|`：按位或
3. `^`：按位异或
4. `~`：按位取反
5. `<<`：左移
6. `>>`：右移
7. `>>>`：无符号右移
### 赋值操作符
1. `=`：简单赋值
2. `+=`：加法赋值
3. `-=`：减法赋值
4. `*=`：乘法赋值
5. `/=`：除法赋值
6. `%=`：取模赋值
7. `**=`：幂赋值
8. `&=`：按位与赋值
9. `|=`：按位或赋值
10. `^=`：按位异或赋值
11. `<<=`：左移赋值
12. `>>=`：右移赋值
13. `>>>=`：无符号右移赋值
### 条件（三元）操作符
`condition ? exprIfTrue : exprIfFalse`
### 括号操作符
`()`：用于改变表达式的优先级
### 其他操作符
1. `typeof`：返回操作数的数据类型
2. `instanceof`：检查一个对象是否是特定构造函数的实例
3. `in`：检查对象是否包含某个属性
4. `delete`：删除对象的属性
5. `void`：返回undefined
6. `new`：创建一个新对象
7. `this`：指向当前执行上下文的对象
8. `?.`：可选链操作符，用于安全地访问嵌套属性
9. `??`：空值合并操作符，用于提供默认值
这些操作符在JavaScript编程中非常常用，掌握它们对于编写高效、准确的代码至关重要。
三元运算符在执行时首先对条件表达式进行求值如果为true执行语句1并返回结果，如果为folse执行语句二返回结果，如果表达式的求值结果是非布尔值将其转换为布尔值然后进行运算运算符优先级 可通过（）来提升优先级
// 示例 1
const age = 18;
const canVote = age >= 18 ? "Yes, you can vote" : "No, you cannot vote";
console.log(canVote); // 输出 "Yes, you can vote"
// 示例 2：数学表达式
const result = 2 * (3 + 4); // 先计算括号内的表达式，然后进行乘法运算
console.log(result); // 输出 14
for循环
for循环 for( i = 0 ; i <10 ; i++){
alert(i)
}
首先定义初始值，然后设置条件，执行语句i 返回新值 i++
使用函数声明来创建一个函数:语法
function 名（[形参1，形参n]）{
语句
}
形参:是指形式上的参数，没有初始值
实参：是指实际上的值
实参赋值给形参：如果出现多余的实惨则不会赋值，如果出现少实惨的情况则会nan
什么是变量？
变量是那些会变化的东西（就这么简单），变量有一个值，我们能改变这个值。我们先声明一个变量名，然后对这个变量赋值，就创建了一个变量。变量分按作用域（这个很重要后面会讲到）为全局变量和局部变量。本质：变量是程序在内存中申请的一块用来存放数据的空间
什么是函数？
我们最初学习的是通过函数声明来创建一个函数，即首先是 function 关键字，然后是函数的名字，这就是指定函数名的方式。另一个方式叫做函数表达式，函数内可以读取函数外的变量，而函数外却读取不了函数内部的变量（局部变量）
数组进行扁平化
多维数组进行扁平化可使用fkat()方法
数组方法
pop 删除数组元素中的最后一个元素可多选 语法 aa.pop（'123'）
unshift 在数组最前面添加添加一个或多个元素 语法 aa.unshift （'123'）
shift 删除数组元素中的第一个元素可多选 语法 aa.shift（'123'）
使用for循环遍历数组：
语法: var arr = ["孙悟空","猪八戒"，“玉兔精”];
for(var i=0; i<arr.length; i++){
colog(arr[i]);
}
slice()
可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数: 1.截取开始的位置的索引 2.截取结束的位置的索引
var result = arr.slice(1,2); 截取arr中的第二个和第三个字段
push 在数组尾部添加一个或多个元素 语法 aa.push('123')
splice()
可以用于删除数组中的指定元素
使用splice（）会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
参数： 第一个表示开始位置的索引 第二个表示删除的数量 第三个参数以及以后 可以传递新元素可以插入到开始元素前面
语法: var result = arr.splice(0,1,"牛魔王") 删中arr中的第第一个元素删除一天，并天元素牛魔王
concat（）
可以连接两个或多个数组，并将新的得数组返回 ，该方法不会对原数组产生影响
语法 var result = arr.concat(arr2，arr3，"大帅比");
将数组arr2 arr3 元素大帅比 添加到 arr中
join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
在join（）中可以指定一个字符串作为参数，这个字符串会成为数组元素的连接符
如果不指定，默认为，
语法： var result =arr.json(“”)
reverse()
该方法用来翻转数组（前面的到后面去，后面的到前面去）该方法会直接修改原数组
语法 arr.reverse();
sort
可以用来对数组的元素进行排序
也会影响原数组，默认按照unicode编码排序
arr.sort（）
即使对于纯数字的数组，使用sort（）排序时，也会按照unicode来排序
所以对数字进行排序时，可能会得到错误结果
我们自己指定排序规则
arguments
在调用函数时，浏览器每次都会传递两个隐含的参数
函数的上下文对象this
封装实惨的对象arguments
arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
我们即使不定义形参，也可以通过arguments来使用实参
只不过比较麻烦
arguments【0】 表示第一个实参
它里面有一个属性叫做callee
这个属性对应一个函数对象，就是当前正在指向函数的对象
语法: 获取实参的长度 获取实参的属性值
function fun（）{ function fun（） {
clog(arguments.length) clog（arguments[0]）
} }
Math
.ceil() 可以对一个数进行向上取整，小数位只要有值就会自动进1
.foor 可以对一个数进行向下取整。小数部分会被割掉
.round 可以对一个数进行四舍五入
.random 可以用来生成0-1之间的随机数
.max 取最大值
min 取最小值
forEach() 需要一个函数作为参数
像这种函数，由我们创建不是由我们调用，我们成为回调函数
会遍历数组里所有的元素
以实参形式传入，
浏览器在回调函数中传递三个参数
第一个参数，就是当前正在遍历的元素
第二个参数，就是正在遍历的元素索引
第三个参数，就是正在遍历的数组
arr.forEach(function(value,index,obj){
clog(value)
})
字符串的方法
JS字符串截取
1.通过单一字符将字符串切割成多字符
var data= "外面在下雨，天气真冷，你现在到哪里了呀，我们待会一起吃饭吧。";
var str = data.split(',');
结果：
str[0] =外面在下雨
str[1] =天气真冷
str[2] =你现在到哪里了呀
str[3] =我们待会一起吃饭吧。
2.通过多字符将字符串切割成多字符串
var data= "外面在下雨，天气真冷，你现在到哪里了呀，我们待会一起吃饭吧。";
var str = data.split(/在,/);
结果：
str[0] =外面
str[1] =下雨
str[2] =天气真冷
str[3] =你现
str[4] =到哪里了呀
str[5] =我们待会一起吃饭吧。
charAt() 返回指定索引位置的字符
concat() 接两个或多个字符串，返回连接后的字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置，可以有两个参数，指定开始查找的位置，从前往后找
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置，从后往前找
slie（）可以从字符串中截取指定的内容，不会影响原数组，会返回
参数：第一个 开始位置 第二个结束的位置
split 可以截取字符串拆分为一个数组
toLowerCase() 把字符串转换为小写
正则表达式
[]里面的内容也是或的关系
[a-z]任意小写字母 [A-z]任意字母
^ 除了 如 [^AB] 找除了AB以外的东西
修饰符：
i 执行对大小写不进行区分
g 进行全局匹配（正常查找所有是在找到第一个停止）
m 执行多行匹配
表达式：
abc] 查找方括号之间的任何字符。[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符:
\d 查找数字 \s 查找空白字符。
量词:
n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
RegExp 对象
RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法。方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec() 方法是一个正则表达式方法。exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
Switch…case语句
在执行时依次将case后的值和swich的后条件表达式进行比较，进行全等操作如果为true开始进行代码如果为false则往下执行，break关键字跳出程序·，如果结果都为false则执行default后的语句
使用案例
const age = 18;
switch (true) {
case age < 12:
console.log("You are a child");
break;
case age < 18:
console.log("You are a teenager");
break;
case age >= 18 && age < 65:
console.log("You are an adult");
break;
default:
console.log("You are a senior");
}
作用域：
作用域是指一个变量的作用域范围
全局作用域在页面打开时创建，在页面关闭时销毁
在全局作用域中只有一个全局对象window
他代表是一个浏览器的窗口，他由浏览器创造可以直接使用
在全局作用域中：
创建的变量会作为window对象的属性保存
创建的函数都会为window对象的方法保存
在全局作用域的变量都是全局变量
在页面任何部分都可以访问到
this:
解析器在调用函数每次都会向内部传递一个隐含的参数
这个隐含的参数this ， this指向的是一个对象
这个对象称为方式的不同， this会指向不同的对象
1. 以函数的形式调用是， this 永远都为window
2. 以方法调用时，this就是永远都是调用方法那个对象
什么是原型链
在学习原型链之前,先了解三个基本概念:***构造函数,实例对象,原型对象***
构造函数
构造函数也是一个函数,只不过它比普通函数多一个功能,使用new关键字调用时能创建对象.
// 构造函数示例
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person("Alice", 30);
console.log(person1); // 输出：{ name: 'Alice', age: 30 }
// 普通函数示例
function add(a, b) {
return a + b;
}
const result = add(2, 3);
console.log(result); // 输出：5
在这个示例中，我们创建了一个构造函数 Person 来创建具有 name 和 age 属性的对象。然后，我们创建了一个普通函数 add 来执行两个数字的加法运算。
在实际编程中，请根据需求选择使用构造函数还是普通函数。构造函数用于创建具有特定属性和方法的对象，而普通函数用于执行特定任务并返回结果。
实例对象
实例对象（Instance Object）是通过构造函数创建的具有特定属性和方法的对象。实例对象是构造函数的一个实例，它继承了构造函数的原型对象（Prototype Object）上的属性和方法。
以下是实例对象的一些关键特性：
实例对象具有构造函数原型对象上的属性和方法。
实例对象可以访问和修改自己的属性，也可以访问和调用从构造函数原型对象继承的属性和方法。
实例对象可以扩展自己的属性和方法，而不影响构造函数原型对象上的属性和方法。
以下是一个使用构造函数创建实例对象的示例：
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在构造函数的原型对象上添加方法
Person.prototype.sayHello = function () {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 使用构造函数创建实例对象
const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);
// 访问实例对象的属性
console.log(person1.name); // 输出：Alice
console.log(person2.age); // 输出：25
// 调用实例对象从构造函数原型对象继承的方法
person1.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.
在这个示例中，我们创建了一个名为 Person 的构造函数，用于创建具有 name 和 age 属性的对象。然后，我们在 Person 的原型对象上添加了一个名为 sayHello 的方法。接下来，我们使用 new 关键字创建了两个实例对象 person1 和 person2。我们可以访问这些实例对象的属性，也可以调用从构造函数原型对象继承的方法。
总之，实例对象是通过构造函数创建的具有特定属性和方法的对象。实例对象可以访问和修改自己的属性，也可以访问和调用从构造函数原型对象继承的属性和方法。在实际编程中，请确保正确使用构造函数和实例对象以实现面向对象编程。
原型对象：
我们所创建的每一个函数，解析器都会向函数添加一个属性protottype
这个属性对应着一个对象，这个对象就是我们的原型对象
如果函数作为普通的prototype没有任何作用
当函数以构造的形式调用时，它创建的对象中都会有一个隐含的属性
指向该构造函数的原型对象，我们可以通过 --proto--来访问
语法:
比如我要查看 mc的原型 clog （mc.--proto--); 看mc原型的原型 clog （mc.--proto--.--proto--);
指向该构造函数的原型对象，我们可以通过--proto--来访问该属性
原型对就相当于一个公共区域，所有的同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中
当我们访问对象一个属性方法是，他会先在对象自身中寻找，如果有则直接使用
如果没有则回去原型中寻找，如果找到直接用
创建构造函数中将对象共有的属性和方法统一添加到构造函数的原型对象中
这样不用分别为每一个对象添加，也不会影响到全局作用域
语法：
var mc = new Myclass(); 在mc中添加实例Myclass
myclass.prototype.a = 123； 向myclass中的原型对象添加属性a值是23
in 使用in 可以检测对象中是否有该属性 如果原型对象中有也返回true
语法： clog （“name” in mc）检查mc中是否拥有name属性
hasOwnProperty（） 使用该方法来检查对象中自身中是否含有该属性
使用方法中只有当前对象中含有属性时才会返回true
语法： clog （ma.hasOwnProperty (“age”)）检查ma中是否拥有age属性
原型对象也