JavaScript入门保姆级教程 ——— 重难点详细解析（万字长文，建议收藏(1)

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

7、练习：99乘法表

三、自定义函数【重点】

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

概念：特点功能的代码块，可以反复调用

• 在js例函数被定义为一种数据类型，一个函数也可以称为“一个函数类型的值”，保存之这个值的变量就是函数名

• 定义函数

1.使用关键字function定义函数

function 函数名(参数名，…){函数体}

function add(a,b){return a+b;}

调用：函数名+参数表 ：

add(10,20);

2.隐式声明(匿名)定义

语法：var函数名=function(函数名){函数体}

用function定义一个函数，将其看做是一个值，将这个值赋值给变量。

例如：var add=function add(a,b){return a+b;}

使用：变量名（实参）

add(5,2);

3.函数类型值可以在变量间赋值

var f1=function(){return “hehe”}

var f2=f1;–>将f1这个函数赋值给f2,f2也是一个函数

var f3=f1():–>将f1这个函数的结果赋值给f3，f3就是字符串“hehe”

4、函数可以作为函数的参数【常用】

实现方法二：

test(function (i,j)){

return i+j;

}

• 案例：将java中的排序放到前端使用

5、函数可以不按照规定传递参数

function add(i+j){

return i+j;

}

var result1=add(1); //1+undefined=NaN

var result1=add(1,2);//3

var result1=add(1,2,3,4);//3(只取前两位)

• 注意：js中的函数可以不按照指定参数去传参，可能会出问题

1、内置数组对象Arguments[重点]

注意事项：

js里没有“方法重载”，调用函数时可以传入多余or少于形参数量的实参。

js将所有的实参默认保存在一个叫做arguments的数组里。

注：arguments（争吵）只能在函数内部使用

function add(i,j){

if(typeof i==“number”&&typeof=“number”){

if(arguments.length==2){

return i+j;

}else{

alert(“类型有误，请重新输入”);

}

}else{

alert(“参数个数有错，请重新输入”);

}

}

*arguments作用：增强函数的健壮性

2、内置函数

1.parseInt函数：把str转化成number整数

document.write(parseInt(“123”)+“
”);//123

document.write(parseInt(“1.23”)+“
”)//1

document.write(parseInt(“1a23”)+“
”);//1

document.write(parseInt(“a123”)+“

---

”);//NaN

2.parseFloat函数：把str转化成number小数

document.write(parseFloat(“3.14”)+“
”)//3.14

document.write(parseFloat(“a123”)+“
”);//NaN（not 啊number）

document.write(parseFloat(“1a.23”)+“
”)//1

四、对象

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

1、对象类型

js语言是一门类（类似）的面向对象的编程语言，js没有类的概念

#1、在js里只有对象，没有类，任意两个对象都不一样

2.定义一个对象

语法：var obj={属性名：属性值，属性名：属性值，…};

#3.访问对象的属性

（1）访问一个属性：对象名 或者 对象名{“属性名”}

（2）遍历所有属性： 对象名.属性名 或者 对象名[“属性名”]

循环每一次执行，都会从对象中获取一个属性值，赋值给指定的变量名。

属性特点：

1. 方法定义是，形参的类型不用写,返回值类型也不写。

2. 方法是一个对象，如果定义名称相同的方法，会覆盖

3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关

4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际

2、自定义对象：自己定义的对象

（1）new Object();方式创建对象 【了解】

（2）同构系统与异构系统

异构系统通过XML，JSON，字符串进行多语言的通讯，因为这些都是规定好的，各个语言中使用都是一样的。例如JavaScript和Java通过Json进行数据交换，JavaScript利用eval()函数，而Java有jackson,json-lib等类库来进行帮忙解析。

不使用xml的原因：JSON 相对于XML要轻量，XML就比较笨重了，所以现在很多数据传输都在逐渐转为使用JSON来作为传输数据的方式。（2）同构系统与异构系统

• 同构系统

• 异构系统

（3）json形式对象创建

是一种数据交换格式，本质就是一个特殊形式的字符串 —— json串

特殊形式：{key：value ， key1 ： value1…}

*异常：Assiguments patterns must be on the left side of assignment

分配模式必须在分配模式的左侧，写：不要写=

*typeof运算符：获取变量的类型。

3、内置对象：js中准备好的

（1）数组【重点】

java中数组的特点：定长,元素类型相同

js中数组的特点：js里的数组长度不固定，可以任意扩展，数据可以是任意类型。

• 相关属性方法

var arr2 = [1, 2, 3, 4]

//压栈（添加数组）

arr2.push();

//弹栈（将末尾元素移除）

arr2.pop();

1.数组对象.sort()—>对数组里的元素按照自然顺序升序排列

2.数组对象.push()—>在数组的末尾插入一个元素

3.数组对象.pop—>删除数组末尾的最后一个元素，且数组长度减1

4.数组对象.join(参数)–>将数组中的元素按照指定的分隔符拼接为字符串

5.delete 数组对象[下标]—>删除数组指定位置元素，且数组长度不变

（2）字符串

（3）日期

(4)Math

//随机数 返回0-1之间的随机数

let number = Math.random();

alert(number)

1. 创建：

• 特点：Math对象不用创建，直接使用。 Math.方法名();

2. 方法：

random():返回 0 ~ 1 之间的随机数。 含0不含1

ceil(x)：对数进行上舍入。

floor(x)：对数进行下舍入。

round(x)：把数四舍五入为最接近的整数。

3. 属性：

PI

5. RegExp：正则表达式对象

6. 正则表达式：定义字符串的组成规则。

7. 单个字符:[]

如： [a] [ab] [a-zA-Z0-9_]

• 特殊符号代表特殊含义的单个字符:

\d:单个数字字符 [0-9]

\w:单个单词字符[a-zA-Z0-9_]

2. 量词符号：

?：表示出现0次或1次

*：表示出现0次或多次

+：出现1次或多次

{m,n}:表示 m<= 数量 <= n

• m如果缺省： {,n}:最多n次

• n如果缺省：{m,} 最少m次

3. 开始结束符号

• ^:开始

• $:结束

2. 正则对象：

3. 创建

4. var reg = new RegExp(“正则表达式”);

5. var reg = /正则表达式/;

6. 方法

7. test(参数):验证指定的字符串是否符合正则定义的规范

（5）RegExp：正则表达式对象

1. 正则表达式：定义字符串的组成规则。

2. 单个字符:[]

如： [a] [ab] [a-zA-Z0-9_]

• 特殊符号代表特殊含义的单个字符:

\d:单个数字字符 [0-9]

\w:单个单词字符[a-zA-Z0-9_]

2. 量词符号：

?：表示出现0次或1次

*：表示出现0次或多次

+：出现1次或多次

{m,n}:表示 m<= 数量 <= n

• m如果缺省： {,n}:最多n次

• n如果缺省：{m,} 最少m次

3. 开始结束符号

• ^:开始

• $:结束

2. 正则对象：

3. 创建

4. var reg = new RegExp(“正则表达式”);

5. var reg = /正则表达式/;

6. 方法

7. test(参数):验证指定的字符串是否符合正则定义的规范

（6）Global

1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();

2. 方法：

encodeURI():url编码

decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多

decodeURIComponent():url解码

parseInt():将字符串转为数字

• 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

isNaN():判断一个值是否是NaN

• NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。

五、事件[重点]

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

js代码靠用户触发某些事件，触发js程序运行，当网页里的标签产生浏览器能够捕获的特定事件时，触发js代码运行。

1、事件模型的三要素

1.事件源：发生事件的事务/对象 通常为HTML页面的标签 对象

2.事件的属性：发生事件的性质(动作) 用户的某个操作（如：单击、双击 等）

3.监听器：事件发生后的处理 通常在函数 中定义处理程序

案例：点击按钮弹窗提示

事件源头：按钮标签

事件属性：单机

事件监听：弹窗提示

事件示例图：

2、为html标签注册事件的方式

<标签名 属性=“” 事件名称=“监听器”>

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

js代码靠用户触发某些事件，触发js程序运行，当网页里的标签产生浏览器能够捕获的特定事件时，触发js代码运行。

1、事件模型的三要素

1.事件源：发生事件的事务/对象 通常为HTML页面的标签 对象

2.事件的属性：发生事件的性质(动作) 用户的某个操作（如：单击、双击 等）

3.监听器：事件发生后的处理 通常在函数 中定义处理程序

案例：点击按钮弹窗提示

事件源头：按钮标签

事件属性：单机

事件监听：弹窗提示

事件示例图：

2、为html标签注册事件的方式

<标签名 属性=“” 事件名称=“监听器”>

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

[外链图片转存中…(img-sjgZQvv0-1715150533348)]