呕心沥血 JavaScript知识点梳理大全，超具体发起收藏！！！

显示全部楼层 · 2023-8-23 12:11:45

呕心沥血 JavaScript知识点梳理大全，超具体发起收藏！！！

✴️各人好,我是王同砚，爆肝三天三夜王同砚把JavaScript 知识点梳理了一遍，文章没有一点套路，只有满满的干货
✴️假如对你有资助就给我点个赞吧，如许我们就互不相欠了
✴️星光不负赶路人，全部的荣幸都来自于坚固不拔的积极，各人一起冲冲冲~~~

一、语法和变量

（一）、前端三层

（二）、JS的誊写位置

（三）、输出语句

（四）、变量声明提升

变量的声明提升：你可以提前使用一个稍后才声明的变量，而不会引发非常
在执行全部代码前，JS有预分析阶段，会预读全部变量的定义

二、根本数据范例

（一）、JavaScript中两大类数据范例

（二）、typeof运算符

typeof运算符可以检测值大概变量的范例

（三）、五种根本数据范例的typeof检测结果

（四）、数字范例

全部数字不分巨细、不分整浮、不分正负、都是数字范例

较大数大概较小数（绝对值较小）可以写成科学计数法

（五）、不同进制的数字

（六）、一个特别的数字型值NaN

NaN是英语“not a number” 的意思，即不是一个数字，但它是一个数字范例的值

（七）、字符串范例

字符串就是人类的自然语言
字符串要用引号包裹，双引号大概单引号都可以

（八）、字符串的拼接

加号可以拼接多个字符串

（九）、字符串和变量的拼接

空字符串

一些时间必要用到空字符串，直接誊写闭合的引号对即可

字符串的length属性

字符串的length属性表现字符串的长度

（十）、字符串常用的方法

（十一）、charAt（）方法

作用：得到指定位置的字符

（十二）、substring（）方法

（十三）、substr()方法

（十四）、slice()方法

（十五）、三者对比总结

（十六）、toUpperCase()和toLowerCase()

(十七）、indexOf（）

（十八）、BOOlean（布尔范例）

（十九）、Undefined

一个没有被赋值的变量的默认值是undefined，而undefined的范例也是undefined，即undefined又是值，又是一种范例，这种范例只有它本身一个值

变量提升的情况

在变量声明提升时，变量的值也是undefined

（二十）、null范例

null对象表现是空，它是空对象
当我们必要将对象烧毁，数组烧毁大概删除变乱监听时，通常将他们设置为空

（二十一）、数据范例的转换

使用Number（）函数

使用parseInt（）函数

使用parseFloat（）函数

（二十二）、复杂数据范例简介

3
true
NaN
Infinity

复制代码

bcd
bc
''
bc

复制代码

（二十三）、表达式和运算符

表达式的种类

算术、关系、逻辑、赋值、综合
（二十四）、算术运算符

默认情况下，乘除法的优先级要高于加法和减法，须要时可以使用圆括号来改变运算的次序

加号的两种作用

取余运算（求模运算）

取余运算也叫求模运算，用百分号来表现
a%b表现 a除以b的余数，它不关心整数部分，只关心余数

（二十五）、隐式范例转换

假如参加运算的某操纵数不是数字型，那么JavaScript会自动将此操纵符转换为数字

隐式转换的本质就是内部调用Number（）函数

办理办法：在进行小数运算的时间，要调用数字的toFixed ()方法保留指定的小数位

(二十六）、幂和开根号

JavaScript中没有提供幂计算，开根号的运算符，必要使用Math对象相干的方法进行计算

（二十七）、向上取整和向下取整

（二十八）、关系表达式

（二十九）、判定是否相等

（三十）、相等和全等

（三十一）、NaN不自等

怎样判定某变量的值为NaN?

isNaN（）函数可以用来判定变量的值是否为NaN
但isNaN()也不好用，它的机理是：只要该变量传入Number（）的执行结果是NaN，则isNaN（）函数都会得到true

不相等和不全等

JS中没有连比

判定变量 a是不是介于3到15之间，应该怎么写呢？

（三十二）、非运算

置反运算的结果肯定是布尔值

（三十三）、与运算

（三十四）、或运算

（三十五）、短路计算

（三十六）、逻辑运算的次序

（三十七）、赋值运算符

（三十八）、快捷运算符

快捷运算符表如今原数组基础上进一步进行运算

（三十九）、自增和自减运算符

（四十）、综合表达式

综合表达式的运算次序：非运算—数学运算—关系运算—逻辑运算

变量的范围表现

知识回首

函数
（一）、函数的定义和调用

（二）、函数的调用

执行函数体中的全部语句，就称为函数调用
调用函数十分简朴，只必要在函数名字后面誊写圆括号对即可

（三）、语句的执行次序

（四）、函数声明的提升

和变量声明提升类似，函数声明也可以被提升

函数的表达式是不能被提升的，假如函数是用函数表达式的写法定义的，则没有提升的特性

（五）、函数的优先提升

<script>
//首先函数会优先提升
//变量的定义后提升后提升并不会把先提升的覆盖掉
//变量提升只会先提升定义不会提升值
fun();
var fun = function() {
alert('A');
}
function fun() {
alert('B')
}
fun();
</script>

复制代码

（六）、函数的参数

参数是函数内的一些特定的值，在调用函数时，必须传入这些参数的具体的值
函数的参数有多有少，函数可以没有参数，也可以有多个参数，多个参数之间要用逗号隔开

（七）、arguments

<script>
function fun() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
console.log('所有的参数之和为：' + sum); //110
}
fun(33, 22, 55)
</script>

复制代码

（八）、函数的返回值

函数体内可以使用return关键字表现“函数的返回值”

//函数的功能是返回两个参数的和
function sum(a, b) {
return a + b;
}
var result = sum(3, 4);
console.log(result);

复制代码

（九）、函数的返回值

调用一个有返回值的函数，可以被当做一个平常值，从而可以出如今任何可以誊写的地方

（十）、遇见return即退出函数

调用函数时，一旦遇见return语句则会立即退出函数，将执行权交还给调用者

1
A
B
2

复制代码

团结if语句往往不必要写else分支了

<script>
//书写一个函数函数的功能是判断一个数字是否是偶数
function checkEven(n) {
if (n % 2 == 0) return true;
return false;
}
var result = checkEven(7);
console.log(result); //false
</script>

复制代码

函数像一个小工厂

（十一）、练习题

<script>
//计算一个数字的阶乘
function factorial(n) {
//累乘器
var result = 1;
for (var i = 1; i <= n; i++) {
result *= i;
}
return result;
}
//穷举法
for (var i = 100; i <= 999; i++) {
// 把数字i变为字符串
var i_str = i.toString();
var a = Number(i_str[0]);
var b = Number(i_str[1]);
var c = Number(i_str[2]);
// 根据喇叭花数来判断
if (factorial(a) + factorial(b) + factorial(c) == i) {
console.log(i);//145
}
}
</script>

复制代码

（十二）、JavaScript内置的sort（）方法

这个函数中的a、b分别表现数组中靠前和靠后的项，假如必要将他们交换位置，则返回正数，否则就返回负数

<script>
var arr = [3, 5, 6, 1, 2];
arr.sort(function(a, b) {
return a - b;
})
console.log(arr);
var arr = [99, 55, 66, 77];
arr.sort(function(a, b) {
return b - a;
})
console.log(arr);
</script>

复制代码

（十三）、什么是递归？

函数的内部语句可以调用这个函数自身，从而发起对函数的一次迭代。
在新的迭代中，又会执行调用函数自身的语句，从而又产生一次迭代，当函数执行到某一次时，不再进行新的迭代，函数被一层一层返回，函数被递归递
归是一种较为高级的编程本领，它把一个大型复杂的标题层层转化为一个与原标题相似的规模较小的标题来求解。

<script>
//书写一个函数函数会自己调用自己从而形成递归
//函数的功能就是计算某个阶乘 n的阶乘就是n*(n-1)的阶乘
function factorial(n) {
//递归的出口如果计算1的阶乘，可以不用递归了直接告诉你答案1
if (n == 1) return 1;
//如果询问的不是1的阶乘就返回n*(n-1)!
return n * factorial(n - 1);
}
var result = factorial(6);
console.log(result); //720
</script>

复制代码

递归的要素

界限条件：确定递归到何时终止，也称为递归出口
递归模式：大标题是怎样分解为小标题的，也称为递归体

递归的常见算法题

<script>
// 编写一个函数这个函数的功能就是返回斐波那契数列中下标为n的那项的值
function fib(n) {
//出口数列的小标为0和下标为1的项的值都是1
if (n == 0 || n == 1) return 1;
// 斐波那契数列的本质特征就是每一项都等于前面两项的和
return fib(n - 1) + fib(n - 2);
}
//书写一个循环语句计算斐波那契数列的前15项
for (var i = 0; i < 15; i++) {
console.log(fib(i));
}
</script>

复制代码

（十四）、实现深克隆

<script>
//原数组
var arr1 = [33, 44, 11, 22, [77, 88],
[11, 999]
];
//结果数组 "每一个都有一个结果"
var result = [];
//函数这个函数会被递归
function deepClone(arr) {
//遍历数组的每一项
for (var i = 0; i < arr.length; i++) {
//类型判断如果遍历到的项是数组
if (Array.isArray(arr[i])) {
//递归
result.push(deepClone(arr[i]));
} else {
//如果遍历到的项不是数组，是基本类型，就直接推入到结果数组中
//相当于是递归的出口
result.push(arr[i])
}
}
//返回结果数组
return result;
}
//测试一下
var arr2 = deepClone(arr1);
console.log(arr2);
//是否藕断丝连
console.log(arr1[4] == arr2[4]);
arr1[4].push(99);
console.log(arr1)
console.log(arr2);
</script>

复制代码

怎样实现深克隆？

使用递归的头脑，团体思绪和浅克隆相似，但稍微进行一些改动，假如遍历到项是根本范例值，则直接推入结果数组，假如遍历到的项是又是数组，则重复执行浅克隆的操纵。
（十五）、浅克隆

<script>
//准备原数组
var arr1 = [33, 44, 55, 66, [99, 22], 111];
//准备一个结果数组
var result = [];
//遍历原数组
for (var i = 0; i < arr1.length; i++) {
result.push(arr1[i]);
}
//输出结果数组
console.log(result);
// 测试是否实现了克隆，就是说本质上是内存中的不同数组了
console.log(arr1 == result); // false
//测试这样的克隆是浅克隆“藕断丝连”
arr1[4].push(100);
console.log(result);
</script>

复制代码

（十六）、全局变量和局部变量

变量的作用域

JavaScript是函数级作用域编程语言：变量只在其定义时地点的function内部故意义

全局变量

假如不将函数定义在任何函数的内部，此时这个变量就是全局变量。它在任何函数内都可以被访问和更改

（十七）、掩藏效应

掩藏效应：假如函数中也定义了和全局同名的变量，则函数内的变量会将全局的变量掩藏

（十八）、考虑变量提升的情况

（十九）、形参也是局部变量

<script>
var a = 10;
function fun(a) {
a++;
console.log(a); //8
}
fun(7);
console.log(a); //10
</script>

复制代码

（二十）、作用域链

一个函数内部也可以定义一个函数，和局部变量相似，定义在一个函数内部的函数是局部函数

作用域链：在函数嵌套中，变量会从内到外逐层寻找他的定义

<script>
var a = 10;
var b = 20;
function fun() {
var c = 30;
function inner() {
var a = 40;
var d = 50;
console.log(a, b, c, d); //40 20 30 50
}
inner();
}
fun();
</script>

复制代码

不加var 将定义全局变量

在初次给变量赋值的时间，假如没有加var，则将定义全局变量

<script>
var a = 1;
var b = 2;
function fun() {
//字母c没有加var 关键字所以他为全局变量
c = 3;
var b = 4;
b++;
c++;
}
fun();
console.log(b); //2
//在函数的外部是可以访问变量c的
console.log(c); //4
</script>

复制代码

（二十一）、闭包

什么是闭包：闭包是函数本身和该函数声明时所处的情况状态的组合，函数可以大概“影象住”其定义所处的情况，纵然函数不在其定义的情况中被调用，也能访问定义时所处的情况变量

<script>
//创建一个函数
function fun() {
//定义局部变量
var name = '慕课网';
//返回一个局部函数
return function() {
alert(name)
}
}
//调用外部函数就能得到内部函数
var inner = fun();
//定义一个全局变量
var name = 'ABC';
//执行inn函数就相当于在 fun函数的外部执行了内部的函数
inner()
</script>

复制代码

观察闭包的现象

在JavaScript中，每次创建函数时都会创建闭包
但是，闭包往往必要将函数换一个地方执行，才能被观察出来
闭包的用途

影象性：当闭包产生时，函数所处坏境的状态会始终保持在内存中，不会在外层函数调用后自动扫除，这就是闭包的影象性

<script>
function createCheckTemp(standardTemp) {
function checkTemp(n) {
if (n <= standardTemp) {
alert("你的体温正常")
} else {
alert("你的体温偏高")
}
}
return checkTemp;
}
//创建一个 checkTemp函数，它以37.1为标准线
var checkTemp_A = createCheckTemp(37.1);
//创建一个 checkTemp函数，它以37.3为标准线
var checkTemp_B = createCheckTemp(37.3);
checkTemp_A(37.2);
checkTemp_B(37.2);
</script>

复制代码

闭包的用途—模拟私有变量

<script>
//封装一个变量这个函数的功能是私有化变量
function fun() {
// 定义一个局部变量 a
var a = 0;
return {
getA: function() {
return a;
},
add: function() {
a++;
},
pow: function() {
a *= 2;
}
}
}
var obj = fun();
//如果想在fun函数外面使用变量a唯一的办法就是调用getA() 方法
console.log(obj.getA());
//想让 a进行加一操作
obj.add();
console.log(obj.getA());
obj.pow();
console.log(obj.getA());
</script>

复制代码

使用闭包的注意点

不能滥用闭包，否则会造成网页的性能标题，严峻时大概会导致内存泄漏，所谓内存泄漏是指步调中已动态分配的内存由于某种缘故起因未开释大概无法开释

<script>
function addCount() {
var count = 0;
return function() {
count = count + 1;
console.log(count);
}
}
var fun1 = addCount();
var fun2 = addCount();
fun1(); //1
fun2(); //1
fun2(); //2
fun1(); //2
</script>

复制代码

（二十二）、IIFE

IIFE（Immediately Invoked Function Expression立即调用函数表达式）是一种特别的JavaScript函数写法，一旦被定义，就立即被调用

形成IIFE 的方法

函数不能直接加圆括号被调用

函数必须转为函数表达式才能被调用

IIFE的作用

为变量赋值：当给变量赋值必要一些较为复杂的计算的时间（如if语句）使用IIFE显得语法更紧凑

IIFE可以在一些场所（如for循环）将全局变量变为局部变量语法显得更紧凑

（四十一）、流程控制语句

if语句的根本使用

//要求输入三位数
var n = Number(prompt('请输入三位数'));
//对用户输入的值进行合法验证
if (!isNaN(n) && 100 <= n && n <= 999) {
var a = parseInt(n / 100);
var b = parseInt(n / 10) % 10;
var c = n % 10;
if (Math.pow(a, 3) + Math.pow(b, 3) + Math.pow(c, 3)) {
alert('是水仙花数');
}
} else {
alert('您输入的数字不合法')
}

复制代码

（四十二）、switch语句

switch语句的用途：当一个变量被分类讨论的情况

switch语句并不像if语句那样当执行了某个分支后会自动跳出if语句，我们必须自动调用break语句来跳出break语句体，假如不誊写break，则后面的全部case都将被视为匹配，直到遇见break

<script>
//让用户输入月份
var month = Number(prompt('请输入月份'));
//分类讨论
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert('这个月有31天');
break;
case 4:
case 6:
case 9:
case 11:
alert('这个月有28天');
break;
case 2:
alert('这个月有28天或者29天');
break;
default:
alert('你输入的月份有误')
}
</script>

复制代码

（四十三）、三元运算符

三元运算符的用途：根据某个条件是否成立，在两个不同值中选择变量的值

（四十四）、for循环

for循环语句的执行机理

正确遍历for循环

<script>
//sum是累加器初始值是0
for (var i = 1, sum = 0; i <= 100; i++) {
sum += i;
}
console.log(sum); //5050
</script>

复制代码

//穷举法
for (var i = 1; i < 100; i++) {
if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
console.log(i); //58
}
}

复制代码

（四十五）、while循环语句

while语句也是一种循环语句，是一种不定范围的循环，和for循环各有不同的用武之地，几乎全部的循环都同时提供for循环和while循环
while语句事先不指定循环的开始，竣事的范围，只要测试条件满足，就一直执行循环
while循环没有表现定义循环变量，必须本身在while循环外先定义好循环变量，偶然候以致没有循环变量
循环体内的语句，必须使循环测试条件趋向不成立，否则会死循环

var i = 1;
while (i <= 100) {
console.log(i);
i++;
}

复制代码

//寻找满足n的平方和大于456789的最小整数
//穷举法从1开始试验
var n = 1;
while (n * n < 456789) {
n++;
}
console.log(n); //676

复制代码

var n = 1;
var sum = 0;
while (sum < 500) {
sum += n;
n++;
}
//注意这里有个“出一错误”
console.log(n - 1); //32

复制代码

（四十六）、break和continue

break表现立即终止这个循环，他只能用在循环语句中，在for循环和while循环中都可以使用

continue用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代，for循环中经常使用continue

（四十七）、do while语句

<script>
//后判断的一种形式至少执行一次循环体
do {
console.log('★');
} while (false); //★
</script>

复制代码

var n = 1;
do {
console.log(n);
n++
} while (n <= 100);

复制代码

（四十八）、随机数函数

随机数函数得到0到1之间的小数

(四十九）、do while 小案例

<script>
do {
var dx = parseInt(Math.random() * 9) - 4;
var dy = parseInt(Math.random() * 9) - 4;
}
while (dx == 0 && dy == 0);
console.log(dx, dy);
</script>

复制代码

（五十）、猜数字小游戏

<script>
//随机一个数字2-99
var answer = parseInt(Math.random() * 98) + 2;
//此时范围的最大值和最小值这个数字是用来提示用户的
var min = 1;
var max = 100;
//不断的重复就用死循环
while (true) {
//询问用户猜测的数字
var n = Number(prompt('请猜猜数字' + min + '~' + max));
//验证用户输入的数字是否在范围内
if (n <= min || n >= max) {
alert('你输入的数字不在范围内')
//放弃这次循环，就开启下一次迭代
continue;
}
//判断用户输入的数字和answer的关系
if (n > answer) {
alert('你输入的数字太大了');
//因为用户输入的数字较大，所以可以让此时的最大范围的数字变为用户输入的值
max = n;
} else if (n < answer) {
alert('你输入的数字太小了')
//因为用户输入的数字较小，所以可以让此时的最小范围的数字变为用户输入的值
min = n;
} else {
alert('猜对了');
//结束死循环
break;
}
}
</script>

复制代码

（五十一）、什么是算法

算法是指解题方案的正确而完整的形貌，是一系列办理标题的清楚指令，算法代表着用系统的方法形貌办理标题的计谋机制，也就是说，可以大概对肯定规范的输入，在有限时间内得到所要求的输出
算法就是把一个标题，拆解为计算机可以大概一步一步执行的步调

精良算法的要求

正确性
结实性
可读性

（五十二）、伪代码

（五十三）、算法怎样培养

多敲、多练、多总结
经典的业务需求场景要熟记心间

（五十四）、累加器

//用户输入数字n
var n = Number(prompt('请输入数字'));
//累加器
var sum = 0;
//遍历分母
for (var i = 2; i <= n; i++) {
sum += (i + 1) / i
}
alert(sum.toFixed(2));

复制代码

（五十五）、累乘器

<script>
//计算阶乘
var n = Number(prompt('请输入数字'));
//累乘器从1开始如果要从0开始 0乘以任何数字都为0
var result = 1;
//倒着遍历计算阶乘
for (var i = n; i >= 1; i--) {
result *= i;
}
alert(result);
</script>

复制代码

（五十六）、穷举法

计算机最突出的本领就是计算，他没有归纳总结，推理逻辑的本领，所以人们使用计算机办理标题的时间，要扬长避短，充实发挥计算机的优势，而不要让他们进行逻辑推理，穷举法就是如许一种算法头脑。
什么是穷举法？

穷举法，顾名思义，是指根据标题标条件确定答案的大抵范围，并在此范围内对全部大概的情况逐一验证，直到全部的情况验证完毕，若某个情况符合标题标条件，则为本题的一个解，若全部情况验证后都不符合条件，则本题无解。

//穷举法
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0 && i % 5 == 0) {
console.log(i);
}
}

复制代码

//寻找约数
var n = Number(prompt('请输入数字：'));
//穷举法
for (var i = 1; i <= n; i++) {
if (n % i == 0) {
console.log(i);
}
}

复制代码

//寻找水仙花数
for (var i = 100; i < 1000; i++) {
var i_str = i.toString();
var a = i_str.charAt(0);
var b = i_str.charAt(1);
var c = i_str.charAt(2);
if (Math.pow(a, 3) + Math.pow(b, 3) + Math.pow(c, 3) == i) {
console.log(i);
}
}

复制代码

（二十三）、DOM简介

（二十四）、nodeType常用的属性

（二十五）、访问元素节点

所谓的访问元素节点就是指得到，获取页面上的元素节点
对节点进行任何的操纵，就是要得到节点，访问节点紧张依靠document对象
熟悉document对象

（二十六）、访问元素节点常用的方法

（二十七）、getElementById ()

假如页面上有雷同的id元素则只能得到第一个
不管元素藏得位置有多深，都能通过Id把它找到

延迟运行

（二十八）、getElementsByTagName（）

注意事项：

数组方便遍历，从而可以批量操控元素节点
纵然页面上只有一个指定标署名的节点，也得到长度为1的数组
任何一个节点元素也可以调用getElementsByTagName（）方法，从而得到内部的某种类的元素节点

（二十九）、getElementsByClassName（）

（三十）、querySelector（）

（三十一）、querySelectorAll（）

（三十一）、节点的关系

文本节点也属于节点
在尺度的W3C规范中，空白文本节点也应该算作节点，但是在IE8以及从前的节点中也会有肯定的兼容标题，他们不把空文本节点当做节点

（三十二）、节点的操纵

改变元素节点中的内容可以使用两个相干的属性

innerHTML属性可以大概以HTML语法设置节点中的内容
innerText属性只能以纯文本的形式设置节点中的内容

（三十三）、怎样改变元素节点的CSS样式

（三十四）、怎样改变元素节点的HTML属性

（三十五）、节点的创建

appendChild（）

insertBefore（）

<body>
<div id="box">
<p>我是原本的段落0</p>
<p>我是原本的段落1</p>
<p>我是原本的段落2</p>
</div>
<script>
var oBox = document.getElementById('box');
var oPs = oBox.getElementsByTagName('p');
//创建孤儿节点
var oP = document.createElement('p');
//设置内部文字
oP.innerHTML = '我是新来的'
//上树
//oBox.appendChild(oP);
oBox.insertBefore(oP, oPs[0])
</script>
</body>

复制代码

（三十六）、移动节点

（三十七）、删除节点

（三十八）、克隆节点

（三十九）、变乱监听

什么是变乱：用户与网页的交互动作
好比：当用户点击元素时，当鼠标移动到元素上时，当文本框的内容被改变时、当键盘在文本框中被按下时，当网页加载完毕时……
什么是变乱监听？

监听，顾名思义，就是让计算机可以大概发现这个变乱发生了，从而执行步调员预先编写的一些步调

<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var oBox = document.getElementById('box');
//给这个盒子添加点击事件监听
oBox.onclick = function() {
alert('你好，我是点击事件的函数');
}
</script>

复制代码

（四十）、常见的鼠标变乱监听

（四十一）、常见的键盘变乱

（四十二）、常见的表单变乱监听

（三十九）、变乱监听

什么是变乱：用户与网页的交互动作
好比：当用户点击元素时，当鼠标移动到元素上时，当文本框的内容被改变时、当键盘在文本框中被按下时，当网页加载完毕时……
什么是变乱监听？

监听，顾名思义，就是让计算机可以大概发现这个变乱发生了，从而执行步调员预先编写的一些步调

<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var oBox = document.getElementById('box');
//给这个盒子添加点击事件监听
oBox.onclick = function() {
alert('你好，我是点击事件的函数');
}
</script>

复制代码

（四十）、常见的鼠标变乱监听

（四十一）、常见的键盘变乱

（四十二）、常见的表单变乱监听

（四十五）、常见的页面监听变乱

（四十六）、变乱流传

<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
// box1.onclick = function() {
// alert('A');
// }
// box1.onclick = function() {
// alert('B '); //B
// }
box2.addEventListener("click", function() {
alert('C ');
}, false)
box2.addEventListener("click", function() {
alert('D '); //先C再D
}, false)
</script>

复制代码

（四十七）、变乱对象

变乱处理惩罚函数提供一个形式参数，它是一个对象，封装了本次变乱的细节，这个参数通常用单词event大概字母e来表现

（四十八）、鼠标位置

<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background-color: #333;
margin: 100px;
padding: 50px;
}
body {
height: 2000px;
}
#info {
font-size: 30px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="info">
</div>
<script>
var oBox = document.getElementById('box');
var oInfo = document.getElementById('info');
oBox.onmouseover = function(e) {
oInfo.innerHTML = 'offsetX / Y: ' +
e.offsetX + ',' + e.offsetY + '<br/>' + 'clientX/Y:' + e.clientX + ',' + e.clientY;
}
</script>

复制代码

（四十九）、字符码

键码

<script>
var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
// 书写循环语句批量添加监听
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
this.style.color = ' red';
}
}
</script>

复制代码

批量添加变乱监听的性能标题

每一个变乱监听注册都会消耗肯定的系统内存，而批量添加变乱会导致监听数量太多，内存消耗十分的大
现实上，每个li 的变乱处理惩罚函数都是不同的函数，这些函数本身也会占用内存
（五十）、变乱委托

使用变乱冒泡机制，将后代元素变乱委托给先人元素

<button id="btn">按我创建一个新列表项</button>
<ul id="list">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<script>
var oList = document.getElementById('list');
var oBtn = document.getElementById('btn')
oList.onclick = function(e) {
//e.target表示用户真正点击的那个元素
e.target.style.color = 'red';
// e.currentTarget表示整个列表项
// e.currentTarget.style.color = 'blue';
}
oBtn.onclick = function() {
//创建新的li元素
var oLi = document.createElement('li');
//写内容
oLi.innerText = ' 我是新来的';
//上树
oList.appendChild(oLi);
}
</script>

复制代码

（五十一）、定时器和延时器

函数的参数

具名函数也可以传入setInterval

什么是具名函数？什么是匿名函数？
具名函数，故名思意就是闻名字的函数，具名函数一般是我们定义的最多的一种

// 函数
function fn() {
console.log('我是具名函数')
console.log('看，我有名字')
console.log('我的名字叫 fn')
}
fn()
fn()

复制代码

匿名函数

没闻名字的函数，匿名函数我们也到处可见，我们来写几个匿名函数

setTimeout(function () {
console.log('我是匿名函数，我被用于定时器参数传递')
}, 1000)
let arr = [1, 2, 3]
arr.forEach(function (item) {
console.log('我是匿名函数，我被用于回调函数参数')
})
let box = document.querySelector('#box')
box.onclick = function () {
console.log('我是匿名函数，我被用于绑定事件')
}

复制代码

（五十二）、扫除定时器

<h1 id="info"></h1>
<button id="btn1">开始</button>
<button id="btn2">暂停</button>
<script>
var oInfo = document.getElementById('info')
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var a = 0;
//设置一个全局变量
var timer;
btn1.onclick = function() {
//为了防止定时器叠加我们应该在设置定时器之前清除定时器
clearInterval(timer)
//更改全局变量的值为一个定时器实体
timer = setInterval(function() {
oInfo.innerText = ++a;
}, 1000)
}
btn2.onclick = function() {
clearInterval(timer)
}
</script>

复制代码

延时器

<button id="btn1">2秒后弹出你好</button>
<button id="btn2">2秒后取消弹出</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var timer;
btn1.onclick = function() {
timer = setTimeout(function() {
alert('你好，世界！');
}, 2000)
}
btn2.onclick = function() {
clearInterval(timer);
}
</script>

复制代码

（五十三）、初识异步函数

（五十三）、什么是BOM？

Window对象是当前JS脚本运行所处的窗口，而这个窗口中包罗DOM对象，window. document属性就是document对象
在有标签页的欣赏器功能中，每个标签都拥有本身的window对象，也就是说，同一个窗口的标签页之间不会共享一个window对象

全局变量是window的属性

以上结果就意味着，多个JS文件之间是共享作用域的，即JS文件没有作用域隔离的功能

内置函数广泛是window的方法

（五十四）、窗口尺寸相干的属性

（五十五）、resize变乱

（五十六）、已卷动的高度

（五十七）、scroll变乱

（五十八）、Navigator对象

（五十九）、History对象

常用的操纵就是模拟欣赏器的回退按钮

（六十）、Location对象

重新加载当前页面

（六十一）、BOM特效开辟返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 5000px;
background-image: linear-gradient(to bottom, blue, green, yellow);
}
.backtotop {
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.6);
position: fixed;
bottom: 100px;
right: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="backtotop" id="backtotopbtn">返回顶部</div>
<script>
var backtotopbtn = document.getElementById("backtotopbtn");
var timer;
backtotopbtn.onclick = function() {
//设置表先关
clearInterval(timer);
//设置定时器
timer = setInterval(function() {
//让scrollTop不断减少
document.documentElement.scrollTop -= 80;
// 定时器停下来
if (document.documentElement.scrollTop <= 10) {
clearInterval(timer);
}
}, 20)
}
</script>
</body>
</html>

复制代码

面向对象

（六十二）、熟悉对象

对象是键值对的聚集，表现属性和值的映射关系

（六十三）、对象的语法

属性的访问

可以使用“点语法”访问对象中指定键的值

假如属性不符合JS标识符的定名规范，则必须使用方括号的写法来访问

假如属性名以变量的形式存储，则必须使用方括号的形式

属性的更改

直接使用赋值运算符重新对某属性赋值即可更改属性

属性的创建

假如对象本身没有某个属性值，则用点语法赋值时，这个属性就会被创建出来

属性的删除

假如要删除某个对象的属性，必要使用delete操纵符

（六十四）、对象的方法

假如某个属性值是函数，则它也被称为对象的方法
方法的调用：使用点语法可以调用对象的方法

方法和函数

方法和函数，只不外方法是对象的函数属性，它必要用对象办理调用
对象的遍历

和遍历数组类似，对象也可以被遍历，遍历对象必要使用for…in…循环，使用for…in循环必要可以遍历对象的某个键

（六十五）、根本范例和引用范例的值

对象是引用范例值

对象是引用范例的值，这就意味着：

<script>
var obj1 = {
a: 1,
b: 2,
c: [33, 44, {
m: 55,
n: 66,
p: [77, 88]
}]
};
//实现深克隆
function deepClone(o) {
//要判断o是对象还是数组
if (Array.isArray(o)) {
//数组
var result = [];
for (var i = 0; i < o.length; i++) {
result.push(deepClone(o[i]))
}
} else if (typeof o == "object") {
//对象
var result = {};
for (var k in o) {
//递归之后的原来的值
result[k] = deepClone(o[k]);
}
} else {
//基本类型值
var result = o;
}
return result;
}
var obj2 = deepClone(obj1);
console.log(obj2);
//看是否有藕断丝连的情况
//引用类型的值互不相等
console.log(obj1.c == obj2.c); //false
obj1.c.push(99);
console.log(obj2); //obj2不变因为没有藕断丝连的现象
obj1.c[2].p.push(99);
console.log(obj1);
</script>

复制代码

（六十六）、熟悉上下文

什么是上下文？

函数的上下文

函数中可以使用this关键字，它表现函数的上下文
与中文中的这类似，函数中的this具体指代什么必须通过调用函数时的媒介后语来判定

函数中的this

由以上可知，函数的上下文是由函数的调用方式来决定的，也就是说同一个函数，用不同的形式来调用它，则函数的上下文不同
以上两个例子：

情况一：对象办理调用函数，函数中的this指代这个办理的对象

情况二：圆括号直接调用函数，函数中的this指代的是window对象

来个案例

这个标题中这两个this指代的是啥：不知道！！由于函数只有被调用的时间它的上下文才能被确定，因此函数的上下文是不能被确定的。

输出3

复制代码

输出NaN

复制代码

规则1标题举例—第一小题

规则1标题举例—第二小题

规则1标题举例—第三小题

规则二

规则二：圆括号直接调用函数，则函数的上下文是window对象

规则二—第一题

规则二—第二题

上下文规则三

规则三：数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）

规则三—第一题

什么是类数组对象？

全部键名为自然数序列（从0开始），且有length属性的对象
arguments对象是最常见的类数组对象，它是函数的实参列表
规则三标题一

规则四

IIFE函数，上下文是window对象

规则五

规则五：定时器，延时器调用函数，上下文是window对象

输出结果：7

复制代码

上下文规则六

规则六：变乱处理惩罚函数的上下文是绑定变乱的DOM元素

练习小demo

（六十七）、call和apply可以大概指定函数的上下文

（六十八）、 call和apply的区别

到底使用call还是apply？

（六十九）、上下文规则总结

（七十）、用new操纵符调用函数

JS规定，使用new操纵符调用函数会进行四步走：

函数体内会自动创建出一个空白对象
函数的上下文（this）会指向这个对象
函数体内的语句会执行
函数会本身返回上下文对象，纵然函数没有return语句

（七十一）、构造函数

什么是构造函数？

用new调用一个函数，这个函数就被称为构造函数，任何函数都可以是构造函数，只必要用new调用它
顾名思义，构造函数用来构造新对象，它内部的语句将为新对象添加多少属性和方法，完成对象的初始化
构造函数必须使用new关键字调用，否则不能正常工作，因此，开辟者约定构造函数定名时首字母要大写

假如不消new调用构造函数

构造函数中的this不是函数本身

实验为对象添加方法

（七十二）、类与实例

构造函数和类

Java、C++等是“面向对象”（object-oriented）的语言
JavaScript是“基于对象（object-based）的语言”
JavaScript中的构造函数可以类比于OO语言中的类，写法简直类似，但和真正OO语言还是有本质的不同

（七十三）、prototype和原型链查找

什么是prototype？

任何函数都有prototype属性，prototype表现“原型”的意思
prototype属性值是一个对象，它默认拥有constructor属性指回函数

原型链查找

（七十四）、hasOwnProperty方法

（七十五）、in

in运算符只能查抄某个属性大概方法是否可以被对象访问，不能查抄是否是本身的属性大概方法

原型链的尽头

关于数组的原型链

（七十六）、继续

两个无关的类

People和Student的关系

People类拥有的属性和方法Student类都有，Student类还扩展了一些属性和方法
Student是一种People，两类之间是“is a kind of”关系
这就是继续关系，Student类继续People类
继续形貌了两个类之间的关系，好比门生是一种人，所以人类和门生之间就构成继续的关系
- People是“父类”（“超类”，“基类”）；Student是“子类”（大概派生类）

更多的继续关系举例

（七十七）、JavaScript中怎样实现继续

实现继续的关键在于：子类必须拥有父类的全下属性和方法，同时还应该能定义本身特有的属性和方法，使用特有的原型链特性来实现继续，是广泛的做法
通过原型链来实现继续

（七十八）、面向对象到底是什么

面向对象的本质：定义不同的类，让类的实例工作
面向对象的优点：步调编写更清楚，代码布局更加细密，使代码更结实易于维护
面向对象经常用到的场所，必要封装和复用性的场所（组件头脑）

（七十九）、包装类

包装类知识点总结

包装类的目的就是为了让根本范例值可以从他们的构造函数的prototype上得到方法
（八十）、Math对象的方法

（八十一）、Date（）日期对象

时间戳

时间戳表现1970年1月1日零点距离某时刻的毫秒数
通过getTime（）方法或则Date.parse()函数可以将日期对象变为时间戳
通过new Date（时间戳）的写法，可以将时间戳变为日期对象

（八十二）、正则表达式知识点总结

一、什么是正则表达式

正则表达式也称为规则表达式，就是平常字符和特别字符构成的一个表达式
作用就是用来检验字符串是否符合格式要求，大概在字符串中查找是否有符合格式要求的字符串。

二、怎样创建正则表达式

使用构造方法创建：var 正则表达式的名称=new RegExp('正则表达式内容','修饰符')；
使用字面量形式创建:var 正则表达式的名称=/ 正则表达式内容/修饰符；

三、正则表达式的常用方法—test方法

作用：验证字符串是否符合正则表达式的格式要求
格式：正则表达式.test(字符串)
返回值：true（符合要求）、false(不符合)

四、正则表达式的构成
（一）平常字符

如字母、数字0-9、a-z、A-Z、_

（二）、特别字符（元字符）
（1）、定位符

^:表示以某个字符开头，如/^a/表示字符串以字母a开头

复制代码

$:表示以某个字符结尾，如/$a/表示字符串以a结尾

复制代码

（2）、表现数量的限定符

*：表现它前面的字符的个数为0到无穷多个，如/a*/表现a的个数最少0个，最多无穷个
+:表现他前面的字符的个数为1到无穷多个。如/a+/表现 a的个数最少1个，最多无穷个
?:表现他前面的字符为0到1个。如/a?/表现a的个数最少0个，最多一个
{n}:表现他前面的字符只能是n个.如/a{3}/表现字符串中包罗3个字符a
{n, }:表现他前面的字符为n到无穷多个，如/a{3, }/表现字符串 a的个数大于便是3个
{n,m}:表现他前面的字符的个数为n-m个.如a{1,5}表现a的个数为1-5个

（3）、转义字符
转义字符：所谓转义字符就是指在平常字符的前面加反斜线，使得他具有特定的功能和含义，也可以在具有特定的功能和含义的字符前面加反斜线，将他转换为平常字符如：\d表现恣意一个数字/\表现将正则表达式中的斜线转换为平常的斜线

\d:表现恣意一个数字
\D：表现恣意一个非数字
\w:表现恣意一个字母、数字、下划线
\W:恣意一个非字母数字下划线
\s:表现恣意一个空白符，好比制表符、空格
\S:恣意一个非空白符

（4）、备选字符集

[值1 值2 值3 值4]：中括号里面的值表现字符串中可以匹配到的恣意一个值
[值1-值n]:表现值1到值n间的恣意一个值为备选选项
[^值1 值2 值3]：表现字符串中不可以包罗中括号里面的恣意一个值
[\u4e00-\9fa5]:表现恣意的一个汉字

四、正则表达式的匹配模式
1）贪婪模式：指正则表达式在对字符串进行匹配时尽大概多的匹配字符，默认就是贪婪模式
2）懒惰模式：指正则表达式在对字符串进行匹配时尽大概少的匹配字符，默认是贪婪模式，假如要将贪婪模式转化为懒惰模式，必要在数量修饰符后面加问号

(五）、字符串对象中和正则表达式团结使用的方法
（一）、split方法

作用：将字符串转化为数组
格式：字符串名称.splite('分隔符');

（二）、match方法

作用：从字符串中查找到符合条件的
格式：字符串.match(子串);
返回值：由子串形成的数组，默认只返回找到符合条件的第一个子串，假如要找到符合条件的全部的子串必要使用正则表达式作为参数

（三）、repalce方法

作用：更换字符串中指定的子串
格式：字符串.repalce.('要被更换的子串','新的子串');
返回值：默认情况下，只更换符合条件的第一个子串，假如要将全部的子串更换掉，则必要使用正则表达式且这个正则表达式必要使用修饰符g,假如要更换的子串不存在则返回原串

（四）、search方法

作用：在字符串从左向右查找子串位置，假如存在则返回该子串对应的下标，否则返回-1，功能类似于indexOf方法
格式：字符串.search('子串');
注意：该方法可以和正则表达式团结使用，但是就算正则表达式中有修饰符g，在匹配的时间也只能返回查找到的第一个子串

六、正则表达式常用的修饰符

i:表现忽略巨细写
g:表现全局匹配
ig/gi:表现既忽略巨细写也全局匹配

来源：https://blog.csdn.net/m0_46374969/article/details/120621687
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] 呕心沥血 JavaScript知识点梳理大全，超具体发起收藏！！！

本帖子中包含更多资源

浏览过的版块

[web教学] 呕心沥血 JavaScript知识点梳理大全，超具体 发起收藏！！！

本帖子中包含更多资源

浏览过的版块

[web教学] 呕心沥血 JavaScript知识点梳理大全，超具体发起收藏！！！