JavaScript 基础学习笔记

一、初始 JavaScript

1、JS 注释

• 使用 // 注释单行代码
• 使用 /* */ 注释多行代码

// 1.单行注释 ctrl + /
/* 2.多行注释 ctrl + shift + / */

2、JS 输入输出语句

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

• 常用的输入输出语句

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户输入信息

// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出信息展示给用户
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');

二、变量

1、变量概述

1）什么是变量

变量：用于存放数据的容器，通过变量名获取数据，甚至可以修改数据（变量就是一个装东西的盒子）

2）变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间

2、变量的使用

变量在使用时分为两步：①、声明变量；②、赋值
声明变量

// 声明变量
var age; // 声明一个名为 age 的变量

• var 是一个JS关键字，用来声明变量（variable）。使用该关键字声明变量后，计算机会自动为变量分配内存空间
• age 是程序员定义的变量名，通过变量名来访问内存中分配的空间

3、变量的初始化

变量的初始化：声明一个变量并赋值

var age = 18; //声明变量同时赋值为18

4、变量的语法扩展

1）更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

var age = 18;
age = 81;	// 最后的结果就是81，因为18被覆盖掉了

2）同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量之间使用英文逗号隔开

var age = 10, name = 'yixin', sex = 1;

3）声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明 不赋值	undefined
console.log(age);	不声明 不赋值 直接使用	报错
age = 10;console.log(age);	不声明 只赋值	10

5、变量命名规范

• 由字母（A-Z a-z）、数字（0-9）、下划线（_）、美元符号（$）组成，如：usrAge, num01, _name
• 严格区分大小写。var app;和var App; 是两个变量
• 不能以数字开头。18age 是错误的
• 不能是关键字、保留字。例如：var、for、while
• 变量名必须有意义
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

三、数据类型

1、数据类型简介

1）为什么需要数据类型

在计算机中，不同的数据所占用的存储空间是不同的。
数据类型就是数据的类别型号，便于把数据分成所需内存大小不同的数据，充分利用存储空间。

2）变量的数据类型

JavaScript是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行的过程中，类型会被自动确定。

var age = 10;	// 这是一个数字型
var areYouOk = 'yes';	// 这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量的数据类型来判断的，运行完毕后，变量的数据类型就确定了。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x 为数字型
var x = "Bill"; // x 为字符串型

3）数据类型的分类

JS把数据类型分为两类：

• 简单数据类型（Number，String，Boolean，Undefined，Null）
• 复杂数据类型（object）

2、简单数据类型

1）简单数据类型（基本数据类型）

JavaScript中的简单数据类型及其说明：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如"张三"，字符串都带引号	“”
Undefined	var a;声明了变量 a 但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量 a 为空值	null

数字型 Number

a、数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。
在JS中八进制前面加 0，十六进制前面加 0x

// 1.八进制数字序列范围：0 ~ 7
var num1 = 07;	// 对应十进制的7
var num2 = 023;	// 对应十进制的19
var num3 = 010;	// 对应十进制的8
// 2.十六进制数字序列范围：0 ~ 9 以及 A ~ F
var num = 0xA;

b、数字型三个特殊值

alert(Infinity);	// Infinity
alert(-Infinity);	// -Infinity
alert(NaN);			// NaN

• Infinity，代表无穷大，大于任何数值
• -Infinity，代表无穷小，小于任何数值
• NaN，Not a number，代表一个非数值

c、isNaN

用来判断一个变量是否为非数字类型，返回true或者false

var userAge = 21;
var isOk = isNaN(userAge);
console.log(isOk);	// false，21不是一个非数字
var userName = "andy";
console.log(isNaN(userName));	// true，"andy"是一个非数字

字符串型 String

a、字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

var strMsg = '我是"高富帅"程序员';	// 可以用''包含""
var strMsg2 = "我是'高富帅'程序员"	// 可以用""包含''
// 常见错误
var badQuotes = 'What on earth?";	// 报错，不能单双引号搭配

b、字符串转义符

转义符都是 \ 开头的，常见的转移符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\	斜杠 \
’	’ 单引号
"	" 双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

c、字符串长度

字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length属性可以获取整个字符串的长度。

// 1.检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.length); // 15

d、字符串拼接

• 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串
  口诀：数值相加，字符相接

// 2.字符串的拼接 + 
console.log('沙漠' + '骆驼');	//'沙漠骆驼'
console.log('pink' + true);		//'pinktrue'
console.log(12 + 12);			//24
console.log('12' + 12);			//'1212'

e、字符串拼接加强

console.log('pink老师' + 18);	// 只要有字符就会相连
var age = 18;
// console.log('pink老师age岁啦'); // 不能这样写
console.log('pink老师' + age + '岁啦'); // 正确写法

布尔型 Boolean

布尔类型有两个值：true 和 false，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候，true 的值为 1，false 的值为 0。

console.log(true + 1);	// 2
console.log(false + 1);	// 1

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);			// undefined
console.log('你好' + variable);	// 你好undefined
console.log(11 + variable);		// NaN
console.log(true + variable);	// NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari);	// 你好null
console.log(11 + vari);		// 11
console.log(true + vari);	// 1

3、获取变量数据类型

1）获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

2）字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

• 数字字面量：8，9，10
• 字符串字面量：‘黑马程序员’，“大前端”
• 布尔字面量：true，false

4、数据类型转换

1）什么是数据类型转换

把一种数据类型的变量转换成另一种数据类型

• 通常实现3种方式的转换：
  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

2）转换为字符串

方式	说明	案例
toString()	转换成字符串	var num = 1; alert(num.toString());
String()	转换成字符串	var num = 1; alert(String(num));
加号拼接字符串（隐式转换）	和字符串拼接的 结果都是字符串	var num = 1; alert(num + “我是字符串”);

3）转换为数字型（重要）

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换成数值型	Number(‘12’)
js隐式转换（- * /）	利用算术运算隐式转换为数值型	‘12’ - 0

4）转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

• 代表空、否定的值会被转换为 false，如 ‘’、0、NaN、null、undefined
• 其余值都会被转换为 true

console.log(Boolean(''));	//false
console.log(Boolean(''));	//true

5、练习

依次询问并获取用户的姓名、年龄、性别，并打印用户信息

var userName = prompt("请输入您的姓名：");
var userAge = prompt("请输入您的年龄：");
var userGender = prompt("请输入您的性别：");
alert("用户信息表\n姓名：" + userName + "\n年龄："+ userAge +"\n性别：" + userGender); 

四、运算符

• 运算符（operator）也称为操作符，用于实现赋值、比较和执行算数运算等功能的符号。

• JavaScript中常用的运算符有：

  • 算术运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

1、算术运算符

1）算术运算符概述

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除法的余数（9 % 2 = 1）

2）浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精度不如整数
注：不要直接判断两个浮点数是否相等！

var result = 0.1 + 0.2;	// 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001

3）表达式和返回值

表达式：由数字、运算符、变量等组成的式子

console.log(1 + 1); // 2 就是返回值

2、递增和递减运算符

反复给数字变量添加或减去1，可以使用递增（++）和递减（- -）运算符来完成，递增（++）和递减（- -）放在变量前面时，称为前置递增（递减）运算符；反之，称为后置递增（递减）运算符

• 前置递增运算符
  ++num 前置递增，自加1，类似于 num = num + 1
  注：先自加，后返回值
• 后置递增运算符
  num++ 后置递增，自加1，类似于 num = num + 1
  注：先返回原值，后自加

3、比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号	2 >= 2	true
<=	小于等于号	3 <= 2	false
==	判等号（默认转换数据类型）	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等 要求值和数据类型都一致	37 === ‘37’	false

小结

符号	作用	用法
=	赋值	把右边赋给左边
==	判断	判断两边是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

consolo.log(18 == '18');	// true
console.log(18 === '18');	// false

4、逻辑运算符

1）逻辑运算符概述

概念：用来进行布尔值运算的运算符，其返回值也是布尔值

逻辑运算符	说明	案例
&&	逻辑与，简称与 and	true && false
||	逻辑或，简称或 or	true || false
!	逻辑非，简称非 not	!true

2）短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

• 逻辑与

  • 语法：表达式1 && 表达式2
  • 如果表达式1的值为真，则返回表达式2
  • 如果表达式1的值为假，则返回表达式1

• 逻辑或

  • 语法：表达式1 || 表达式2
  • 如果表达式1的值为真，则返回表达式1
  • 如果表达式1的值为假，则返回表达式2

5、赋值运算符

概念：用来把数据赋值给变量的运算符

赋值运算符	说明	案例
=	直接赋值	var userName = ‘我是值’;
+=、-=	加、减一个数后再赋值	var age = 10; age += 5; // 15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age *= 5; // 10

6、运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算术运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	,

五、流程控制

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，三种结构代表三种代码执行的顺序

顺序流程控制
程序按照代码的先后顺序，依次执行

1、分支流程控制 if 语句

分支语句
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码

1）if 语句

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
	// 条件成立执行的代码语句
}

2）if else 语句

// 条件成立，执行 if 里面的代码，否则执行 else 里面的代码
if (条件表达式) {
	// 条件成立执行的代码
} else {
	// 条件不成立执行的代码
}

3）if else if 语句（多分支语句）

// 适合于检查多重条件
if (条件表达式1) {
	// 语句1;
} else if (条件表达式2) {
	// 语句2;
} else if (条件表达式3) {
	// 语句3;
} else {
	// 上述条件都不成立执行此处代码
}

2、三元运算符

// 格式：条件表达式 ? 表达式1 : 表达式2
// 执行思路：如果条件表达式的结果为真，则返回表达式1的值；反之，返回表达式2的值
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);	// 是的

3、分支流程控制 switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch 语句。

switch (表达式) {
	case value1:
		// 表达式 等于 value1 时要执行的代码
		break;
	case value2:
		// 表达式 等于 value2 时要执行的代码
		break;
	default:
		// 表达式 不等于任何一个 value 时要执行的代码
}

switch 语句和 if else if 语句的区别

1. 一般情况下，它们两个语句可以相互替换
2. switch…case 语句通常处理 case 为比较确定值的情况，而 if…else… 语句更加灵活，常用于范围判断（大于、等于某个范围）
3. switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而 if…else 语句有几种条件，就得判断多少次。
4. 当分支比较少，if…else 语句的执行效率比 switch 语句高
5. 当分支比较多时，switch 语句的执行效率比较高，而且结构更清晰

六、循环

1、循环的目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

2、for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决与循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

for 循环主要用于把某些代码循环若干次，通常跟计数有关，其语法结构如下：

for (初始化变量; 条件表达式; 操作表达式) {
	// 循环体
}

练习
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩

var num = parseInt(prompt("请输入班级的人数："));
var score = 0;
var sum = 0; 
var average = 0;
for (var i = 1; i <= num; i++) {
    score = parseInt(prompt("请输入第"+ i +"个同学的成绩："));
    sum += score;
}
average = sum / num;
alert("该班级总的成绩为：" + sum + "\n" + "平均成绩为：" + average);

3、双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句为双重for循环。
语法结构如下：

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
	for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
		// 执行语句;
	}
}

练习1：打印n行n列的星星
要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星

var str = '';
var rows = prompt('请输入星星的行数：');
var cols = prompt('请输入星星的列数：');
for (var i = 1; i <= rows; i++) {
    for (var j = 1; j <= cols; j++) {
        str = str + '★';
    }
    str += '\n';
}
console.log(str);

练习2：打印倒三角形

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= 10 - (i - 1); j++) {
        str += '★';
    }
    str += '\n';
}
console.log(str);

练习3：打印正三角形

var str = '';
for (var i = 1; i <= 10; i++) {
    for(var j = 10 - i + 1; j <= 10; j++) {
        str += '★'; 
    }
    str += '\n';
}
console.log(str);

练习4：打印九九乘法表

var str = '';
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str += j + '×' + i + '=' + j * i + '\t';
    }
    str += '\n';
}
console.log(str);

七、数组

1、数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

2、创建数组

• 利用new创建数组

  var 数组名 = new Array();
  var arr = new Array();  // 创建一个新的空数组
  

• 利用数组字面量创建数组

  // 1、使用数组字面量的方式创建空的数组
  var 数组名 = [];
  // 2、使用数组字面量方式创建初始值的数组
  var 数组名 = ['小白', '小黑', '大黄', '瑞奇'];
  

3、获取数组元素

通过索引获取数组元素，方式：数组名[索引号]
索引（下标）：用来访问数组元素的序号（数组下标从0开始）

// 定义数组
var arrStus = [1, 2, 3];
// 获取数组中的第2个元素  
alert(arrStus[1]);

练习：定义一个数组，里面存放星期一、星期二……直到星期日（共七天），在控制台输出：星期日

var dayStr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
console.log(dayStr[6]);

4、遍历数组

遍历：把数组中的每个元素从头到尾访问一次

var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
    console.log(arr[i]);
}

获取数组的长度，方式：数组名.length

练习1：求数组[2, 6, 1, 7, 4]里面所有元素的和以及平均值

var arr = [2, 6, 1, 7, 4];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
}
console.log('元素总和为：' + sum);
console.log('平均值为：' + sum / arr.length);

练习2：求数组[2, 6, 1, 77, 52, 25, 7, 100]的最大值

var arr = [2, 6, 1, 77, 52, 25, 7, 100];
var max = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
    }
}
console.log('数组中的最大值为：' + max);

练习3：数组转换为分割字符串
要求：将数组[‘red’, ‘green’, ‘blue’, ‘pink’]转换成字符串，并且用|或其他符号分割
输出：'red|green|blue|pink|'

var arr = ['red', 'green', 'blue', 'pink'];
var temp = '';
for (var i = 0; i < arr.length; i++) {
    temp += arr[i] + '|';
}
console.log(temp);

5、数组中新增元素

通过修改length长度新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);  // undefined

通过修改数组索引新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'yellow';
console.log(arr[4]);  // 'yellow'
arr[0] = 'new_red'    // 替换原来的元素
console.log(arr[0]);  // 'new_red'

练习1：新建一个数组，里面存放10个整数（1~10）

var arr = [];
for (var i = 0; i < 10; i++) {
    arr[i] = i + 1;
}
console.log(arr);

练习2：筛选数组
将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7]中大于等于10的元素选出来，放入新数组

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7];
var new_arr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        new_arr[j] = arr[i];
        j++; 
    }
}
console.log(new_arr);

6、练习

练习1：删除指定数组元素
要求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7]中的0去掉后，形成一个不包含0的新数组

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7];
var new_arr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
        new_arr[new_arr.length] = arr[i]; 
    }
}
console.log(new_arr);

练习2：翻转数组
要求：将数组[‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’]的内容反过来存放
输出：[‘purple’, ‘pink’, ‘blue’, ‘green’, ‘red’]

var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var new_arr = [];
for (var i = arr.length - 1; i >= 0; i--) {
        new_arr[new_arr.length] = arr[i]; 
}
console.log(new_arr);

练习3：数组排序（冒泡排序）
冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）

var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.lenth - 1; i++) {
    for (var j = 0; j <= arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

八、函数

1、函数的概念

函数：function，是被设计为执行特定任务的代码块
说明：函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

2、函数的使用

函数在使用时分为两步：声明函数和调用函数

• 函数的声明语法

  function 函数名() {
      函数体
  }
  

• 例子：

  function sayHi() {
      document.write('hai~~');
  }
  

• 函数名命名规范
  • 和变量命名基本一致
  • 尽量小驼峰式命名法
  • 前缀应该为动词
  • 命名建议：常用动词约定

  function getName() {}
  function addSquares() {}
  

  动词	含义
  can	判断是否可执行某个动作
  has	判断是否含某个值
  is	判断是否为某个值
  get	获取某个值
  set	设置某个值
  load	加载某些数据

• 函数的调用语法

  // 函数调用，这些函数体内的代码逻辑会被执行
  函数名();
  

  注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数

练习：
利用函数计算1-100之间的累加和

// 1.声明函数
function getSum() {
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i;
    }
    console.log(sum);
}
// 2.调用函数
getSum();

3、函数的参数

1）形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10），实参可以理解为是给这个变量赋值

2）函数调用

• 声明语法

  function 函数名(参数列表) {
      函数体
  }
  

• 参数列表

  • 传入数据列表
  • 声明这个函数需要传入几个数据
  • 多个数据用逗号隔开

• 例

  // 单个参数
  function getSquare(num1) {
      document.write(num1 * num1);
  }
  // 多个参数
  function getSum(num1, num2) {
      document.write(num1 + num2);
  }
  

3）形参和实参个数不匹配问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数大于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

4、函数的返回值

• 当函数需要返回数据出去时，用return关键字

• 语法

  function 函数名() {
      return 需要返回的结果;
  }
  

• 例子

  function getSum(x, y) {
    return x + y;
  }
  let num = getSum(10, 30);
  document.write(num);
  

• 注意：

  1. 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
  2. return只能返回一个值
  3. 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
  4. return会立即结束当前函数
  5. 函数可以没有 return，这种情况函数默认返回值为 undefined

练习
1、利用函数求任意两个数的最大值

function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;
}
console.log(getMax(12, 45));
console.log(getMax(323, 67));

2、求数组[5, 2, 99, 101, 67, 77, 110]中的最大数值。

var array = [5, 2, 99, 101, 67, 77, 110];
function getArrMax(arr) {
    var max = arr[0];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}
console.log(getArrMax(array));

5、arguments的使用

• 当我们不确定有多少个参数传递的时候，可以用arguments来获取。
• 在JavaScript中，arguments实际上它是当前函数的一个内置对象。
• 所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
• arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的push()/pop()等方法

练习：利用函数求任意个数的最大值

function getMax() {
    var max = arguments[0];
    for(var i = 1; i < arguments.length; i++) {
        if(arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(1, 2, 3));
console.log(getMax(1, 2, 3, 4, 6));
console.log(getMax(1, 2, 3, 6, 0));
console.log(getMax(1, 2, 3, 9, 1, 100));

6、匿名函数

将匿名函数赋值给一个变量并且通过变量名称进行调用，我们将这个称为函数表达式

// 语法
let fn = function() {
	// 函数体
}
// 调用
fn();

立即执行函数：避免全局变量之间的污染

// 方式一
(function () { console.log(11) })();
// 方式二
(function () { console.log(11) }());

7、练习

利用函数封装方式，翻转任意一个数组

function reverseArr(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}

var testArr = ['red', 'green', 'blue', 'pink', 'purple'];
console.log(reverseArr(testArr));

利用函数封装方式，对数组排序——冒泡排序

function sort(arr) {
    var temp = [];
    for (var i = 0; i < arr.length - 1; i++) {
        for(var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

console.log(sort([1, 4, 2, 76, 23, 34, 12]));
console.log(sort([12, 24, 2, 176, 43, 94, 132]));

输入一个年份，判断是否为闰年（闰年：能被4整除并且不能被100整除，或者能被400整除）

function isLeapYear(year) {
    var flag = year + '年不是闰年';
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        flag = year + '年是闰年';
    }
    return flag;
}
var year = parseInt(prompt('请输入年份'));
alert(isLeapYear(year));

用户输入年份，输出当前年份2月份的天数（如果是闰年，则2月份是29天，如果是平年，则2月份是28天）

function isLeapYear(year) {
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        flag = true;
    }
    return flag;
}
function backDay(year) {
    if(isLeapYear(year)) {
        alert('当前年份是闰年，2月份有29天');
    } else {
        alert('当前年份是平年，2月份有28天');
    }
}
var year = parseInt(prompt('请输入年份：'));
backDay(year);

九、作用域

1、作用域

• 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
• 作用域的使用提高了程序逻辑的局域性，增强了程序的可靠性，减少了名字冲突。
  

2、变量的作用域

• 在JavaScript中，根据作用域的不同，变量可以分为
  
• 在函数内部或者块级作用域内部，没有声明，直接赋值的变量属于全局变量函数内部的
• 形参可以看做是局部变量

3、作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

十、预解析

• JavaScript代码是由浏览器中的JavaScript解析器来执行的。
• JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行
• 预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
• 代码执行：按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
• 函数提升：把所有的函数声明提升到当前作用域的最前面，不调用函数

// 结果为undefined
var num = 10;
fun();
function fun() {
	console.log(num);
	var num = 20;
}
// 相当于执行了以下操作
var num;
function fun() {
	console.log(num);
	var num = 20;
}
num = 10;
fun();

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    // 相当于 var a = 9;b = 9; c = 9; b和c直接赋值，没有var声明当作全局变量
    // 集体声明：var a = 9, b = 9, c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

十一、对象

1、对象

• 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数值，函数等。
• 对象由属性和方法组成的。
• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

2、创建对象的三种方式

1）利用字面量创建对象

对象字面量：花括号{}里面包含了表达这个具体事物（对象）的属性和方法。

// 创建对象
// var obj = {}; // 创建了一个空的对象
var obj = {
    uname: 'yixin',
    age: 18,
    sex: '男',
    sayHi: function() {
        console.log('hi~');
    }
}
// 使用对象
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

• 创建对象：
  • 对象里面的属性或者方法采用键值对的形式
  • 多个属性或者方法中间用逗号隔开
  • 方法冒号后面跟的是一个匿名函数
• 使用对象：
  • 调用对象的属性：
    • 方式一：对象名.属性名
    • 方式二：对象名['属性名']
  • 调用对象的方法：对象名.方法名()

2）利用new object 创建对象

3）利用构造函数创建对象

3、new关键字

4、遍历对象属性