JavaScript函数知识点梳理

循环嵌套
就是再循环里面再次写一个循环
注意: 里外层循环变量不要一样
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 7; j++) {
// 里层循环, 会随着外层循环一遍一遍的执行
// 当 i === 0 的时候, 会完整执行一遍里层循环 j === 0 1 2
// 当 i === 1 的时候, 会完整执行一遍里层循环 j === 0 1 2
// 当 i === 2 的时候, 会完整执行一遍里层循环 j === 0 1 2
// 我们的里层循环一共执行了 9 遍
console.log(i + ’ — ’ + j)
}
}
if 和 switch 叫做条件判断
for 和 while 和 do … while 叫做循环
九九乘法表
行 列
1 ---- 1
2 ---- 2
3 ---- 3
4 ---- 4
如果使用循环嵌套
外层跑一圈的时候, 里层也跑一圈
外层跑两圈的时候, 里层也跑两圈
外层跑多少圈, 里层就跑多少圈
外层循环
for (var i = 1; i <= 9; i++) {
// 当 i === 1 的时候, 表示第一行, 里层循环循环 1 次
// 当 i === 2 的时候, 表示第二行, 里层循环循环 2 次
// 当 i === 9 的时候, 表示第九行, 里层循环循环 9 次
// i 是几里层循环就循环多少次
// 里层循环表示多少列
for (var j = 1; j <= i; j++) {
// 直接输出再页面上
document.write(j + ’ * ’ + i + ’ = ’ + i * j + ’ ‘)
}
// 每一行的最后面要输出一个换行
document.write(’’)
}
杨辉三角形
就是为了练习循环嵌套, 再页面上打印一个由 * 组成的三角形

  *
  * *
  * * *
  * * * *
  * * * * *
  * * * * * *
  * * * * * * *
  * * * * * * * *
  * * * * * * * * *

  需要一个循环嵌套
  第一行是一个, 第二行是两个
  第几行就是几个
// for (var i = 1; i <= 9; i++) {
//   // 里层循环循环多少次由外层循环决定
//   for (var j = 1; j <= i; j++) {
//     document.write('* ')
//   }
//   document.write('
')
// }
  我想让这个三角形倒过来
  * * *
  * *
  *
  第 1 行是 9 个
  第 2 行是 8 个
  第 3 行是 7 个
  当你书写循环的时候
  for (var j = 1; j <= 9; j++) {} 就是一共 9 次
    for (var j = 1; j <= 8; j++) {} 就是一共 8 次
    1 2 3 4 5 6 7 8
    for (var j = 2; j <= 9; j++) {} 就是一共 8 次
    2 3 4 5 6 7 8 9
    for (var j = 1; j <= 7; j++) {} 就是一共 7 次
    1 2 3 4 5 6 7
    for (var j = 3; j <= 9; j++) {} 就是一共 7 次
    3 4 5 6 7 8 9
// 外层循环决定是第几行
// for (var i = 1; i <= 9; i++) {
//   // 当 i === 1 的时候, 表示第 1 行, 里层循环要循环 9 次
//   // 当 i === 2 的时候, 表示第 2 行, 里层循环要循环 8 次
//   // 当 i === 9 的时候, 表示第 9 行, 里层循环要循环 1 次
//   // 当 i 是几的时候, 里层循环就要循环多少次
//   for (var j = i; j <= 9; j++) {
//     // 当 i === 1 的时候, 里层循环时 1 ~ 9, 是 9 次
//     // 当 i === 2 的时候, 里层循环是 2 ~ 9, 是 8 次
//     document.write('* ')
//   }

// // 每一行输出完毕, 再最后加上一个换行
// document.write(’’)
// }
换成右上直角三角形
*********
********
*******
******
*****
****
***
**
*
分析三角形
第 1 行, 1 个空格, 9 个星号, 带一个换行
第 2 行, 2 个空格, 8 个星号, 带一个换行
第 3 行, 3 个空格, 7 个星号, 带一个换行
第 9 行, 9 个空格, 1 个星号, 带一个换行
// 外层循环, 表示第几行
for (var i = 1; i <= 9; i++) {
// 先输出对应的空格
// i 是几 就输出几个 空格
for (var j = 1; j <= i; j++) {
// i === 1 的时候, j 1 ~ 1 就是 1 次
// i === 2 的时候, j 1 ~ 2 就是 2 次
document.write(’ ‘)
}
// 再输出对应的星号
// 当 i === 1 的时候需要 9 个
for (var k = i; k <= 9; k++) {
// 当 i === 1 的时候, k 1 ~ 9 一共 9 次
// 当 i === 2 的时候, k 2 ~ 9 一共 8 次
document.write(’*’)
}
// 再输出一个换行
document.write(’’)
}
break 关键字
一个使用在 循环 里面的关键字
作用就是用来打断循环
只要代码再循环里面的时候, 执行到了 break 这个关键字
那么直接跳出循环, 不管循环是不是结束了, 都强行结束
for (var i = 1; i <= 10; i++) {
console.log(‘我吃了第 ’ + i + ’ 个包子’)
// 判断当吃完第六个的时候, 后面的就都不吃了
if (i === 6) {
console.log(‘我吃饱了, 后面的不吃了’)
break
}
}
continue 关键字
使用再循环里面的关键字
作用是结束循环的本次, 进入下一次
当代码再循环里面的时候, 遇到了 continue 关键字
那么 continue 关键字后面的代码就不在继续执行了
直接进行 i++ 去到循环的下一次
总结:
break 是在循环里面直接结束整个循环的关键字
continue 是在循环里面结束循环的本次, 直接进入下一次的关键字
for (var i = 1; i <= 10; i++) {
// 第五个掉地上了
if (i === 5) {
console.log(‘这个包子掉地上了, 不吃了’)
continue
}
console.log(‘我吃的第 ’ + i + ’ 个包子’)
}
判断一个数字是不是质数
质数:
一个数字, 从 1 ~ 自己
除了 1 和 自己 其他的数字都不能整除
那么整个数字就是制数
例子: 7
除了 1 和 7 以外, 2 3 4 5 6
7 / 6 不能整除
7 / 5 不能整除
7 / 4 不能整除
7 / 3 不能整除
7 / 2 不能整除
我们就说 7 是一个质数
1. 先准备一个数字
var n = 7
2. 循环, 从 2 ~ 本身-1
因为不需要管 1 和 自己本身
for (var i = 2; i < n; i++) {}
3. 在循环里面分别判断每一个数字的取余是不是得到 0
一旦得到 0 就表示整除了, 就不是质数了
直到循环结束, 都没有整除的, 那么就是一个质数
判断一个数字不是质数, 可以在循环中确定
判断一个数字是质数, 必须要等到循环结束才能确定
比如 9
当 9 % 2 的时候确实不是 0 但是我们不能这个时候就说他是质数
// 准备数字
var n = 9
// 提前准备一个变量作为假设
var flag = true // 假设这个数字是一个质数
// 2. 循环从 2 到自己本身 -1
for (var i = 2; i < n; i++) {
// 3. 判断是不是质数, 就是判断取余是不是得到 0
if (n % i === 0) {
// 表示 7 和 2 3 4 5 6 中的某一个取余得到 0 了
// 表示整除了, 就肯定不是质数了
flag = false // 把我的假设变成否定
// 只要你和任何一个数字取余得到 0 了, 后面的就不需要了
break
}
}
// 代码执行到这个为止, 才表示循环结束了
// 当循环结束以后, 如果 flag === true
// 表示循环中的每一次 if 条件都不成立
// 表示每一个数字都不能整除
// 就是一个质数
// 当循环结束以后, 如果 flag === false
// 表示循环中至少有一次 if 条件成立了
// 表示至少有一个数字是整除了
// 就不是一个质数了
if (flag === true) { // 只有当 flag === true 的时候才能满足条件
console.log(n + ’ 是质数’)
} else {
console.log(n + ’ 不是质数’)
}
// flag 的值只能是 true 或者 false
// 变量是吧一个数字存储到一个名字里面
// 今后当你使用这个名字的是偶就是在使用这个数据
// var num = 100
// console.log(num) 100
if (true) {} else {}
条件满足就执行 {}
条件不满足就执行 else {}
满足: 条件的结果为 true
不满足: 条件的结果为 false
了解函数
函数是我们的一个数据类型, 和数学的一次函数之类的玩意没有关系
函数是我们接触的第一个复杂数据类型
函数的作用就是把一段功能性代码放在一个 “盒子” 里面
什么时候想用的时候, 直接把 “盒子” 里面的代码拿出来用就可以了
例子: 微波炉
把一个加热的功能放在了一个铁盒子里面
只要你想加热东西的时候, 把微波炉开关打开, 就能把你放进去的内容加热
代码:
就是我们在内存中开辟一个小空间, 把我们的代码放进去
然后给这个空间起一个名字, 叫做 abc
以后我只要需要用到这个空间里面的代码的时候
我就告诉我的程序, 把 abc 空间里面的代码执行一下
函数的创建
两种方式来创建函数
注意:
在声明函数的时候, 函数内部的代码时不会执行的
只有当你调用这个函数的时候, 里面的代码才会执行
1. 声明式函数
语法: function 名字() {}
function: 就是一个声明函数的关键字
名字: 就是你给这一段空间自定义的一个名字, 命名规则和命名规范同变量名
(): 存放参数的位置, 现在先不说, 一会详细讲, 必须写
{}: 就是你存放的一段代码
2. 赋值式函数
语法: var 名字 = function () {}
var: 定义变量的关键字
名字: 就是我们给这个函数起的一个自定义名称
=: 赋值
function: 表示一个函数
(): 写参数的位置, 必须写, 一会再说时干啥的
{}: 存放一段代码的
// 定义一个函数 - 声明式
// function weibolu() {
// console.log(‘呜呜呜’)
// console.log('叮 ~ ')
// }
函数的调用
不管哪种方式定义的函数, 他们的调用方式是一样的
1. 直接调用(掌握)
当你定义好一个函数以后
如果你想让这个函数内部的代码执行一下
直接写 -> 函数名()
函数名: 你要让哪一个空间里面的代码执行
(): 就是调用的意思
2. 依赖行为调用(目前是了解, 后期我们要掌握)
需要给一个元素绑定一个行为
在 js 里面获取一个页面元素有一个简单的办法, 就是直接使用 id 名称
在一个页面里面, 一个元素的 id 名称可以直接被当作一个 js 的变量来使用
这个 id 名表示的就是这个元素
暂时添加一个点击行为, 就是 onclick
元素.onclick -> 表示当点击这个元素的时候
给他赋值为一个函数名称就可以了
不需要写小括号, 因为我不是让你直接执行
而是当点击的时候在执行
// 准备两个函数
function weibolu() {
console.log(‘呜呜呜’)
console.log(‘叮~’)
}
var bingxiang = function () {
console.log(‘嗡嗡嗡’)
}
// 调用函数
// 1. 直接调用
// weibolu()
// weibolu()
// weibolu()
// bingxiang()
// bingxiang()
// bingxiang()
// bingxiang()
// 2. 依赖行为调用
// box 是页面中一个 div 的 id 名称, 在 js 里面可以直接使用
// onclick 当点击在某一个元素身上的时候
// 等于号后面是一个函数名称, 不需要小括号
// 当你点击这个 box 元素的时候, 会调用后面的这一个函数
// 点击多少次调用多少次
box.onclick = weibolu
// 定义一个函数 - 赋值式
var weibolu = function () {
console.log(‘呜呜呜’)
console.log(‘叮 ~’)
}
调用时机上的区别
当你调用一个函数的时候, 方式都是一样的
但是调用的时机, 取决于你使用哪种方式定义函数
声明式函数(function fn() {})
可以在声明之前调用, 也可以在声明之后调用
赋值式函数(var fn = function () {})
只能在声明之后调用, 声明之前调用会报错
// 1. 声明式函数
// weibolu()
// function weibolu() {
// console.log(‘呜呜呜’)
// console.log(‘叮~’)
// }
// weibolu()
// 2. 赋值式函数
// bingxiang is not a function
// bingxiang 不是一个函数
bingxiang()
var bingxiang = function () {
console.log(‘嗡嗡嗡’)
}
bingxiang()
函数的参数
函数里面的参数分成两种
1. 形参
就是写在函数定义时候的 () 里面的
可以写多个, 多个的时候中间用 逗号(,) 分隔
就是一个只能在函数内部使用的变量
至于这个变量(形参) 的值是什么, 由函数的实参决定
2. 实参
就是写在函数调用的时候的 () 里面的
可以写多个, 多个之间使用 逗号(,) 分隔
是一个准确的数据
用来给对应的形参赋值的
// 形参和实参
// function bingxiang(a) {
// // a 就是一个只能在函数内部使用的变量名
// console.log(‘嗡嗡嗡’)
// console.log(‘冰冰冰 ’ + a + ’ 冰冰冰’)
// }
// // 这个位置的小括号里面的内容叫做实参, 式用来给形参赋值的
// bingxiang(‘大熊猫’)
// bingxiang(‘大象’)
// 多个参数
function bingxiang(a, b, c) {
console.log(a)
console.log(b)
console.log©
}
bingxiang(‘大象’, 100, true)
函数参数的个数关系
1. 形参和实参一样多
按照从左到右的顺序一一进行赋值
2. 形参比实参多
前面的一一对应的关系, 多出来的形参, 没有实参进行赋值
在函数内部使用的时候, 就是一个没有赋值的变量, 就是 undefined
3. 实参比形参多
前面的一一对应的关系, 多出来的实参, 在函数内部没有形参接收
相当于你白写了多出来的实参, 在函数内部不能直接使用
// 参数一样多
// function fn(a, b, c) {
// console.log(a)
// console.log(b)
// console.log©
// }
// fn(‘hello world’, true, 100)
// 形参多
// function fn(a, b, c) {
// // 在这个函数里面, c 就相当于定义了一个变量, 但是没有被赋值
// // c 在使用的时候就是 undefined
// console.log(a)
// console.log(b)
// console.log©
// }
// fn(‘hello world’, 100)
// 实参多
function fn(a, b, c) {
// 我在这里不能直接使用传递进来的 200 300 400 500
// 但是不会报错
console.log(a)
console.log(b)
console.log©
}
fn(‘hello world’, true, 100, 200, 300, 400, 500)
函数内部的一个特殊的变量, arguments
在每一个函数内部, 都有一个天生的变量
不需要我们取定义, 直接就能拿来使用
这个变量叫做 arguments
表示所有实参的集合
详解 arguments
会把所有的实参按照从左到右的顺序依次排好
给每一个实参一个编号(索引 / 下标)
这个编号(索引 / 下标) 是从 0 开始的, 依次递增
当你需要获取到这里面的某一个的时候
你只要写 arguments[编号] 就能得到某一个准确的值
arguments 还有一个属性叫做 length
表示 arguments 这个集合的长度, 也就是里面有多少个数据
值是一个 number 数据类型的数字
如果你想得到这个属性就写 arguments.length
使用循环遍历整个 arguments 获取到每一个数据
因为 arguments 的索引(下标) 是按照从 0 开始依次叠加的顺序
我们的循环刚好也可以给我提供一组有规律的数字
所以我们可以使用循环的方式来遍历 arguments
循环遍历的时候为什么要小于 length
当 length === 5 的时候, 我们要的索引数字是 0 1 2 3 4
for (var i = 0; i < 5; i++) {} 得到的 i 分别时 0 1 2 3 4
当 length === 7 的时候, 我们要的索引数字是 0 1 2 3 4 5 6
for (var i = 0; i < 7; i++) {} 得到的 i 分别是 0 1 2 3 4 5 6
什么时候使用 arguments 什么时候使用形参
因为函数是我们提前定义好的, 为了更好的书写代码, 为了以后多次调用
当我们定义函数的时候, 我就能确定以后我使用的时候的实参的个数
我们推荐使用形参的方式来获取, 因为方便
当我们定义函数的时候, 我不能确定以后我使用的时候的实参的个数
我们推荐使用 arguments 的形式来获取, 因为灵活
// 循环遍历 arguments
function fn() {
// 五个数据的索引分别是 0 1 2 3 4
console.log(arguments)
// 使用循环提供一个从 0 ~ 4 的数字
// 循环的结束位我们应该根据 arguments 的 length 来决定
for (var i = 0; i < arguments.length; i++) {
// console.log(i) // i 得到的就分别时 0 1 2 3 4
// 当 i === 0 的时候, 使用 arguments[0]
// 当 i === 1 的时候, 使用 arguments[1]
// 当 i === 2 的时候, 使用 arguments[2]
console.log(arguments[i])
}
}
fn(‘hello’, ‘world’, true, 100, 500, false, ‘你好’)
// 简单演示 arguments
// function fn() {
// // arguments 不需要定义, 直接使用就行
// console.log(arguments)
// console.log(arguments[0]) // 我要获取 arguments 里面索引为 0 的那一项
// console.log(arguments[1]) // 我要获取 arguments 里面索引为 1 的那一项
// console.log(arguments[2]) // 我要获取 arguments 里面索引为 2 的那一项
// console.log(arguments[3]) // 我要获取 arguments 里面索引为 3 的那一项
// console.log(arguments.length) // 我要获取 arguments 这个集合的长度
// }
// fn(‘hello’, ‘world’, 100, 200)
求和小案例
需求一: 利用一个函数计算两个数字的和
我们就定义一个函数, 接收两个形参
以后使用的时候也是传递两个实参
需求二: 利用一个函数计算三个数字的和
我们就顶一个函数, 接收三个形参
以后使用的时候也是传递三个实参
需求三: 利用一个函数计算若干个数字的和
我们定义一个函数, 不一定接收几个形参
因为求的是若干个数字的和, 我不确定将来传递几个实参
我如果传递 3 个实参, 那么就把 3 个实参加在一起
我如果传递 5 个实参, 那么就把 5 个实参加在一起
这个时候就使用 arguments 比较好 灵活
// 我定义的函数就是为了计算两个数字的和
// function fn(a, b) {
// var result = a + b
// console.log(result)
// }
// fn(10, 20) // 能在控制台打印出 10 + 20 的结果
// fn(50, 70) // 能在控制台打印出 50 + 70 的结果
// 我定义的函数就是为了计算三个数字的和
// function fn(a, b, c) {
// var result = a + b + c
// console.log(result)
// }
// fn(10, 20, 30) // 能在控制台打印 10 + 20 + 30 的结果
// fn(100, 300, 500) // 能在控制台打印 100 + 300 + 500 的结果
// 我定义的函数就是为了计算若干个数字的总和
function fn() {
console.log(arguments)
// 准备一个初始变量, 用来接收计算结果
var result = 0
// 循环遍历 arguments 的每一个
for (var i = 0; i < arguments.length; i++) {
// 把 arguments 里面的每一个都叠加到 result 变量身上
result += arguments[i]
}
// 循环结束以后, result 就是 arguments 里面每一个数字的和
console.log(result)
}
fn(10, 20, 30, 40) // 计算的就是四个数字的和
fn(10, 20, 30, 40, 50) // 计算的就是五个数字的和
fn(10, 20, 30, 40, 50, 60) // 计算的就是六个数字的和
函数的返回值
什么是返回值: 也就是一个函数的结果
例子: 冰箱
函数: 就是封装一个功能, 冰箱就是封装了一个制冷的功能
参数: 就是在调用的时候传递, 你向冰箱里面放了什么东西
返回值: 就是调用完函数得到的结果, 冰箱能给你的一个什么
例子: parseInt()
parseInt 是一个 js 内置(自带) 的一个函数
parseInt() 就是在调用这个函数
parseInt(10.234) 就是传递的一个参数
var result = parseInt(10.234)
result 接收的就是 parseInt 这个函数的返回值
这个函数里面做的是 把你传递进来的数据转换成数值类型
然后再返回给你
再函数里面添加返回值使用 return 关键字
return 就是再函数里面使用的
你想让这个函数返回什么, 就写 return 你要返回的数据
// 函数的返回值
function bingxiang(a) {
// 形参 a 就是你传递进来的实参
// 我是一个功能性的东西, 我的功能就是把你传递进来的东西冻起来
var str = ‘冰冰冰 ’ + a + ’ 冰冰冰’
// 把冻好以后的结果给你
// return 123 这句代码就是 bingxiang
// 这个函数将来被调用以后能得到的结果
return str
}
// 现在开始, 只要我调用 bingxiang 这个函数, 那么我就能得到一个 123
var res = bingxiang(‘大象’)
console.log(res)
var res2 = bingxiang(‘八爪鱼’)
console.log(res2)
我要自己封装一个函数, 用来判断一个数字是不是质数
我就自己写一个函数, 接收一个参数
返回值, 就是一个 布尔值
如果返回 true, 表示我传递进去的参数是一个质数
如果返回 false, 表示我传递进去的参数不是一个质数
function isZhishu(num) {
// 判断 num 是不是一个质数
// num 是你将来调用的时候传递进来的一个数字
var flag = true
for (var i = 2; i < num; i++) {
if (num % i === 0) {
flag = false
break
}
}
// 因为 flag 是 true 就返回 true
// falg 是 false 就返回 false
return flag
// 如果这个数字是质数 我就返回 true
// 如果这个数字不是质数 我就返回 false
// if (flag === true) {
// return true
// } else {
// return false
// }
}
var result = isZhishu(10) // 为了得到一个结果告诉我 10 是不是质数
console.log(result)
书写案例