JavaScript学习笔记

Linstars2025-01-072025-04-18

JavaScript学习笔记

浏览器执行JS步骤

渲染引擎：用来解析HTML和CSS,俗称内核，比如chrome的浏览器的bink，老版本的webkt
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome的V8

JS的组成

JavaScript语法
DOM:页面文档对象模型
BOM:浏览器对象模型

JS的书写位置

直接书写在元素的内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
</head>
<body>
    <!-- 行内JS方法，写道元素内部 -->
     <input type="button" value="点击我" onclick="alert('铛铛铛铛~我是一个弹窗')">
</body>
</html>

内嵌方法写在头部,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
    <!-- 内嵌方法,写在这里-->
     <script>
        alert('铛铛铛铛~我是一个弹窗');
     </script>
</head>
<body>
</body>
</html>

需要先新建一个.js文件，文件内容为

直接写这一句就可以了

1	alter('这是一个弹窗')

然后在html文件中直接引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
     <!-- 外部JS -->
     <script src="filename.js"></script>
</head>
<body>
</body>
</html>

顺带一提，JavaScript中代码行尾不需要加;分号，除非一行要写多个语句需要加分号，例如

xxxxxxxxxx

html

注释

在JavaScript语法中，注释还是以html的注释方法一样的

单行注释

//注释内容

多行注释

1
2
3

/*
注释内容
*/

输入输出

<head>
    <title>输入输出语句</title>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄');
    </script>
</head>
<body>
</body>
</html>

输出结果：

<head>
    <title>输入输出语句</title>
    <script>
        //alter弹出警示框
        alert('这是弹出框');
    </script>
</head>
<body>
</body>
</html>

弹出框的结果

<head>
    <title>输入输出语句</title>
    <script>
        //输出控制台 是给程序员看到的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
</body>
</html>

数据类型

javascript的数据类型是动态的，同时也意味着相同的变量可以用作不同的类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

typeof可以用来判断数据类型

var x=6;    //为数字型，这是官方叫法
var z='嗨' //为字符串型
//例如
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

极大或极小的数字可以通过科学（指数）计数法来书写：

1 2	var y=123e5; // 12300000 var z=123e-5; // 0.00123

isNaN可以用来判断非数字，并且返回一个值，注意一定要区分大小写！！

1	conosle.log(isNaN(15));

返回值false

字符串

定义变量，字符串需要用单引号或双引号包裹着

1	var a = '我是字符串'

length

length可以用来检测字符串的长度

1 2	var str ='我是\n字符串' console.log(str.length) //输出结果：6

字符串转义符

类似html里面的特殊字符，转义符都是以\开头的，

常用的转义符

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

字符串的拼接

1 2	console.log('这里是字符串1'+'字符串2') console.log('1+1='+(1+1))

1输出结果：这里是字符串1字符串2

2输出结果：1+1=2

Boolean

布尔型boolean是可以参与计算的，即true为1，false为0，这样在后期进行判断的时候就会很方便

例如：

var bool1=true
var bool2=false
console.log(bool1+1)
console.log(bool2+1)

输出结果

1输出结果：2

2输出结果：1

undefined

一个未定义的变量未赋值，就是undefined未定义数据类型

如果手动给一个变量值为undefined，那么他也是未定义的数据类型

例如

1	var a = undefined

输出也是undefined

扩展：

1 2	console.log(a+'pink') //输出结果是字符串拼接undpinkdefine console.log(a+1) //NaN undefined和数字相加最后的结果是NaN 表示 not a number不是一个数字

null

空值null

1
2
3

var c=null
console.log(c+'pink')//输出结果为nullpink
console.log(c+1)    // 空置加1结果还是1

数据类型的转换

转为字符串型

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

//转为字符串型    toString
var num=10
var str=num.toString()
console.log(num)
console.log(str)
console.log('我是num'+'变量，用typeof的返回值为'+typeof(num)+'型')
console.log('我是str'+'变量，用typeof的返回值为'+typeof(str)+'型')
//强制转换      String
var num2=8
console.log('我是String方法更改的变量结果，用sypeof检测类型为'+typeof(String(num2))+'型')
//加号拼接转换
console.log(typeof('加号拼接转换'+ num))        //结果string

点击查看控制台输出结果

转换为数字型

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

代码

//数字类型的转换，将字符型转换为数字型
//parseInt 方法
var age=prompt('请输入你的年龄')
console.log(parseInt(age))
console.log(parseInt('3.14'))       //取整，结果为3
console.log(parseInt('120px'))//parseInt功能强大，可以将px像素单位进行转换，会自动将后面的字母去掉
console.log(parseInt('rem120px'))       //结果是NaN，无法转换，主要功能是将数字型，转换为数值型，但是一个为字母就会报错
//parseFloat()  可以将字符型转换为数字型 可以取到小数/浮点数 部分
console.log(parseFloat('3.14'))
console.log(parseInt('120px'))  //120 会去掉px这个单位 和上面功能一样
console.log(parseFloat('rem120px'))  //NaN
//利用Number变量
var str='123'
console.log(Number(str))
console.log(Number('12'))
//利用算术运算 - * / 隐式转换
console.log('16'- 0)
console.log('2'* 2)

转换为布尔型

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

代表空、否定的值会被转换为false，如”、0、NaN、null、nudefined
其余值都会被转换为true

如：

console.log(Boolean(''));	//false
console.log(Boolean(0));	//false
console.log(Boolean(NaN));	//false
console.log(Boolean(null));	//false
console.log(Boolean(undefined));	//false
console.log(Boolean('小白'));	//true
console.log(Boolean(12));	//true
console.log(Boolean('12'));	//true
console.log(Boolean('你好吗'));	//true

运算符与表达式

运算符的优先级

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

if语句

if 的语法结构

1
2
3

if (条件表达式) {
    // 执行语句
}

执行思路如果 if 里面的条件表达式结果为真 true 则执行大括号里面的执行语句

// 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
if (3 < 5) {
    alert('沙漠骆驼');
}

if双分支语句

//  语法结构  if 如果  else 否则
 if (条件表达式) {
     // 执行语句1
 } else {
     // 执行语句2 
 }

执行思路如果表达式结果为真那么执行语句1 否则执行语句2

var age = prompt('请输入您的年龄:');
if (age >= 18) {
    alert('我想带你去网吧偷耳机');
} else {
    alert('滚， 回家做作业去');
}

多分支语句

就是利用多个条件来选择不同的语句执行得到不同的结果多选1 的过程

if else if语句是多分支语句

if (条件表达式1) {
    // 语句1;
} else if (条件表达式2) {
    // 语句2;
} else if (条件表达式3) {
    // 语句3;
} else {
    // 最后的语句;
}

执行思路
如果条件表达式1 满足就执行语句1 执行完毕后，退出整个if 分支语句
如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
如果上面的所有条件表达式都不成立，则执行else 里面的语句

注意

多分支语句还是多选1 最后只能有一个语句执行
else if 里面的条件理论上是可以任意多个的
else if 中间有个空格了

判断成绩案例

    //  伪代码       按照从大到小判断的思路
    // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
    // 使用多分支 if else if 语句来分别判断输出不同的值
    var score = prompt('请您输入分数:');
    if (score >= 90) {
        alert('宝贝，你是我的骄傲');
    } else if (score >= 80) {
        alert('宝贝，你已经很出色了');
    } else if (score >= 70) {
        alert('你要继续加油喽');
    } else if (score >= 60) {
        alert('孩子，你很危险');
    } else {
        alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
    }

例题判断闰年

算法：

能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0

var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('您输入的年份是闰年');
} else {
    alert('您输入的年份是平年');
}

三元表达式

有三元运算符组成的式子我们称为三元表达式
++num 3 + 5 ? :
语法结构
条件表达式？表达式1 ：表达式2
执行思路
如果条件表达式结果为真则返回表达式1 的值如果条件表达式结果为假则返回表达式2 的值

var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
console.log(result);
 if (num > 5) {
     result = '是的';
 } else {
     result = '不是的';
 }

案例数字补零

用户输入0~59之间的一个数字

如果数字小于10，则在这个数字前面补0,（加0 拼接）否则不做操作

用一个变量接受这个返回值，输出

var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式   表达式 ？ 表达式1 ：表达式2 
var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量
alert(result);

swich语句

switch 语句也是多分支语句也可以实现多选1

语法结构

switch 转换、开关 case 小例子或者选项的意思

switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
        ...
        default:
            执行最后的语句;
}

执行思路

利用我们的表达式的值和 case 后面的选项值相匹配如果匹配上，就执行该case 里面的语句如果都没有匹配上，那么执行 default里面的语句

代码验证

switch (8) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }

switch注意事项

我们开发里面表达式我们经常写成变量
我们num 的值和 case 里面的值相匹配的时候是全等必须是值和数据类型一致才可以 num === 1
break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case

var num = 1;
switch (num) {
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
        break;
}

查询水果案例

//         弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
// 将这个变量作为 switch 括号里面的表达式。
// case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
// 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
// 将 default 设置为没有此水果。
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
    case '苹果':
        alert('苹果的价格是 3.5/斤');
        break;
    case '榴莲':
        alert('榴莲的价格是 35/斤');
        break;
    default:
        alert('没有此水果');
}

循环

for循环

for 重复执行某些代码，通常跟计数有关系

for 语法结构

1
2
3

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

初始化变量就是用var 声明的一个普通变量，通常用于作为计数器使用

条件表达式就是用来决定每一次循环是否继续执行就是终止的条件

操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减）

代码体验

我们重复打印100遍你好

1
2
3

for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }

while循环

while 循环语法结构

while 当…的时候

1
2
3

while (条件表达式) {
    // 循环体
}

执行思路

当条件表达式结果为true 则执行循环体否则退出循环

代码验证

var num = 1;
        while (num <= 100) {
            console.log('好啊有');
            num++;
        }

里面应该也有计数器初始化变量，应该也有操作表达式完成计数器的更新防止死循环

do while循环

do while 循环语法结构

1
2
3

do {
    // 循环体
} while (条件表达式)

执行思路跟while不同的地方在于 do while 先执行一次循环体在判断条件如果条件表达式结果为真，则继续执行循环体，否则退出循环，do while 循环体至少执行一次
代码验证

var i = 1;
do {
    console.log('how are you?');
    i++;
} while (i <= 100)

do while循环案例

// 1. 打印人的一生，从1岁到100岁
var i = 1;
do {
    console.log('这个人今年' + i + '岁了');
    i++;
} while (i <= 100)
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100)
console.log(sum);

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
do {
    var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');

continue

continue 关键字退出本次（当前次的循环）继续执行剩余次数循环

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
    }
    console.log('我正在吃第' + i + '个包子');

}

求1~100 之间，除了能被7整除之外的整数和

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);

break

// break 退出整个循环
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '个包子');
}

数组

数组(Array) ：就是一组数据的集合存储在单个变量下的优雅方式

利用new 创建数组

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

利用数组字面量创建数组 []

var arr = []; // 也可以创建一个空的数组
var arr1 = [1, 2, 'pink老师', true];	//数组里面可以放任意类型的数据，需要用逗号隔开
console.log(arr1);
console.log(arr1[2]); // pink老师
console.log(arr1[3]); // true
var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined

我们数组里面的数据一定用逗号分隔
数组里面的数据比如1,2，我们称为数组元素
获取数组元素格式数组名[索引号] 索引号从 0开始

遍历数组

遍历数组：就是把数组的元素从头到尾访问一次

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

因为我们的数组索引号从0开始，所以 i 必须从 0开始 i < 3
输出的时候 arr[i] i 计数器当索引号来用

数组长度

数组长度数组名.length

数组的长度是元素个数不要跟索引号混淆
arr.length 动态监测数组元素的个数

var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
for (var i = 0; i < 7; i++) {
    console.log(arr[i]);
}
console.log(arr.length);
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

计算数组的和以及平均值

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

声明一个求和变量 sum。
遍历这个数组，把里面每个数组元素加到 sum 里面。
用求和变量 sum 除以数组的长度就可以得到数组的平均值。

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
}
average = sum / arr.length;
console.log(sum, average); // 想要输出多个变量，用逗号分隔即可

求数组最大值

求数组[2,6,1,77,52,25,7]中的最大值

声明一个保存最大元素的变量 max。
默认最大值可以取数组中的第一个元素。
遍历这个数组，把里面每个数组元素和 max 相比较。
如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
最后输出这个 max

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

数组转化为字符串

需求：将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分割

需要一个新变量用于存放转换完的字符串 str。
遍历原来的数组，分别把里面数据取出来，加到字符串里面。
同时在后面多加一个分隔符

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

新增数组元素

新增数组元素修改length长度

// 1. 新增数组元素 修改length长度 
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

// 2. 新增数组元素 修改索引号 追加数组元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
arr1[0] = 'yellow'; // 这里是替换原来的数组元素
console.log(arr1);
arr1 = '有点意思';
console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了

数组存放十个值

新建一个数组，里面存放10个整数（ 1~10）
核心原理：使用循环来追加数组。

声明一个空数组 arr。
循环中的计数器 i 可以作为数组元素存入。
由于数组的索引号是从0开始的，因此计数器从 0 开始更合适，存入的数组元素要+1。

var arr = [];
for (var i = 0; i < 100; i++) {
    // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
    arr[i] = i + 1;
}
console.log(arr);

筛选数组

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

声明一个新的数组用于存放新数据newArr。
遍历原来的旧数组，找出大于等于 10 的元素。
依次追加给新数组 newArr。

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[j] = arr[i];
        j++;
    }
}
console.log(newArr);

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 刚开始 newArr.length 就是 0
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

数组去重

将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。

需要一个新数组用于存放筛选之后的数据。
遍历原来的数组，把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。
新数组里面的个数，用 length 不断累加。

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

翻转数组

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放

声明一个新数组 newArr
把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
我们采取递减的方式 i--

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

交换两个变量

var num1 = 'pink';
var num2 = 'yellow';
var temp;
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1, num2);

冒泡排序

// var arr = [5, 4, 3, 2, 1];
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 
    for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值 前一个和后面一个数组元素相比较
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }

    }
}
console.log(arr);

函数

函数使用

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

声明函数

1
2
3

function 函数名() {
    // 函数体
}

1
2
3

function sayHi() {
    console.log('hi~~');
}

function 声明函数的关键字全部小写
函数是做某件事情，函数名一般是动词 sayHi
函数不调用自己不执行

调用函数

1 2	// 函数名(); sayHi();

调用函数的时候千万不要忘记加小括号

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

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

带参数的函数

函数可以重复相同的代码

function cook() {
             console.log('酸辣土豆丝');
         }
        cook();
        cook();

我们可以利用函数的参数实现函数重复不同的代码

1
2
3

function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）
        // }
    函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）

形参和实参的执行过程

function cook(aru) { // 形参是接受实参的  aru = '酸辣土豆丝' 形参类似于一个变量
    console.log(aru);
}
cook('酸辣土豆丝');
cook('大肘子');

函数的参数可以有，也可以没有个数不限

利用函数求任意两个数的和

function getSum(num1, num2) {
    console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);

利用函数求任意两个数之间的和

function getSums(start, end) {
    var sum = 0;
    for (var i = start; i <= end; i++) {
        sum += i;
    }
    console.log(sum);
}
getSums(1, 100);
getSums(1, 10);

注意点

多个参数之间用逗号隔开
形参可以看做是不用声明的变量

函数形参实参个数匹配

1
2
3

function getSum(num1, num2) {
    console.log(num1 + num2);
}

如果实参的个数和形参的个数一致则正常输出结果getSum(1, 2);

如果实参的个数多于形参的个数会取到形参的个数getSum(1, 2, 3);

如果实参的个数小于形参的个数多于的形参定义为undefined 最终的结果就是 NaN

形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值结果就是undefined

getSum(1); // NaN

建议：我们尽量让实参的个数和形参相匹配

函数的返回值

函数是做某件事或者实现某种功能

function cook(aru) {
    console.log(aru);
}
cook('大肘子');

函数的返回值格式

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

我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
只要函数遇到return 就把后面的结果返回给函数的调用者函数名() = return后面的结果

代码验证

function getResult() {
    return 666;
}
getResult(); // getResult()   = 666
console.log(getResult());

求任意两个数的和

function getSum(num1, num2) {
    return num1 + num2;
}
console.log(getSum(1, 2));

求两个数最大值

利用函数求两个数的最大值

function getMax(num1, num2) {
    // if (num1 > num2) {
    //     return num1;
    // } else {
    //     return num2;
    // }
    return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));
console.log(getMax(11, 3));

求数组中最大值

利用函数求数组 [5,2,99,101,67,77] 中的最大数值

function getArrMax(arr) { // arr 接受一个数组  arr =  [5,2,99,101,67,77]
    var max = arr[0];
    for (var i = 1; i <= arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}
// getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
// 在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
// var re = getArrMax([5, 2, 99, 101, 67, 77]);
var re = getArrMax([3, 77, 44, 99, 143]);
console.log(re);

arguments 的使用

只有函数才有 arguments对象而且是每个函数都内置好了这个arguments

伪数组并不是真正意义上的数组

具有数组的 length 属性
按照索引的方式进行存储的
它没有真正数组的一些方法 pop() push() 等等

function fn() {
            // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);

            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);

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

function getMax() { // arguments = [1,2,3]
    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, 5));
console.log(getMax(11, 2, 34, 444, 5, 100));

利用函数翻转任意数组 reverse 翻转

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
var arr2 = reverse(['red', 'pink', 'blue']);
console.log(arr2);

利用函数冒泡排序

// 利用函数冒泡排序 sort 排序
function sort(arr) {
    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]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}
var arr1 = sort([1, 4, 2, 9]);
console.log(arr1);
var arr2 = sort([11, 7, 22, 999]);
console.log(arr2);

利用函数判断闰年

// 利用函数判断闰年
function isRunYear(year) {
    // 如果是闰年我们返回 true  否则 返回 false 
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        flag = true;
    }
    return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(1999));

函数是可以相互调用的

// 函数是可以相互调用的
// function fn1() {
//     console.log(11);
//     fn2(); // 在fn1 函数里面调用了 fn2 函数
// }
// fn1();

// function fn2() {
//     console.log(22);

// }

function fn1() {
    console.log(111);
    fn2();
    console.log('fn1');
}

function fn2() {
    console.log(222);
    console.log('fn2');
}
fn1();

输出年份的2月份天数

// 用户输入年份，输出当前年份2月份的天数
function backDay() {
    var year = prompt('请您输入年份:');
    if (isRunYear(year)) { // 调用函数需要加小括号
        alert('当前年份是闰年2月份有29天');
    } else {
        alert('当前年份是平年2月份有28天');
    }
}
backDay();

// 判断是否为闰年的函数
function isRunYear(year) {
    // 如果是闰年我们返回 true  否则 返回 false 
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        flag = true;
    }
    return flag;
}

函数的两种声明方式

// 1. 利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
// 2. 函数表达式(匿名函数) 
// var 变量名 = function() {};
var fun = function(aru) {
    console.log('我是函数表达式');
    console.log(aru);
}
fun('pink老师');
// (1) fun是变量名 不是函数名  
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数

JavaScript作用域

JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
js的作用域（es6）之前：全局作用域局部作用域
全局作用域：整个script标签或者是一个单独的js文件

var num = 10;
var num = 30;
console.log(num);
// 4. 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
function fn() {
    // 局部作用域
    var num = 20;
    console.log(num);
}
fn();

变量的作用域

变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量

全局变量：在全局作用域下的变量在全局下都可以使用
注意：如果在函数内部没有声明直接赋值的变量也属于全局变量

var num = 10; // num就是一个全局变量
console.log(num);
function fn() {
    console.log(num);
}
fn();
// console.log(aru);

局部变量在局部作用域下的变量后者在函数内部的变量就是局部变量

注意：函数的形参也可以看做是局部变量

function fun(aru) {
    var num1 = 10; // num1就是局部变量 只能在函数内部使用
    num2 = 20;
}
fun();
// console.log(num1);
// console.log(num2);

从执行效率来看全局变量和局部变量

(1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2) 局部变量当我们程序执行完毕就会销毁，比较节约内存资源

js没有块级作用域

js的作用域：全局作用域局部作用域现阶段我们js 没有块级作用域

我们js 也是在 es6 的时候新增的块级作用域

块级作用域 {} if {} for {}

// 块级作用域 {}   if {}  for {}
// java 
// if(xx) {
//     int num = 10;
// }
// 外面的是不能调用num的
if (3 < 5) {
    var num = 10;
}
console.log(num);