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

字符串类型–不分字符和字符串，用单引号或者双引号声明定义 “hjehe”

布尔类型–true|false 非0|0（false） 非空|null(false)

*1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)

*2. string：字符串。不区分字符和字符串，不区分单双引号 字符串 “abc” “a” ‘abc’

*3. boolean: true和false

*4. null：一个对象为空的占位符

*5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

3.引用、复合型数据类型

数组 日期 对象 函数类型

4.JS特殊语法：

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)

2. 变量的定义使用var关键字，也可以不使用

• 用： 定义的变量是局部变量

• 不用：定义的变量是全局变量(不建议)

5、特殊类型：

NAN not a number 进行了不正常的数字运算 “whj/2”=NAN

undefined 变量声明后未赋值直接使用 var a; alert(a);

null 变量手工赋值为null,函数返回值为null

6、关键字 tepyof 查看当前变量的实际数据类型 使用方式

var a=“10”;

var b=10;

alert(a=b);//true

alert(typeof a);//string

alert(typeof b)//number

alert(typeof a= typeof b);//true

5、运算符

1.数学运算符：+ - / % *

注意：只有能计算出结果 ，js就会自动类型转换切换运算出结果

2、判断相等性 ：== ===

==:比较两种是否相等

var a=3; var b=“3” alter(a==b)–>true

===:比较值和类型是否相等

var a=3; var b=“3” alter(a===b)–>false

例：

3.typeof 判断变量的类型

4.三元运算符

? : 表达式

var a = 3;

var b = 4;

var c = a > b ? 1:0;

• 语法：

• 表达式? 值1:值2;

• 判断表达式的值，如果是true则取值1，如果是false则取值2；

6、JavaScript流程控制

1、判断语句 —与java一样

if（）{}

if（）else{}

switch(a) case java中a的值：byte,short,int,char,String(1.7以后) js:没要求

2、循环控制：

for（var i=0;i++）{}

while(){}

do()while()

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.监听器：事件发生后的处理 通常在函数 中定义处理程序

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
问false

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

五、事件[重点]

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

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

1、事件模型的三要素

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

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

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

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-MhkXhkPi-1714911533939)]

[外链图片转存中…(img-1IFSb1NW-1714911533940)]

[外链图片转存中…(img-epVoYIDc-1714911533940)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！