1、JS数组中搜索是否存在某一个元素
const arr = [1,2,3];
console.log('数组中存在2：', arr.includes(2)); // true，includes：存在就返回true，不存在就返回false
console.log('数组中存在2：', (arr.indexOf(2) >= 0)); // true，indexOf：从数组第0个位置开始，查找数组中第一个出现该元素的位置，存在就返回该元素在数据中的索引下标，不存在就返回-1
console.log('数组中存在22：', arr.includes(22)); // false，includes：存在就返回true，不存在就返回false
console.log('数组中存在22：', (arr.indexOf(22) >= 0)); // false，indexOf：从数组第0个位置开始，查找数组中第一个出现该元素的位置，存在就返回该元素在数据中的索引下标，不存在就返回-1
// 执行结果：
数组中存在2： true
数组中存在2： true
数组中存在22： false
数组中存在22： false
2、JS数组去重
（1）、利用ES6中的Set对象去重
const arr = [1,2,2,3,3,4,4];
const arr2 = [...new Set(arr)]; // 使用ES6的Set对象对数组进行去重，再使用拓展运算符将结果转化成数组
const arr3 = Array.from(new Set(arr)); // 使用Array.from将结果转化为数组
console.log("使用ES6的Set对象对数组进行去重，再使用拓展运算符将结果转化成数组:", arr2);
console.log("使用ES6的Set对象对数组进行去重，再使用Array.from将结果转化为数组", arr3);
// 执行结果：
使用ES6的Set对象对数组进行去重，再使用拓展运算符将结果转化成数组: (4) [1, 2, 3, 4]
使用ES6的Set对象对数组进行去重，再使用Array.from将结果转化为数组 (4) [1, 2, 3, 4]
（2）、利用filter+indexOf函数去重
const arr = [1,2,2,3,3,4,4];
const arr3 = arr.filter((item, index) => arr.indexOf(item, 0) === index); // 使用filter进行过滤，利用indexOf从当前数据第0个元素开始查找，判断该元素是否第一次出现，如果是，那么就判断是否等于当前索引下标。
console.log("利用filter+indexOf函数去重:", arr3);
// 执行结果：
利用filter+indexOf函数去重: (4) [1, 2, 3, 4]
3、JS数组合并
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = arr1.concat(arr2);
const arr4 = [...arr1, ...arr2];
console.log("使用concat函数合并：", arr3);
console.log("使用拓展运算符合并：", arr4);
// 执行结果：
使用concat函数合并： (6) [1, 2, 3, 4, 5, 6]
使用拓展运算符合并： (6) [1, 2, 3, 4, 5, 6]
4、JS数组使用map函数对数据进行属性改动
const map = {
"Name": "lala", "Sex": "男", "Phone": "1101110110", "Salary": 100};
const list = [map];
console.log("处理前数据：" , list);
list.map(data => {
data.Name = "拉拉";
data.AnnualSalary = 12 * data.Salary;
});// map函数会处理改动原来数据中的元素，最终返回结果还是一个数组
console.log("处理后数据：" , list);
// 执行结果：
处理前数据： [{
…}]0: {
Name: 'lala', Sex: '男', Phone: '1101110110', Salary: 100, AnnualSalary: 1200}length: 1[[Prototype]]: Array(0)
处理后数据： [{
…}]0: {
Name: '拉拉', Sex: '男', Phone: '1101110110', Salary: 100, AnnualSalary: 1200}length: 1[[Prototype]]: Array(0)
5、JS可以通过不同的方式来输出数据
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
6、JS中常用的语句
6.1、根据ID获取标签
// 根据标签ID处理标签内容
document.getElementById("pp").innerHTML = "你好";
6.2、根据标签Tag获取标签
// 根据标签tag处理标签,得到的是一个数组
document.getElementsByTagName("p")[1].innerHTML = "你说";
6.3、异常处理
// 异常处理
try {
console.info("开始执行try块语句 ---> ")
console.info("还没有发生例外 ---> ")
throw new Error("发生意外了");
} catch(err) {
console.error("捕捉到例外，开始执行catch块语句 --->");
console.error("错误名称: " + err.name+" ---> ");
console.error("错误信息: " + err.message+" ---> ");
} finally {
console.info("开始执行finally块语句")
}
6.4、switch语句
let x = "";
const d = new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
console.log(x);
// 执行结果：
今天是星期一
6.5、循环语句
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
const arr = [1, 2, 3];
// fori循环
for (let i = 0; i < arr.length; i++) {
console.log("fori循环：", arr[i]);
}
// 数组的forin循环
for (index in arr) {
console.log("数组的forin循环：", arr[index]);
}
const person = {
"name": "lala", "age": 12};
// map或者object的forin循环
for (key in person) {
console.log("map或者object的forin循环", key, ":", person[key]);
}
let i = 0;
// while循环
while (i < arr.length) {
console.log("while循环：", arr[i]);
i++;
}
let i1 = 0;
// dowhile循环
do {
console.log("dowhile循环：", arr[i1]);
i1++;
} while (i1 < arr.length);
// forEach循环
arr.forEach((item, index) => console.log("forEach循环：", item));
// 执行结果：
fori循环： 1
fori循环： 2
fori循环： 3
数组的forin循环： 1
数组的forin循环： 2
数组的forin循环： 3
map或者object的forin循环 name : lala
map或者object的forin循环 age : 12
while循环： 1
while循环： 2
while循环： 3
dowhile循环： 1
dowhile循环： 2
dowhile循环： 3
forEach循环： 1
forEach循环： 2
forEach循环： 3
7、JS将数据输出为字符串
const arr = ["Hello","Word","!"];
console.log("原数组内容：", arr);
console.log("使用join函数合并数组之后：", arr.join(""));
// 执行结果：
原数组内容： (3) ['Hello', 'Word', '!']
使用join函数合并数组之后： HelloWord!
8、JS测试接口调用性能
// console.time开启并运行一个计时器：XXX接口调用花费时间
console.time("XXX接口调用花费时间");
// 中间业务逻辑，模拟XXX接口调用
console.log("XXX接口调用成功");
XXX接口调用成功
// 接口调用成功后，打印接口调用耗时
console.timeLog("XXX接口调用花费时间");
XXX接口调用花费时间: 64269.987060546875 ms
// 最后关闭计时器
console.timeEnd("XXX接口调用花费时间");
XXX接口调用花费时间: 85647.34912109375 ms
9、JS中数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
const a = "a";
const a1 = new String("a");
const b = 1;
const b1 = new Number(1);
const c;
const d = true;
const d1 = new Boolean(true);
console.log("a的数据类型为：", typeof(a), " a的值为：", a);
console.log("a1的数据类型为：", typeof(a1), " a1的值为：", a1);
console.log("b的数据类型为：", typeof(b), " b1的值为：", b);
console.log("b1的数据类型为：", typeof(b1), " b1的值为：", b1);
console.log("c的数据类型为：", typeof(c));
console.log("d的数据类型为：", typeof(d), " d1的值为：", d);
console.log("d1的数据类型为：", typeof(d1), " d1的值为：", d1);
// 执行结果：
a的数据类型为： string a的值为： a
a1的数据类型为： object a1的值为： String {
'a'}
b的数据类型为： number b1的值为： 1
b1的数据类型为： object b1的值为： Number {
1}
d的数据类型为： boolean d1的值为： true
d1的数据类型为： object d1的值为： Boolean {
true}
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
const u = new Date();
const v = new RegExp(".");
const x = {
};
const x1 = new Map();
const y = [];
const y1 = new Array();
const z = null;
const z1 = new Object();
console.log("u的数据类型为：", typeof(u));
console.log("v的数据类型为：", typeof(v));
console.log("x的数据类型为：", typeof(x));
console.log("x1的数据类型为：", typeof(x1));
console.log("y的数据类型为：", typeof(y));
console.log("y1的数据类型为：", typeof(y1));
console.log("z的数据类型为：", typeof(z));
console.log("z1的数据类型为：", typeof(z1));
// 执行结果：
u的数据类型为： object
v的数据类型为： object
x的数据类型为： object
x1的数据类型为： object
y的数据类型为： object
y1的数据类型为： object
z的数据类型为： object
z1的数据类型为： object
10、JS中对象的属性
const person = {
"name": "lala", "age": 12};
person.sex = "男";
const person1 = new Object();
person1.sex = "男";
console.log("person的name属性：", person.name);
console.log("person的name属性：", person["name"]);
console.log("person的sex属性：", person.sex);
console.log("person的sex属性：", person["sex"]);
console.log("person1的sex属性：", person1.sex);
console.log("person1的sex属性：", person1["sex"]);
// 执行结果
person的name属性： lala
person的name属性： lala
person的sex属性： 男
person的sex属性： 男
person1的sex属性： 男
person1的sex属性： 男
11、JS中方法
function sum (a, b) {
// 有参数函数
return a + b; // 带有返回值
}
const result = sum(1, 2);
console.log("调用函数sum返回结果：", result);
// 执行结果：
调用函数sum返回结果： 3
12、JS作用域
局部变量只作用于函数内，不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
const b = "全局变量";
function variable () {
const a = "局部变量";
const b = "variable全局变量";
return a.concat(b);
}
function variable1 () {
const a = "局部变量";
const b = "variable1全局变量";
return a.concat(b);
}
console.log("b为全局变量，可以在函数内部调用：", variable());
console.log("b为全局变量，可以在函数内部调用：", variable1());
console.log("b为全局变量，可以在外部调用：", b);
console.log("window为全局变量，外部调用任何时候都可以使用，但是window对象没有定义a属性：", window.a);
console.log("a为局部变量，无法在外部调用：", a);
// 执行结果：
b为全局变量，可以在函数内部调用： 局部变量variable全局变量
b为全局变量，可以在函数内部调用： 局部变量variable1全局变量
b为全局变量，可以在外部调用： 全局变量
window为全局变量，外部调用任何时候都可以使用，但是window对象没有定义a属性： undefined
a为局部变量，无法在外部调用： a
13、null和undefined的区别
13.1、定义
（1）undefined：是所有没有赋值变量的默认值，自动赋值。
（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
13.2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
13.3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a; // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = [‘ss’,‘nn’];
emps = null; // 释放指向数组的引用
13.4、垃圾回收站
它是专门释放对象内存的一个程序。
（1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
（2）总有一个对象不再被任何变量引用时，才释放。
14、JS变量提升
JS变量也需要遵循先声明后使用的规定，虽然JS中会存在变量提升的情况，也就是可以先使用后申明。
// 声明的变量才会被提升
x = 55;
console.log(x);
var x;
// 执行结果
x在使用之后申明：55
// 初始化的变量不会被提升
var x = 55;
console.log("x1在之后声明并初始化，不会被提升：", x , x1);
var x1 = 77;
// 执行结果：
x1在之后声明并初始化，不会被提升：55 undefined
var x = 55;
var x1;
console.log("x1在使用之后才初始化，不会被提升：", x , x1);
x1 = 77;
// 执行结果：
x1在之后声明并初始化，不会被提升：55 undefined
15、JS this 关键字
面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
(1)、 在方法中，this 表示该方法所属的对象。
(2)、 如果单独使用，this 表示全局对象。
(3)、 在函数中，this 表示全局对象。
(4)、 在函数中，在严格模式下，this 是未定义的(undefined)。
(5)、 在事件中，this 表示接收事件的元素。
(6)、 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
16、var、let、const的区别
（1）、作用域：var定义的变量在块作用域之外可以使用，let和const定义的变量在块作用域之外不可以使用
{
var a = 1; // 块作用域之外可以使用
let b = 2; // 块作用域之外不可以使用
const c = 3;// 块作用域之外不可以使用
}
// 在块作用域之外使用
console.log("块作用域之外可以使用：", a);
console.log("块作用域之外不可以使用，报错b未定义：", b);
console.log("块作用域之外不可以使用，报错c未定义：", c);
// 执行结果：
块作用域之外可以使用： 1
caught ReferenceError: b is not defined
caught ReferenceError: c is not defined
（2）、可改变性：var和let定义的变量可以再次改变值，onst定义的变量不可以再次改变值，再次改变值会报错。
var a = 1;
let b = 2;
const c = 3;
a = 11;
b = 22;
c = 33; // 报错：TypeError: Assignment to constant variable.
console.log("var定义的变量可以再次改变值：", a);
console.log("let定义的变量可以再次改变值：", b);
console.log("const定义的变量不可以再次改变值，再次改变值会报错", c);
// 执行结果：
var定义的变量可以再次改变值： 11
let定义的变量可以再次改变值： 22
const定义的变量不可以再次改变值，再次改变值会报错 3
（3）、变量提升：var定义的变量是有变量提升的，而let和const没有
console.log("var有变量提升作用，相当于在执行这句之前，声明了a：(var a;)：", a);
console.log("let,const没有变量提升作用，相当于在执行这句之前，没有b的定义和初始化，会报错：ReferenceError: Cannot access 'b' before initialization：",b,c);
var a = 11;
let b = 22;
const c = 33;
// 执行结果：
var有变量提升作用，相当于在执行这句之前，声明了a：(var a;)：undefined
ReferenceError: Cannot access 'b' before initialization
17、JS类
// JS类
class B {
constructor(b) {
this.b = b;
}
get sya() {
console.log("这是B类的方法");
}
// 静态方法
static hello() {
console.log("这是B类的静态方法");
}
}
// 类的继承
class A extends B {
constructor(a) {
super(a);
this.a = a;
}
// setter方法
set setA(x) {
this.a = x;
}
// getter方法
get getA() {
return this.a;
}
}
// 调用
let a = new A("初始化值");
console.log("get方法：", a.getA);
a.setA = "set方法设置值";
console.log("get方法：", a.getA);
a.sya;
B.hello();
// 执行结果：
get方法：初始化值
get方法：set方法设置值
18、window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.confirm("确认要退出吗？");
confirm("确认要退出吗？");
window.alert("确认要退出吗？");
alert("确认要退出吗？");
window.document.getElementById("header");
document.getElementById("header");
// 整个窗口的宽度和高度
var w=window.innerWidth
document.documentElement.clientWidth
document.body.clientWidth;
var h=window.innerHeight
document.documentElement.clientHeight
document.body.clientHeight;
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
19、JS计时器：执行异步任务
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。setTimeout() - 在指定的毫秒数后执行指定代码。
let timeout = setTimeout(() => console.log(Math.random()), 10000);
clearTimeout(timeout); // 清除计时器
let interval = setInterval(() => console.log(Math.random()), 1000);
clearInterval(interval); // 清除计时器
20、JS中的Promise对象：优雅的执行异步任务
Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。
Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。
起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。
Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：
（1）、then：用于处理 Promise 成功状态的回调函数。
（2）、catch：用于处理 Promise 失败状态的回调函数。
（3）、finally：无论 Promise 是成功还是失败，都会执行的回调函数。
const flag = true;
let promise = new Promise((resolve, reject) => {
if (flag) {
resolve("成功了");
} else {
reject("失败了");
}
});
promise
.then((result) => {
console.log(result);
return "返回结果到下一阶段使用。";
})
.then((result) => {
throw result + ": 这不是我想要的结果";
})
.catch((error) => console.log(error))
.finally(() => console.log("最后执行finally逻辑"));
// 执行结果：
成功了
返回结果到下一阶段使用。: 这不是我想要的结果
最后执行finally逻辑
21、JS事件
