本文详细介绍了JavaScript的基础知识，包括流程控制的顺序、分支和循环结构，如if、switch和for循环，以及数组的创建、长度和元素操作。接着讲解了函数的使用、参数和返回值，强调了arguments对象的运用。此外，还讨论了作用域、预解析以及对象的创建方式。最后，提到了内置对象如Math和Date的使用，以及简单数据类型和复杂数据类型的区别。
文章目录
一、JavaScript流程控制
- 流程控制：在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
- 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
1.1 顺序结构
- 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。
1.2 分支结构
- 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
1.2.1 if语句
语法结构：
//条件成立执行代码，否则什么都不做
if(条件表达式){
// 执行语句
}
1.2.2 if else语句
//条件成立执行代码，否则什么都不做
if(条件表达式){
// 执行语句1
} else {
// 执行语句2
}
1.2.3 if else if语句
//条件成立执行代码，否则什么都不做
if(条件表达式1){
// 执行语句1
} else if（条件表达式2）{
// 执行语句2
}else{
// 执行语句n
}
1.2.4 三元表达式
条件表达式 ? 表达式1 : 表达式2
- 如果条件表达式结果为真，则返回表达式1的值，否则，则返回表达式2的值
1.2.5 switch语句
- switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行语句n;
}
1.3 循环结构
- 循环目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成做类操作就需要重复执行某些语句
- 在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
1.3.1 for循环
- for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下:
for(初始化变量;条件表达式;操作表达式){
//循环体
}
1.3.2 while循环
- while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while(条件表达式){
//循环体代码
}
1.3.3 do-while循环
- do while先执行一次循环体，再判断条件。如果条件表达式结果为真，则继续执行循环体，否则退出循环
do{
//循环体
}while(条件表达式)
1.3.4 continue、break关键字
- continue关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
- break关键字用于立即跳出整个循环（循环结束)
二、JavaScript数组
- 概念：数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素
2.1 创建数组
（1）利用new创建数组
var 数组名 = new Array() ;
var arr = new Array();
（2）利用数组字面量创建数组
var 数组名 = [] ;
var 数组名 = ['小白','小黑','小红'] ；
2.2 数组的长度
- 使用“
数组名.length”可以访问数组元素的数量(数组长度)。
2.3 数组新增元素
（1）可以通过修改length长度增加数组元素
- length属性是可读写的
- 数组中没有声明的空间默认值为undefined
（2）可以通过修改索引号增加数组元素
三、JavaScript函数
- 函数∶就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
3.1 函数的使用
（1）声明函数
function 函数名() {
//函数体
}
（2）调用函数
函数名();
3.2 函数的参数
3.2.1 形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
- 形参：形式上的参数 函数定义的时候传递的参数 当前并不知道是什么
- 实参：实际上的参数 函数调用的时候传递的参数 实参是传递给形参的
3.2.2 函数形参和实参个数不匹配问题
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多于形参个数 | 只取到形参的个数 |
| 实参个数少于形参个数 | 多的形参定义为undefined，结果为NaN |
注意：在JavaScript中，形参的默认值是undefined
3.3 函数的返回值
- 有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现。
注意：
1、return 语句之后的代码不会被执行
2、return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
3、函数没有return 则返回undefined
3.4 arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push、pop等方法
3.5 函数的两种声明方式
（1）利用函数关键字自定义函数（命名函数）
function fn() {
}
fn();
（2）函数表达式（匿名函数）
var 变量名 = function(){};
变量名();
四、JavaScript作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
- 全局作用域：整个script标签或者是一个单独的js文件
- 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
4.1 全局变量和局部变量
全局变量：在全局作用域下的变量在全局下都可以使用
注意：如果在函数内部没有声明直接赋值的变量也属于全局变量
局部变量：在局部作用域下的变量，在函数内部的变量就是局部变量
注意：函数的形参也可以看作是局部变量
- 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
- 局部变量当我们程序执行完毕就会销毁，比较节约内存资源
五、JavaScript预解析
- JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步∶预解析和代码执行。
- 预解析：js引擎会把js 里面所有的
var还有function提升到当前作用域的最前面 - 预解析分为变量预解析和函数预解析
变量预解析 就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
函数预解析 就是把所有的函数声明提升到当前的作用域最前面，不调用函数
六、JavaScript对象
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
- 属性：事物的特征，在对象中用属性来表示(常用名词)
- 方法：事物的行为，在对象中用方法来表示(常用动词)
6.1 创建对象的三种方式
6.1.1 利用字面量创建对象
对象字面量∶就是花括号
{}里面包含了表达这个具体事物（对象）的属性和方法。
（1）声明对象
- 里面的属性或者方法我们采取键值对的形式
键 属性名:值 属性值 - 多个属性或方法之间用逗号隔开
- 方法冒号后面跟的是匿名函数
var obj = {
uname : 'jack',
age : '18',
sayHi : function () {
console.log('hi~');
}
}
（2）使用对象
- 调用对象的属性我们采取
对象名.属性名
console.log(obj.uname);
- 调用属性还有一种方法
对象名[‘属性名']
console.log(obj['age']);
- 调用对象的方法
对象名.方法名
obj.sayHi();
6.1.2 利用 new Object 创建对象
- 利用等号赋值，添加对象的属性和方法
- 每个属性和方法之间用分号结束
var obj = new Object();
obj.uname = 'jack';
obj.age = 18;
obj.sayHi = function() {
console.log('hi~');
}
6.1.3 利用构造函数创建对象
构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
构造函数的语法结构：
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
var obj = new 构造函数名();
注意：
1、构造函数名首字母要大写
2、构造函数不需要return，就可返回结果
3、调用构造函数，必须使用new
4、属性和方法前面必须添加this
补充：
（1）构造函数和对象
构造函数，如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
创建对象，如new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
（2）new关键字执行的四个步骤
1、在内存中创建一个新的空对象。
2、让 this指向这个新的对象。
3、执行构造函数里面的代码，给这个新对象添加属性和方法。
4、返回这个新对象（所以构造函数里面不需要return )。
6.2 遍历对象属性
使用for…in语句用于对数组或者对象的属性进行循环操作。
for (var k in obj){
console.log(k); //k变量输出，得到的是属性名
console.log(obj[k]); //obj[k] 得到的是属性值
}
七、内置对象
- JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
- 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于JS独有的
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
7.1 查文档
MDN
Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web )的信息，包括HTML、CSS和万维网及HTML5应用的API。
官网：https://developer.mozilla.org/zh-CN/
7.2 Math对象
Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入 -1.5四舍五入取-1
Math.abs() //绝对值
Math.max()/Math.min() //最大 最小值
7.2.1 随机数方法
Math.random()函数返回一个浮点数， 伪随机数在范围为[0 ,1)
案例：得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
console.log(getRandom(1,10));
7.3 日期对象
Date() 日期对象是一个构造函数，必须使用new来调用创建我们的日期对象
- 如果没有提供参数，那么新创建的 Date 对象表示实例化时刻的日期和时间。
- 参数常用的写法：数字型
2019,10,01或者是字符串型'2019-10-1 8:8:8' - 用数字型写法时，月份从0开始
7.3.1 日期格式化
| 方法名 | 说明 |
|---|---|
getFullYear() | 获取当年 |
getMonth() | 获取当月（0-11） |
getDate() | 获取当日 |
getDay() | 获取星期几（周日0 到周六6） |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒钟 |
7.3.2 获取日期总的毫秒形式
Date对象是基于1970年1月1日（世界标准时间）起的毫秒数
（1）通过 valueOf() 和 getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
（2）常用写法
var date1 = +new Date();
console.log(date1);
（3）H5新增方法
console.log(Date.now());
7.4 数组对象
7.4.1 检测是否为数组
（1）instanceof 运算符，可以用来检测是否为数组
var arr = [];
console.log(arr instanceof Array); //结果返回true
（2）Array.isArray(参数)；
7.4.2 添加删除数组元素
| 方法名 | 说明 | 返回值 |
|---|---|---|
push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个参数，并把数组长度减1，无参数，修改原数组 | 返回它删除的元素的值 |
unshift(参数1...) | 向数组的开头添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个参数，数组长度减1，无参数，修改原数组 | 并返回第一个元素的值 |
7.4.3 数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
reverse() | 颠倒数组中元素的顺序，无序数 | 该方法会改变原来的数组，返回新数组 |
sort() | 对数组中的元素进行排序(冒泡排序) | 该方法会改变原来的数组，返回新数组 |
var arr = [13,4,,77,1,7];
arr.sort(function(a,b){
return a-b; //升序的顺序排列
// return b-a; 降序的顺序排列
});
console.log(arr);
7.4.4 获取数组元素索引
| 方法名 | 说明 | 返回值 |
|---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号，不存在则返回 -1 |
lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号，不存在则返回 -1 |
7.4.5 数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
join('分隔符') | 方法用于把数组中的所有元素转换成一个字符串 | 返回一个字符串 |
7.4.6 补充
| 方法名 | 说明 | 返回值 |
|---|---|---|
concat() | 连接两个或多个数组，不影响原数组 | 返回一个新的数组 |
slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组，会影响原数组 |
案例：
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]
7.5 字符串对象
7.5.1 基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法
案例：
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下∶
7.5.2 根据字符返回位置
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
| 方法名 | 说明 |
|---|---|
indexOf('要查找的字符串，开始的位置') | 返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
lastIndexOf() | 从后往前找，只找第一个匹配的 |
7.5.3 根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
charAt(index) | 返回指定位置的字符（index字符串的索引号） | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码（index索引号） | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML5，IE8+支持，和charAt()等效 |
7.5.4 字符串操作方法
| 方法名 | 说明 |
|---|---|
concat(str1,str2,str3...) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
substr(start,length) | 从start位置开始（索引号），length取的个数 |
slice(start,end) | 从start位置开始，截取到end位置，end取不到 |
substring(start,end) | 从start位置开始，截取到end位置，end取不到 基本和slice()相同，但是不接受负值 |
7.5.5 补充方法
| 方法名 | 说明 |
|---|---|
replace('被替换的字符','替换为的字符') | 替换第一个被替换的字符 |
split(‘分隔符’) | 字符串转换为数组，分隔符为字符串分隔符 |
toUpperCase() | 将调用该方法的字符串转为大写形式并返回，如果调用该方法的值不是字符串类型会被强制转换 |
toLowerCase() | 将调用该方法的字符串值转为小写形式，并返回。 |
八、简单数据类型和复杂数据类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
- string , number , boolean , undefined , null
- 引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
- 通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
8.1 复杂类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
