js知识点总结

原创已于 2022-03-26 11:13:04 修改 · 559 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2021-08-22 15:59:43 首次发布

js 专栏收录该内容

7 篇文章

订阅专栏

本文详细讲解了JavaScript中onclick与addEventListener的区别，涵盖了鼠标、键盘事件、HTML事件，以及函数、this指向、闭包、作用域、变量提升、定时器、节点操作和正则表达式等内容。深入剖析回调函数、闭包原理，以及JavaScript作用域和事件处理的深入理解。

1.绑定事件onclick和addEventListener的区别

1)onclick事件在同一时间只能指向唯一对象

2)addEventListener给一个事件注册多个listener

3)addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4)addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

2.常用事件

第一种：鼠标事件。

事件	含义
click	单击鼠标按钮时触发；
dblclick	当用户双击主鼠标按钮时触发
mousedown	当用户按下鼠标还未弹起时触发
mouseup	当用户释放鼠标按钮时触发
mouseover	当鼠标移到某个元素上方时触发，会参与冒泡；
mouseout	当鼠标移出某个元素上方时触发，参与冒泡
mousemove	当鼠标指针在元素上移动时触发
mouseenter	在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡
mouseleave	鼠标移出，不参与冒泡

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子才会触发。之所以这样是因为mouseover会冒泡，mouseenter不会冒泡

第二种：键盘事件。

事件	含义
keydown	当用户按下键盘上任意键时触发，如果按住不放，会重复触发
keyup	当用户释放键盘上的键触发；
keypress	当用户按下键盘上的字符键时触发，如果按住不放，会重复触发

第三种：HTML事件。

事件	含义
load	当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发
unload	当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发
select	当用户选择文本框（input或textarea）中的一个或多个字符触发
change	当文本框（input或textarea）内容改变且失去焦点后触发
input	输入
focus	当页面或者元素获得焦点时在window及相关元素上面触发
blur	当页面或元素失去焦点时在window及相关元素上触发
submit	当用户点击提交按钮在<form>元素上触发
reset	当用户点击重置按钮在<form>元素上触发
resize	当窗口或框架的大小变化时在window或框架上触发
scroll	当用户滚动带滚动条的元素时触发

3.数据类型

基本数据类型：String，boolean，Number（数字），对空（Null）、未定义（Undefined）、Symbol。

undefined：是所有没有赋值变量的默认值，自动赋值。

null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

4.type of和instance of

typeof：返回数据类型

instance of：判断一个动态变量是否是某个对象的实例，比如

function test(){ }; 
var a=new test();
alert(a instance of test);//true

5.冒泡和捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

停止冒泡

通常，冒泡向上上升到<html>，然后上升到Document象。某些事件甚至可以到达window对象和调用处理程序。当事件已被完全处理时，处理程序都可以决定是否停止冒泡。我们可以使用event.stopPropagation()方法停止事件冒泡。

如非必要，不要轻易停止冒泡，有时event.stopPropagation()会产生隐藏的陷阱，引起一些不必要的问题。

6.查找（获取）html元素的方法

1）通过ID获取（getElementById）

2）通过name属性（getElementsByName）

3）通过标签名（getElementsByTagName）

4）通过类名（getElementsByClassName）

5）通过选择器获取一个元素（querySelector）

6）通过选择器获取一组元素（querySelectorAll）

getElementsByClassName(“xxx”)

这个方法得到的是一个由class="xxx"的所有元素组成的集合（HTML collection），而不是单个元素；

就算只有一个class相同的名字，当用时也要写成对象名[0]

querySelectorAll() 返回 NodeList (文档对象的集合）对象，元素可以通过索引(以 0 为起始位置)来访问
对于HTML collection 和NodeList：

不是一个数组！

看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，后者返回的是HTMLCollection集合。其前者是一个静态集合，后者是一个动态集合。

其中动态集合和静态集合的最大区别在于：动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；静态集合则不会受DOM树元素变化的影响。

 function fs() {
            p1 = document.getElementsByTagName("p");
            p2 = document.querySelectorAll("p");
            console.log(p1.length);
            console.log(p2.length);
           //创建新的p节点
            var p3 = document.createElement("p");
            var box = document.querySelector(".box");
            box.appendChild(p3);
            console.log(p1.length);
            console.log(p2.length);
        }
        fs();

7.函数

什么是函数：实现特定功能的语句封装组

定义函数：

1.function a(){} 
2.var a=function(){}
3.function(){}//匿名函数 
4.var a=(a, b) => { return a + b };//箭头函数

调用匿名函数

方式一：开头使用“!”，结尾使用“()”结构清晰，是最常使用的写法

!function(num1,num2){
var sum = num1 + num2;
}(1,2);

方式二：使用括号包裹全部内容，可以表明匿名函数与之后调用函数的()为一个整体，官方推荐使用。

(function(num1,num2){
var sum = num1 + num2;
}(1,2));

方式三：无法表明函数与之后调用函数的()为一个整体，不推荐使用

(function(num1,num2){
var sum = num1 + num2;
})(1,2);

函数的执行顺序

普通函数的声明语句与函数的调用语句没有先后顺序之分
匿名函数表达式的调用语句必须在函数声明语句之后，否则报错
JavaScript 代码在执行过程中，会分为两个阶段：检查装载阶段和代码执行阶段。其中，检查装载阶段的主要工作是函数的声明、变量的声明等；代码执行阶段的主要工作是函数的调用、变量的赋值、代码的执行等。

8.JavaScript中的this指向

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。

如果单独使用，this 表示全局对象。

在函数中，this 表示全局对象。

在函数中，在严格模式下，this 是未定义的(undefined)。

在事件中，this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象

function myFunction(a, b) 
{ 
return a * b; 
} 
myObject = myFunction.call(myObject, 10, 2); // 返回 20

function myFunction(a, b) { 
return a * b; 
} 
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20 
//arguments为函数内部的内置函数 
function findMax() { 
 var i, max = arguments[0];
 if(arguments.length < 2) return max; 
 for (i = 0; i < arguments.length; i++) {
 if (arguments[i] > max) {
 max = arguments[i]; 
}
} 
x = [1, 123, 500, 115, 44, 88]; 
my=findMax.apply(my, x); }

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。

箭头函数的this指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this

9.什么是回调函数

字面上的理解，回调函数就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行传进去的作为参数的函数。走这个过程的参数化的函数就叫做回调函数。换个说法也就是被作为参数传递到另一个函数（主函数）的那个函数就叫做回调函数。

setTimeout(function(){},20)//计时器就是一个回调函数

10.闭包

闭包原理：如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.

简单的说，javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

function b(){
    var a=1
    a+=1;
}
b();//2
b();//2
//闭包
function closure(){
var a=1;
return function(){
a+=1
console.log(a);
}
}
closure();//2
closure();//3

11.作用域

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

javascript的局部作用域：

变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

函数参数只在函数内起作用，是局部变量。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

<script type="text/javascript">
  function f() {
            var a = 5;//局部变量
            b = 4;//全局变量
            console.log(a);
            console.log(b);
        }
        f();
        console.log(a);//局部变量不能在函数外使用，会报错：Uncaught ReferenceError: a is not defined

        console.log(b);
 </script>

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

let,var,const

1.var支持变量提升，let不支持变量提升

2.var可以重复定义同一个变量，但是let不可以

3.var没有块级作用域，let有块级作用域{}

4.const是用来定义常量的，定义之后必须赋值，常量定义之后是不允许改变的。

5.常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

const obj={
    name:"vue",
    age:18
    }
    obj.name="ss";
}

12.变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

x=5;
function a(){
    console.log(x);
}
var x;
a();5

function b(){
    console.log(y);
}
b()//undefined
var y=5;//只提升了变量var y;

13.setTimeout和setInterval

setTimeout()方法是在等待时间指定时间后执行函数，且只执行一次传入的句柄函数

setInterval（）方法是每指定间隔后执行一次传入的句柄函数，执行函数直到关闭窗口或清除定时器clearInterval（）

var timetimer=setTimeout（function（）{}，20）
 clearInterval（timer)//清除定时器

14,节点操作

## 创建节点,添加节点

var li = document.createElement("name");//创建元素节点,可以直接引用
var text = document.createTextNode("str");//创建文本节点
li.appendChild(text);
//下面是加载到一个父级元素中
var city = document.getElementById("city");
city.appendChild(li);
//在父元素里面添加元素,可以直接添加里面的内容,但动静比较大
案例:父元素.innerHTML += "代码/文本";
//可以结合在一起,比较好用
var li = document.createElement("li");
li.innerHTML = "str";
父元素.appendChild(li);
//在指定的子节点插入到一个新节点之前
父元素.insertBefore(old,new)
//替换子节点
父元素.replaceChild(old,new)
//删除子节点
父元素.removeChild(child)
//不知道父元素的情况下,可以进行获取,然后调用方法,这样比较方便,常用
删除子元素例子:子.parent.removeChild(子);
```

## 获取元素节点的子节点

方法	含义
childNodes	表示当前的所有节点(只要在里面什么都算空白也算)
children	表示当前所有的子元素
firstChild	第一个节点
firstElementChild	第一个元素节点
lastChild	最后一个节点
parentNode	表示当前节点的父节点(可肯定是元素)
previousSibling	表示当前节点的前一个兄弟节点(包括空白)
previousElementSibling	表示当前节点的前一个兄弟元素
nextSibling	表示当前节点的后一个兄弟节点(包括空白)
nextElementSibling	表示当前节点的后一个兄弟元素
innerText	该属性可以获取元素内部的文本内容(自动去除html标签)

15.正则表达式

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
var str1=str.replace("Runoob","mocrosoft")
将Runoob换为mocrosoft
输出结果：6
/runoob/i  是一个正则表达式。
runoob  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/;//设置正则表达是变量
#var patt=new RegExp("e");
patt.test("The best things in life are free!");
#/e/.test("The best things in life are free!")