2024年前端最全JavaScript 基础笔记总结(全部)(1)，2024年最新binder机制原理面试

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

default:

code2;

break;

}

循环语句只要condition成立就执行里面的代码。

while循环语句：

while(condition){

code;

}

while是先判断，再执行！

这里的do…while和while语句不同！！！

do…while语句是先执行一遍code，然后在条件判断！

do…while语句：

do{

code;

}while(循环条件);

for语句：

for(初始表达式; 判断表达式; 自增或自减运算){

code;

}

举例1：打印一个倒立三角形

var s = ‘’;

for(var i=0;i<10;i++){

for(var j=i;j<10;j++){

s += "* "

}

s += “\n”

}

console.log(s);

举例2：打印乘法口诀

var s = ‘’;

for(var i=1;i<10;i++){

for(var j=i;j<10;j++){

s += i+’ * ‘+j+’=‘+i*j+’ ';

}

s+=‘\n’;

}

console.log(s);

跳出循环：

continue 和 break语句

1.break:while循环break是用于永久终止循环。即不执行本次循环中break后面的语句,直接跳出循环。

2.continue:while循环continue是用于终止本次循环。即本次循环中continue后面的代码不执行,进行下一次循环的入口判断。

在上面的语句中熟练的运用这两个语句！

15.JS中的数组

======================================================================

15.1 数组格式

---

语法格式：

1.字面量方式创建的数组

var array = []; //空数组

var array2 = [1,‘A’,2,‘B’]

如果想打印array2数组，直接使用下面语句就可以：

console.log(array2);

2.声明构造函数方式创造数组

var array = new Array();//空数组

var array2 = new Array(1,‘A’,‘2’,‘B’);

获取数组长度，array2.length就可以了。

3.数组里面可以有数组，这样样的数组成为多维数组(二维数组、三维数组 …)

例如：

var a1 = [1,2,‘A’,‘B’];

var a2 = [1,2,a1,‘A’,‘B’];

console.log(a2);

15.2 获取数组中的元素

---

数组中的元素从0开始！！

多维数组获取的时候，只需要填好相应的元素标号就可以了。

15.3 遍历数组

---

遍历数组需要使用for循环或者while循环，并且熟练使用length来决定数组长度。

下面是一个while循环例子：

15.4 数组求和

---

和遍历一样，使用for循环。

---

16. 函数

====================================================================

16.1 函数的声明以及调用

---

1.关键字声明

function 函数名(){

code;

}

2.表达式声明

var f_name = function(){

code;

}

函数声明后，里面的代码是不会执行的；

除非调用这个函数，否则，不管在什么情况下都不会执行函数种的代码。

16.2 函数的形参和实参

---

形参格式：

function fun1(形参1,形参2,形参3, …){

code; //形参是在声明函数时候

}

实参格式：

fun1(实参1,实参2,实参3, …) //调用的时候

实参将数值，传递给形参。

例如：

function f1(a,b){

console.log(a+b);

}

f1(1,2);

f1(1,3);

f1(1,4);

16.3 函数的返回值

---

语法格式：

function f1(a,b){

code;

return c;

}

返回值很重要，调用时返回的结构，就是由return来返回。

如果没有返回值或返回值为空，则变量接受到的返回值为undefined。

例如：

function f(a,b){

var c = a-b;

return ; // 没有返回值，则返回undefined。

}

var f = f(1,2);

console.log(f);

注意：

函数种，return之后，不管有什么代码，都不会被执行！！

也就是执行完return后，函数的调用结束。

16.4 匿名函数

---

匿名函数，函数本身是没有名字的。

匿名函数格式一：

var fun = function(){

code;

}

匿名函数格式二：（自调用的匿名函数，立即执行函数）

( function(){

code; // 使用括号将函数做一个整体括起来。

} ) (); //这里的括号用来调用。

16.5 函数做为参数

---

函数也是一种数据类型。

之前说的六个数据类型当中，其中对象包含了数组和函数。

可以使用typeof判断一下：

function f1(){

}

console.log(typeof f1);

函数作为参数：

例如：

function f1(s){

s(); //注意这里是将f2作为值传入的！

}

var f2 = funcation(){

console.log(222);

}

//f2函数会被当做值，传入f1函数内

f1(f2);

函数作为返回值：

例如：

function f1(){

var a = 10;

**var f2 = function(){

alert(2);

}**

return f2;

}

var f = f1();

f();

16.6 函数作用域

---

全局作用域，不使用var声明的变量是全局变量，不推荐使用。

变量推出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁。

对于全局作用域的三个例子：

例1：

例2：

例3：

可以看到上面的三种不同位置的全局变量得到的不同的结果。

JS 代码的运行分为两个阶段。

1：解析（编译）阶段

语法检查，变量及函数进行声明。

2：运行阶段

变量的赋值，代码流程的执行，从上往下。

所以上面三个例子会出现不同的结果。

注意：

1.如果函数与变量同名，那么函数声明会替换变量声明。

例如：

**但是，因为声明在赋值前面，所以在最后赋值时，输出要非常小心！**例如：

function a(){

console.log(‘aaa’);

}

var a = 1;

console.log(a);

或者

var a = 1;

function a(){

console.log(‘aaa’);

}

console.log(a);

这里结果就变成了 1，因为声明在前面，而赋值在最后！！！

16.7 函数的作用域链

---

举个例子：

var a = 1;

function f1(){

function f2(){

function f3(){

console.log(a);

}

f3();

}

f2();

}

f1();

通过上面不难看出是一条作用域链。

---

17. JavaScript 对象

===============================================================================

1.字面量声明对象

var obj1 = {};

2.对象中的数据都是键值成对存在

通常来说，值是函数则成为方法，其他类型的值都是属性。

var obj2 = {

age:12,

height:195,

name:‘张三’,

sex:**function(){

}**

};

3.实例化方式 声明对象（内置构造函数）

var obj2 = new Object();

4.自定义构造函数方式

function fun(){

}

var f = new fun(); //实例化自定义构造函数方式

以下两个获取对象属性或者方法的例子：

18. this用法

========================================================================

18.1 指向对象中的this

---

直接举个例子：

var obj1 = {

age:18,

name:‘老铁’,

fun:function(){

// 在方法中的this就是这个方法所在的对象

var s = this.age;

}

}

实际上this指向的就是obj1这个对象。

也就是说上面的this.age就等于obj1.age。

只不过this替换了obj1这个对象。

18.2 指向全局对象的this

---

在一个普通的函数种也是有this的，并且这个this指向的是全局对象(window)。

function f(){

console.log(this);//这里可以直接打印出来运行一下。

}

18.3 this的指向

---

直接上例子：

k = ‘678’;

function fun(){

console.log(this.k);

}

var o1 = {

k:‘123’,

f:fun, //调用fun()函数

}

var o2 = {

k:‘345’,

f:fun, //调用fun()函数

}

o1.f();

o2.f();

这里的this，就非常灵性，指向的自然是相对应的k值，this运行在那个对象下，就指向那个对象。

注意函数是否带括号！！！

函数带括号的相当于调用函数：

var o1 = {

age:18,

fun:function () {

console.log(this.age);

}

}

var o2 = {

age:16,

fun:o1.fun(),

}

o2.fun();

上面得到的结构就是18，因为这是调用完成后的结果。

没有带括号的函数：

var o1 = {

age:18,

fun:function () {

console.log(this.age);

}

}

var o2 = {

age:16,

fun:o1.fun, //只是把o1的键值对中的值，给传递过来了。

}

o2.fun();

这里没有带括号，结果就是16，因为fun函数没有被调用执行。

这里的fun:o1.fun就等于

fun:function () {

console.log(this.age);

}

只是把键值对中的值转递过来了，并没有调用。

19. 对象的遍历和删除

==========================================================================

遍历语法格式：

for … in

for(键 in 对象)

for

例如：

var o1 = {

name:‘老铁’,

age:18,

sex:‘female’

}

for(var a in o1){

console.log(o1[k]);

}

for … in … 循环不仅可以遍历对象，还可以遍历数组。

删除属性语法格式：

删除属性：delete

例如：

var o1 = {

name:‘老铁’,

age:18,

sex:‘female’

}

console.log(o1); //先看一眼内容

delete o1.age;

console.log(o1); //这时里面应该没有了age属性。

20. 包装对象

======================================================================

这里介绍以下三种原始类型：

数值，字符串，布尔

原始类型的数据在一定条件下可以自动转为对象，这就是包装对象。

例如：

var v1 = new Number(123);

console.log(v1);

上面的结果就是Number {123}。

原始值，可以自动当作对象来调用，因此可以调用各种属性以及方法。

如果包装对象使用完成，会自动立即销毁。

例如：

var str = ‘123’;

console.log(str.length);

21. 数学对象（标准库对象，内置对象）

==================================================================================

这里记录几个很常用的：

Math.abs() // 函数取绝对值

Math.random() //函数返回一个浮点数，范围在[0,1)之间。

公式：取2到8之间的数字

Math.random()*( 8 - 2 ) + 2

获取 n - m 之间的随机数值

Math.random() * (m - n) + n

往后取特定的范围都这样取值！！！

Math.floor() //返回小于或等于一个给定数字的最大整数。

22. 日期对象

======================================================================

实例化构造函数获取时间对象

这里显示的是中国标准时间。

var date = new Date();

console.log(date);

这里显示的是毫秒。

var date2 = Date.now();

console.log(date2);

获取特a定的年月日小时等。

var date3 = new Date();

console.log(date3.getDetHours()); //获取当前小时

console.log(date3.getDate()); //获取当前日

console.log(date3.getFullYear); //获取年份

console.log(date3.getMonth() + 1); //获取月份

这里强调一下，JS中月份的数组是从0开始的，所以要+1。

JS中获取的时间是计算机本地时间。

23. 数组Array对象

===========================================================================

使用push()方法向数组里面最后一个添加元素：

var arr = [1,2,3,4,5,6,7];

var s = 8;

arr.push(s);

console.log(arr);

使用pop()方法删除最后一个元素：

var arr = [1,2,3,4,5,6,7];

arr.pop();

console.log(arr);

使用slice()方法，由begin和end(不包括end),这里只是提取了一部分，原数组不变：

var arr = [1,2,3,4,5,6,7];

console.log(arr.slice(2,4));

console.log(arr);

使用concat()方法，来合并数组：

var arr = [1,2,3,4,5,6,7];

var arr2 = [‘A’,‘B’,‘C’];

var arr3 = arr.concat(arr2);

console.log(arr);

console.log(arr3);

使用join()方法和分隔符来将所有数组中的元素连接成字符串：

var s = arr.join();

console.log(s);

这里显示的字符串，中间会参杂“ ，”，因此需要分隔符的帮助。

例如：

没有分隔符号：

var s = arr.join(‘’);

console.log(s);

分隔符为‘ - ’：

var s = arr.join(‘-’);

console.log(s);

使用forEach()方法对数组的每一元素执行一次提供的函数。

24. 字符串对象

=======================================================================

举例学一些常用的：

indexOf()方法来查找相应的字符或字符串第一次出现的位置：

var s = ‘wasdfsdfsdf’;

var arr = s.indexOf(‘d’);

console.log(arr);

substr(start , Length)方法返回一个字符串中从指定位置开始到指定字符数的字符。

var s = ‘wasdfsdfsdf’;

var arr = s.substr(2,5);

console.log(arr);

上面就是从索引为2的位置开始的后5位。

toLowerCase()方法，将所有字符转换为小写。

toUpperCase()方法，将所有字符转换为大写。

var s = “Hello,World”

var arr = s.toLowerCase();

console.log(arr);

replace(‘被替换’ , ‘要替换’)方法，替换字符或字符串。

trim()方法会从一个字符串的两端删除空白字符。

以下是一个查询JS的一些相关内函数和语句的网站，可以看看：

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

var s = ‘wasdfsdfsdf’;

var arr = s.indexOf(‘d’);

console.log(arr);

substr(start , Length)方法返回一个字符串中从指定位置开始到指定字符数的字符。

var s = ‘wasdfsdfsdf’;

var arr = s.substr(2,5);

console.log(arr);

上面就是从索引为2的位置开始的后5位。

toLowerCase()方法，将所有字符转换为小写。

toUpperCase()方法，将所有字符转换为大写。

var s = “Hello,World”

var arr = s.toLowerCase();

console.log(arr);

replace(‘被替换’ , ‘要替换’)方法，替换字符或字符串。

trim()方法会从一个字符串的两端删除空白字符。

以下是一个查询JS的一些相关内函数和语句的网站，可以看看：

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-NoHiOUvf-1715496432655)]