JavaScript 基础教程
一、什么是 JavaScript？
定义
JavaScript（简称 JS），是一种脚本语言，高级编程语言。主要用于为网页添加交互性和动态功能，是前端开发的核心技术之一（与 HTML 和 CSS 并称网页三要素）。
JavaScript、HTML 和 CSS 之间的关系
- HTML：负责网页结构，相当于网页的'骨架'。
- CSS：负责网页的样式，相当于网页的'外观'。
- JavaScript：负责网页的交互逻辑，相当于网页的'行为'。
JavaScript 和 Java 之间的关系
JavaScript 和 Java 虽然名字相似，但本质上是两门独立的语言，更多是历史营销原因。就像'雷锋'和'雷峰塔'，'老婆'和'老婆饼'一样，没有直接关联。
二、JavaScript 的使用
引入方式
行内脚本：直接嵌入到 html 元素内部
<script>alert("hello")</script>
外部脚本：定义 <script> 标签，用 src 引入外部 js 文件
<script src="hello.js"></script> // hello.js 文件内容 alert("hello");
内部脚本：定义 <script> 标签，写到 script 标签中
<input type="button" value="点击一下" onclick="alert('hello')">
基础语法
这里先说一下 JavaScript 常用的控制台信息输出工具 console.log
<script> console.log(1.02); </script>
在浏览器中点击快捷键 F12，显示开发者工具面板，点击 Console，会显示输出信息。
变量声明
var：早期声明变量，作用域在该语句的函数内，也就是在所在函数内都可以访问，用的不多；let：新增的声明变量，作用域在语句所在的代码块，在{}都可以访问；const：声明常量，声明后不能修改，否则会报错。
<script> var age1=11; console.log(age1); let age2=12; console.log(age2); const age3=13; // age3=13; 常量声明，修改报错 console.log(age3); </script>
JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值，随着程序的运行，类型也会改变。
<script> var age1=11; age1="abc" console.log(age1); let age2=12; age2=true; console.log(age2); const age3=13; console.log(age3); </script>
+：当使用+运算符对不同类型的值进行拼接时，会自动将非字符串类型转换为字符串。
<script> let age1=123+"h"; console.log(age1); let age2="123"+"你好"; console.log(age2); let age3="123"+true; console.log(age3); </script>
运算符
| 运算符类型 | 运算符 |
|---|---|
| 算术运算符 | +, -, *, /, % |
| 自增自减运算符 | ++, -- |
| 赋值运算符 | ==, +=, -=, *=, /=, %= |
| 比较运算符 | <, >, <=, >=, !=, !==, ==, === |
| 逻辑运算符 | &&, |
| 位运算符 | &, |
| 移位运算符 | <<, >>, >>> |
| 三元运算符 | 条件表达式？true_value:false_value |
大体都与 Java 相同，个别不同。
==与===的不同==：会尝试进行隐式类型转换，也就是，把不同的值转换为相同类型后再进行比较。===：不进行隐式类型转换。- 想严格比较（类型 + 值都相同）-> 用
===； - 想宽松比较（允许类型转换）-> 用
==（尽量少用）。
- 想严格比较（类型 + 值都相同）-> 用
<script> //==:会尝试进行隐式类型转换，把不同的值转换为相同类型在进行比较 console.log(1=="1");//true console.log(true=="1");//true console.log(true==1);//true console.log("========="); //===：不会进行隐式类型转换，直接比较 console.log(1==="1");//false console.log(true==="1");//false console.log(true===1);//false </script>
!=与!==也是同理，!=可以进行类型转换，而!==不可以。
三、数据类型
js 的数据类型分为：基本类型和引用类型。
typeof：用于返回操作数的数据类型。
基本类型
| 基本类型 | 描述 |
|---|---|
| Number | 数字，用于表示整数和浮点数 |
| String | 字符串类型，需要用引号，单引号双引号都可以 |
| Boolean | 布尔类型，只有两个取值，true（表示真），false（表示假），常用语逻辑判断 |
| Undefined | 表示变量未初始化，变量的值就是 undefined，或者访问对象不存在属性时，也会返回 undefined |
<script> //基本类型 //number console.log(typeof(11)); //String console.log(typeof("hello")); //true console.log(typeof(true)); //Undefined let a; console.log(a); //null console.log(typeof(null)); </script>
null：返回的类型是 object，这个早期 JavaScript 设计的一个历史遗留问题。虽然 null 表示空值，但从检测类型角度来看，需要特殊处理。
引用类型
数组
数组的创建
<script> //方法一：使用 new 关键字 let a1=new Array(1,"hell0",null); //方法二：使用字面量创建 let a2=[]; a2=[1,"1",4]; let a3=[1,2,3]; </script>
- js 的数组可以不用统一类型。
数组的操作
1. 数组的查找
<script> let a=[1,3,5,7]; console.log(a[0]);//1 console.log(a[1]);//3 console.log(a[2]);//5 console.log(a[100]);//undefined </script>
- 元素不存在查找结果为 undefined。
2. 数组的遍历
方式一：传统 for 循环
<script> a1=[1,"1",4]; //方式一： for(let i=0;i<a1.length;i++){ console.log(a1[i]); } </script>
方式二：for...of 循环（值遍历）
<script> //方式二： for (const element of a1) { console.log(element); } </script>
- element 是当前遍历到的元素的值，变量名可自定义。
- of 关键字用于遍历数组的值。
方式三：foreach 遍历
<script> //方式三： a1.forEach(element => { console.log(element); }); </script>
- foreach 是数组的内置方法，接收一个回调函数作为参数。
3. 数组的增添
<script> //添加元素 let a=[1,2,3]; a[4]=100; a[100]=1; console.log(a[4]); console.log(a[100]); console.log(a); </script>
- 稀疏数组：数组索引不连续，存在未显示赋值的空槽（不占实际内存，遍历会跳过）；
- 动态长度：数组长度由最大索引决定。
4. 数组的删除
<script> //删除元素 let a=[1,2,3]; //删除前 console.log(a[1]); //删除从下标一开始的两个数据 a.splice(1,2); //删除后 console.log(a); </script>
- splice（起始索引，删除数量，插入元素 1，插入元素 2...）；
- 如果访问不存在的元素，结果为 undefined。
5. 数组的修改
<script> //修改元素 let a=[1,2,3]; //修改前 console.log(a[0]); a[0]=100; //修改后 console.log(a[0]); </script>
四、函数
语法格式
<script> //函数格式 function 函数名（参数 1，参数 2...）{ //函数体 return 结果//（可选，返回值） } //函数调用（无返回值） 函数名（实参列表）; //函数调用（有返回值） 返回值=函数名（实参列表）; </script>
示例：
<script> function add(a,b){ return a+b; } //两个参数 let d=add(15,20);//35 console.log(d); //三个参数（多出一个参数） let f=add(15,20,10); console.log(f);//35 //一个参数（少一个参数） let h=add(15); console.log(h);//NaN </script>
- 当函数定义了 n 个参数，调用时传了 m 个参数（m>n），JavaScript 不会报错，会忽略多余参数，只计算前 n 个参数；
- 当函数定义了 n 个参数，调用时传了 m 个参数（m<n），JavaScript 不会报错，多余参数会被赋值为 undefined，在上述示例中，也就成了 15+undefined，结果是 NaN（Not a Number，非数字）。
匿名函数
语法格式
<script> let 变量名=function(参数名 1，参数名 2....){ 函数体 ); } //调用 函数名 (参数 1，参数 2...) </script>
示例：
<script> let c=function(a,b){ console.log(a+b); } c(1,2); </script>
- 需要调用变量名，才能触发函数。
五、对象
在 JavaScript 中，对象是一种复合数据类型，用于存储键值对形式的数据，并且可以包含函数（方法）。
对象的创建
字面量创建（常用）：{}
<script> let student={ id:12333, name:"张三", age:12 } </script>
- 键值对之间使用逗号分割；
- 键和值使用冒号分割。
使用 new Object 创建对象
语法：
<script> let 对象名=new Object(); 对象名。属性=值; .... </script>
示例：
<script> let student=new Object(); student.id=2; student.name="张三"; student.age=12; </script>
构造函数对象
语法格式
<script> function 构造函数名 (参数 1，参数 2...){ this.属性=值; this.name=name; this.方法=function(){ 函数体 } } let a=new 构造函数名 (参数...); </script>
示例
<script> function Student(id,name,gender){ this.id=id; this.name=name; this.age=age; this.say=function(){ console.log("say"); } } let a=new Student(1,"zhangsan",11); </script>
- 构造函数不需要 return。
对象的属性操作
访问
<script> let student={ id:12333, name:"张三", age:12, say:function(){ console.log("hello"); } } //访问操作 //方法 1： console.log(student.name); //方法二： console.log(student["name"]); //添加 student.classid=1; //修改 student.age=24; //删除 delete student.age; </script>
- 使用
[]访问属性，需要加上引号。