JavaScript简介：
- JavaScript是一种脚本语言，在网页使用的语言中HTML描述页面的结构，CSS用来设计网页的样式，而JavaScript则是用来与用户交互，把网页从单纯的展示信息变为了支持与用户交互的程序，下面介绍JavaScript的基础知识、基本语法、流程控制、函数和数组等基本知识点。
基本知识
1.1 JavaScript引入方式
在网页中编写JavaScript时，可以通过嵌入式、外链式、行内式这三种方法来引入JavaScript
1.嵌入式
直接使用<script>标签包裹JavaScript代码，直接编写到HTML文字当中如：
<script>
alert("我的第一个 JavaScript");
</script>
2.外链式
将JavaScript代码单独编写保存到一个文件中，然后在HTML文件中使用<script>标签导入这个文件，具体示例如下：
<script src="js/test.js"><script>
3.行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，单击“test”按钮时，弹出一个警告框，示例如下：
<a href="javascript:alert('Hello');">test</a>
总结：为了方便程序的维护，应该把HTML、CSS、JavaScript代码分离，需要使用的时候，使用外链的方式引用代码。
1.2 常用输出语句
| 语句 | 用法 |
|---|---|
| alert() | 弹出一个警告框 |
| console.log() | 在浏览器的控制台中输出内容(F12) |
| document.write() | 在HTML文档页面中输出内容 |
1.3 注释方法
- 单行注释：//
- 多行注释：/**/
基本语法
在此部分，主要介绍JavaScript基本的词法语法，JavaScript的语法大体上跟我们学习过的其他语言没有差别，但是在细节上存在着一些不同。
2.1词法规则
- 区分大小写
- 忽略空白符和换行符
- 用半角符号（ ; ）表示一个语句的介绍，但是在一行的介绍时可省略（即跳转到下一行之前都自动认为上一行语句已经执行结束）
- 用花括号“{}”封装一组语句组成一个代码块
- 标识符：用于表示变量名，函数名等自定义的量，应遵循以下规则：
- 第一个字符必须是字母、下划线或者美元符号
- 后面的字符可以是下划线、美元符号、英文字母、数字字符
- 要尽量做到“见其名知其意”
2.2 变量
在JavaScript中，变量的定义与其他语言相同，都是储存数据的容器。变量的赋值也可以先声明再赋值、同时声明赋值、不声明赋值（自动声明为全局变量）
在变量的定义的时候存在var和let两种方法，其中var为JavaScript的默认声明变量方法。
- 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
（附：在JavaScript中还有常量的概念，与Java的常量使用方法一致（const）习惯上常量名称使用大写字母表示）
2.3数据类型
对于JavaScript来说，数据是在赋值的时候根据所赋的值来确认本身的类型，且各种类型之间可以使用自带的函数来改变数据的类型
2.3.1 数据类型分类
2.3.2 数据类型检测
- typeof()操作符：typeof(data)
- 对象原型的扩展函数：Object.prototype.toString.call(data)
2.4 运算符
y=5，下面的表格解释了这些算术运算符：
2.4.1 算术运算符
y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| x=y++ | 5 | 6 | ||
| – | 自减 | x=–y | 4 | 4 |
| x=y– | 5 | 4 |
2.4.2 赋值运算符
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
2.4.3 比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| x==5 | true | ||
| === | 绝对等于（值和类型均相等 | ） x===“5” | false |
| x===5 | true | ||
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!==“5” | true |
| x!==5 | false | ||
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
2.4.4 逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
|| |
or | (x==5|| y==5) 为 false |
| ! | not | !(x==y) 为 true |
2.5 流程控制
2.5.1 条件语句
- if 语句：只有当指定条件为 true 时，使用该语句来执行代码
if (condition)
{
当条件为 true 时执行的代码
}
- if…else 语句 ：当条件为 true 时执行代码，当条件为 false 时执行其他代码
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
- if…else if…else 语句：使用该语句来选择多个代码块之一来执行
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
- switch 语句：使用该语句来选择多个代码块之一来执行
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
2.5.2 循环语句
- for：循环代码块一定的次数
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
其中：
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
如下：
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
输出结果为：
该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4
- for/in(for/of)：循环遍历对象的属性(in为访问数组元素索引on为访问数组元素本身)
for(variable in [object|array]){
statement
}
如下：
var arr=['mon','tue','wed','thu','fri','sat','sun'];
for (var i in arr) // i是数组索引， arr为数组名称
{
document.writeln(i+'---'+arr[i]+'<br/>');
}
- while：当指定的条件为 true 时循环指定的代码块
while(循环条件){
循环体
...
}
- do/while：同样当指定的条件为 true 时循环指定的代码块
do{
循环体
......
}while(循环条件);
数组
数组的基本概念
- 数据构成： 由一个或多个数组元素组成，各元素之间使用逗号“,”隔开。
- 数组元素： 每个数组由“索引下标”和“值”构成。
- 多维数组： 当一个数组的值又是一个数组时，可以组成多维数组。
数组的创建
- 实例化Array对象的方式
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
var myCars=new Array("Saab","Volvo","BMW");
- 直接使用“[ ]”的方式创建
var myCars=["Saab","Volvo","BMW"];
数组的基本操作
- 获得和设置数组的长度
//获取数组的长度 var arr1 = [78, 88, 98]; var arr2 = ['a', , , , 'b', 'c']; console.log(arr1.length); // 输出结果为：3 console.log(arr2.length); // 输出结果为：6//设置数组的长度 var arr2 = [1, 2, 3]; arr2.length = 4; // 输出结果：[1, 2, 3, empty] console.log(arr2); var arr3 = ['a', 'b']; arr3.length = 2; // 输出结果：["a", "b"] console.log(arr3); var arr4 = ['hehe', 'xixi', 'jiujiu']; arr4.length = 2; // 输出结果：["hehe", "xixi"] console.log(arr4);
设置的length大于原数组长度，则没有值的数组元素会占用空存储位置。 设置的length等于原数组长度，则数组长度不变。
设置的length小于原数组长度，则多余的数组元素将会被舍弃。
- 访问数组元素
-访问数组元素的方式：“数组名[下标]” - 遍历数组元素
-使用循环语言（for/for…in/for…of/while/do…while）得以遍历数组元素 - 元素的添加与修改
-与访问数组元素的方式相同 - 元素的删除
-使用delete关键字删除数组具体元素的值
常见数组方法
- 栈方法
利用Array对象提供的栈方法实现数组元素的添加与删除。
| 方法名称 | 功能描述 |
|---|---|
| push() | 将一个或多个元素添加到数组的末尾，并返回数组的新长度。 |
| unshift() | 将一个或多个元素添加到数组的开头，并返回数组的新长度。 |
| pop() | 从数组的末尾移出并返回一个元素，若是空数组则返回undefined。 |
| shift() | 从数组的开头移出并返回一个元素，若是空数组则返回undefined。 |
push()和unshift()方法的返回值是新数组的长度。
pop()和shift()方法返回的是移出的数组元素。
- 检索方法
在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置。
| 方法名称 | 功能描述 |
|---|---|
| includes() | 用于确定数组中是否含有某个元素，含有返回true，否则返回false。 |
| Array.isArray() | 用于确定传递的值是否是一个Array，是返回true，不是返回false。 |
| indexOf() | 返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1 |
| lastIndexOf() | 返回指定元素在数组中的最后一个的索引，如果不存在则返回-1 |
- 数组转字符串方法
| 方法名称 | 功能描述 |
|---|---|
| join() | 将数组的所有元素连接到一个字符串中。 |
| toString() | 返回一个字符串，表示指定的数组及其元素。 |
join()和toString()方法的相同点：
可将多维数组转为字符串，默认情况下使用逗号连接。
当数组元素为undefined、null或空数组时，对应的元素会被转换为空字符串
join()和toString()方法的不同点。
join()方法可以指定连接数组元素的符号。
- 其他方法
| 方法名称 | 功能描述 |
|---|---|
| sort() | 对数组的元素进行排序，并返回数组。 |
| fill() | 用一个固定值填充数组中指定下标范围内的全部元素 |
| reverse() | 颠倒数组中元素的位置 |
| splice() | 对一个数组在指定下标范围内删除或添加元素 |
| slice() | 从一个数组的指定下标范围内拷贝数组元素到一个新数组中 |
| concat() | 返回一个合并两个或多个数组后的新数组 |
slice()和concat()方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会原数组产生影响。
splice()方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。
函数使用
在Javascript中，函数就是对象，其应用：
被赋值给一个变量
被赋值为对象的属性
作为参数被传入别的函数
作为函数的结果被返回
用字面量来创建
函数声明与调用
函数的定义： 函数的定义由以下4部分组成：关键字function、函数名、参数和函数体。
function funcName(参数列表){
statements
[return [expr]];
}
function sayHi(name, message){
alert("hello" + name + ", " + message);
}
参数设置：
- 无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。
- 有参函数：适用于开发时函数体内的操作需要用户传递数据的情况。
- 形参：形式参数，具有特定的含义，在定义有参函数时设置的参数。
- 实参：实际参数，也就是具体的值，在函数调用时传递的参数。
//示例
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
return a >= b ? a : b;
}
- 获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。
- 实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。
- 其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
//示例
function transferParam(){
console.log(arguments.length);
console.log(arguments);
}
函数的调用：
直接调用： 函数名(实参值)
sayHi("南工院", "新学期开学了");
在表达式中调用:
这种方式适合有返回值的函数，返回值作为表达式的一部分参与运算，有时还会和（alert、document）等语句配合输出。
function add(a,b){
return a+b;
}
var sum=add(4,5);//此时函数作为表达式的一部分
alert(sum);//9
alert(add(4,5));//9 此时函数作为输出语句的一部分
在事件中调用：
<!--单价按钮后，单击事件会调用myFun()函数-->
<input type="button" value="单击" onclick="myFun()"/>
注意点
return 语句不是函数必须的，但任何函数在任何时候都可以通过return语句+返回的值，实现返回。
若在一个文件中，定义函数名字相同，会使用最后定义的函数
匿名函数
概念： 匿名函数指的是没有函数名称的函数。
作用： 可以有效的避免全局变量的污染以及函数名的冲突问题。
说明： 既是函数表达式的另一种表示形式，又可通过函数声明的方式实现调用。
//函数表达式中省略函数名
var fn = function (num1, num2) {
return num1 + num2;};
fn(1, 2);
//自调用方式
(function (num1, num2) {
return num1 + num2;
})(2, 3);
//处理事件
document.body.onclick = function () {
alert('Hi, everybody!');
};
常见的匿名函数有箭头函数与回调函数
箭头函数
概念： ES6中引入了一种新的语法编写匿名函数，我们称之为箭头函数。
特点： 一个箭头函数表达式的语法比一个函数表达式更短。
参数（p1 , p2 , … , pN）=> { statements } 函数体
左边的为参数部分，可以为：
多个参数：(p1, p2, …, pN)
一个参数：(p1) 或p1
没有参数：() 或_
右边则为函数体，可以为：
函数体：{statements}
返回值：{return expression;}
函数体只有一条语句：expression
// 设置1个参数
var fn1 = x => x + 2;// 输出结果：6
console.log(fn1(4));
// 设置2个参数
var fn2 = (x, y) => x + y;// 输出结果：3
console.log(fn2(1, 2) );
回调函数
概念： 所谓回调函数指的就是一个函数A作为参数传递给一个函数B，然后在B的函数体内调用函数A。此时，我们称函数A为回调函数。
提示： 匿名函数常用作函数的参数传递，实现回调函数。
应用： 函数体中某部分功能由调用者决定，此时可以使用回调函数。
在JavaScript中还为数组提供了很多利用回调函数实现具体功能的方法。
| 方法名称 | 功能描述 |
|---|---|
| find() | 返回数组中满足回调函数的第一个元素的值，否则返回undefined |
| every() | 测试数组的所有元素是否都通过了回调函数的测试 |
| some() | 测试数组中的某些元素是否通过由回调函数实现的测试 |
| forEach() | 对数组的每个元素执行一次提供的函数 |
| map() | 创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果 |
| reduce() | 对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值 |
| reduceRight() | 接收一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值 |
函数嵌套与递归
函数的嵌套
概念： 在一个函数内部存在另一个函数的声明
特点： 内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，我们称这种链式的查询关系为作用域链
var iBaseNum= 10;
function addNum(iNum1, iNum2) {
function doAdd() {
return iNum1 + iNum2 + iBaseNum;
}
return doAdd();
}
函数的递归调用
概念： 递归调用是函数嵌套调用中一种特殊的调用。它指的是一个函数在其函数体内调用自身的过程，这种函数称为递归函数。
以计算阶乘为例进行演示。
闭包函数
- 在JavaScript中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用"闭包"来实现。
- 所谓"闭包"指的就是有权访问另一函数作用域内变量（局部变量）的函数。它最主要的用途是以下两点：
- 可以在函数外部读取函数内部的变量。
- 可以让变量的值始终保持在内存中。
例：
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();