一、函数
一、语法格式
<script>
// 函数的语法格式如下：
// function 函数名() {
// // 函数体
// }
// 函数必须要调用！！！
// 示例
function abc() {
// 封装就是把公共的 重复的代码放在这里
console.log('哈哈哈哈')//函数体
}
// 函数名() 即表示要调用这个函数了
abc()
</script>
练习：
<style>
table{
border-collapse: collapse;
width: 500px;
text-align: center;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<script>
function sayHi(){
console.log('你好呀，美女们！')
}
sayHi()
sayHi()
sayHi()
// 将99乘法表封装起来
function jiiujiu(){
//函数体（代码可以重复执行、功能写在这里）
document.write('<table>')
for(let i=1;i<=9;i++){
document.write('<tr>')
for(let j=1;j<=i;j++){
document.write(`<td>${j}*${i}</td>`)
}
document.write('</tr>')
}
document.write('</table>')
}
jiiujiu();
jiiujiu();
jiiujiu();
</script>
<script>
//1、先搞定函数 2、再去写功能
function sum() {
let x = 10
let y = 20
let z = x + y
console.log(z)
}
sum()
// ******
// 1、求1-100之间的和
// 2、定义函数
function sum100() {
let s = 0
for (let i = 1; i <= 100; i++) {
s += i
}
console.log(s)
}
sum100()
</script>
二、函数传参
<script>
// 函数是用来复用的
// 1、定义函数时，通过参数能让函数的功能更灵活
// 2、带参数的函数语法如下：
// function 函数名(参数1,参数2,参数n){
// 函数体
// }
// 3、参数其实就是一个变量
function sum(x,y){
// x y被当成变量来使用
console.log(x+y)
}
// 4、函数的参数(变量)是在调用的时候被赋值的
// sum(10,3) 相当于把x=10 y=3
sum(1,2)
sum(10,20)
// 5、参数有两种形式
// a)形参：定义函数的参数
// b)实参：实际上的参数
// 上述sum在定义时有x和y两个参数，叫做形参
// 在调用时sum(10,5)叫做实参
// 6、形参的个数与实参的个数是否要一致呢
// 可以 但是尽量要一致
function sum1(x,y,z){
// 如果一个变量没有被赋值，那么它的值为undefined
// x+y+z=NaN
console.log(x+y+z)
}
sum(10,5)
// 练习(求1-100的和)
function sum(n){
for(let i=0;i<=n;i++){
s += i
}
console.log(s)
}
// 变量怎末来 参数
// 变量(参数)如何赋值 调用时进行赋值
sum(100)
sum(50)
</script>
<script>
// 如果【形参】的个数【大于】【实参】，我们可以给【形参】
// 设置一个默认值
function sum(a,b,c=2){
// 此时c为undefined
// = 为赋值运算符
console.log(a+b+c)
}
// 在调用时只传入了2个
sum(10,6) //18
sum(10,3,8) //21
// 结论：如果在传实参的时候给相应的形参赋值了，那么就使用这个值，否则就是用默认值
// 思考：如果形参个数和实参个数相等的情况下能不能使用默认值？
function sum1(a=1,b=2,c=3){
console.log(a+b+c)
}
sum1(10,20,30) //60
sum1() //6
sum1(1,4) //8
</script>
<script>
let scores = [11,22,33,44]
function sum(scores){
for(let i=0;i<scores.length;i++){
s += scores[i]
}
console.log(s)
}
sum([11,22,33,44])
sum([100,20,30,40])
</script>
三、函数返回值
<script>
// 函数返回值就是要把函数内部的执行结果交给函数外部
// '请输入一个数字'就是实参
prompt('请输入一个数字')
function sum(){}
sum()
// 下面为返回值的语法
// function 函数名(){
// return 传给函数外的结果
// }
function sum(x,y){
let s = x+y
return s
}
let z = sum(10,2)
console.log(z)
// 没有renturn 结果是未定义
// 但是一旦使用了return 那么函数内部的代码就停止运行了
function sum2(){
// 将函数内部的5交给外部使用
return 5 //执行到此就结束了
let k=1+2
console.log(k)
}
let i =sum2() //i=5
// 求偶数的和
function sumEven(n){
let s = 0
for(let i=1;i<=n;i++){
if(i%2===0){
s += i
}
}
}
sumEven(100)
</script>
冒泡排序
<script>
let scores = [1,2,3,4,5,6]
// 从小到大排序
// 1、使用数组中每个单元进行【两两对比】(后一个单元与前一个单元对比)
// 上述的分析中需要将每个单元拿出进行对比，遍历
for(let i=0;i<scores.length;i++){
// scores[i] //后一个单元是scores[i+1]
// 2、如果前一个大于后一个单元，则让两个单元互换顺序
if(scores[i] > scores[i+1]){
let tmp = scores[i]
scores[i] = scores[i+1]
scores[i+1]= tmp
}
}
console.log(scores)
// let x=5
// let y=6
// let z
// z=x
// x=y
// y=z
</script>
总结：
<script>
// 1、什么是函数的参数
// 答：参数就是一个变量，通过参数可以让参数更加的灵活
// 2、如何定义一个带参数的函数
// 答：语法格式如下：
// function 函数名(参数1,参数2,...参数n)
// 3、什么叫形参实参
// 定义函数时括号里的叫形参，调用函数时括号里叫实参
// 4、实参形参关系？
// function sum(x,y){
// x和y为形参
// 实参10赋值给了形参x
// }
// sum(10,5) 实参为10 5
// 5、形参实参个数必须要求一致吗？
// 答：多少都可以，但是数量不一致可能导致逻辑问题
function sum(x,y,z){
console.log(x+y+z)
}
sum(11,22) //NaN
// 当形参实参个数不一致，那么形参可以为undefined
// 推荐形参实参个数一致，除非你给形参设置了默认值
// 6、形参的默认值为？
// 在定义函数的时候可以直接给形参进行赋值，这个值叫
// 形参的默认值，举例说明：
function sum1(x=4,y=1){
// 形参的值为4和1就是默认值了
}
sum1(10)//如果传递了实参则将实参赋值给形参值，没有传递实参则使用形参
// 7、函数的返回值是啥？
// 答：在函数中使用return时便是有返回值
// 它能够将函数[内部]的结果交给[外部]来使用
function sum2(){
return 10
}
// 上述代码表示,只要调用sum2就一定会得到一个结果10
let a = sum2()
</script>
补充点：
<script>
// if 有一种简写形式
// if(条件){}
// 简写的话可以省略{}就可以
// if(条件)执行逻辑,但是只适用于[一行逻辑]
for(let i=1;i<10;i++){
if(i===3){
continue
}
// 上述代码条件中只有一行逻辑,那么就可以使用简写
if(i===3)continue
}
// if配合return的使用
// 给函数传入一个人名,然后就人名 你好
function sayHi(name){
// if (typeof name !== 'string')
// return 看见return后面代码不再执行
if(typeof name !== 'string')return
return `${name} 你好`
}
confirm.log(sayHi('小米'))
console.log(('小小猫'))
</script>
四、函数作用域
作用域是指在变量中能够被访问的区域或者范围，一般情况下定义的变量都是处于全局作用域中的。
在函数中定义的变量，只能在函数内部使用。
<script>
let i = 0
// 此处可以访问
console.log(i)
function sayHi(){
let j = 10
console.log(j) //10
}
console.log(j) //会报错
function class201(){
let name = '卢灵秋'
console.log(name)
}
class201()
function class202(){
let name1 = '卢灵秋'
console.log(name1)
}
class202()
// 对应到代码中一个函数就是一个范围
// 也就会产生一个作用域(函数)
// 在函数定义的变量,只能在函数中使用
// 出了这个范围就不再生效
//作用域在Javascript中分为两大类
// 一)全局作用域
// 直接写在最外层的 代码属于全局作用域
let x = 1
let y = 5 //全局范围(作用域)中的变量
// 全局的变量在任何地方都可以被访问
function getNum(){
console.log(x,y)
}
getNum() //1 和 5
// 二)局部作用域
// 局部作用一般是定义在函数内部,并且也只在函数
// 内部生效(被访问)
// 1)函数作用域
function sayHi(){
let name1 = '小明'
}
sayHi()
// 没有变量name1 .. is not defined
// 因为它是局部作用域 全局范围内不能范文局部变量
console.log(name1)
// 结论:局部作用域中可以访问全局
// 全局作用域中不可以访问局部
</script>
<script>
// 从内向外 从儿子到祖先
// 作用域查找机制: 作用域链
// 如果全局也没有,那就得报错了,或者undefined
// 就近原则
let x =10
function A(){
let x=30
console.log(x) //30
function B(){ //函数里面还可以写函数
// let x=20
console.log(x) //10
}
B()
}
A() //调用A 函数体才会执行
</script>
五、匿名函数
<script>
// function(){} 匿名函数
// 一般会作为一个值,赋值给一个变量
// 把匿名函数赋值给一个变量是常见得用法
let y = function(){
console.log('哈哈,我没有名字')
}
// 变量名可以当成函数名来对待
y()
</script>
立即执行函数
<script>
// 正常情况下 函数声明和调用是分开得
// 1.声明
function abc(){}
// 2.调用
abc()
// 立即执行函数就是声明和调用合二为一
// (定义一个函数)()
(function fn(){
console.log('哈哈哈')
})();
// 记住固定得写法1:
(function fn(){})()
// 语法2
(function foo(){
console.log('hahah')
})
</script>
案例：时间格式转换
<script>
// 举例7270请求是多少小时
// 1.随便假设一个时间,7270秒
let s = 7270
// 1.转换成小时
let h =parseInt(s/3600)
//console.log(h) //2
// 2.转换成分钟
let m =parseInt(s/60%60)
// 3.转换成秒
let ss =parseInt(s%60)
// 数字补0
h = h>9? h: '0' + h
m = h>9? m: '0' + m
ss = ss>9? ss: '0' + ss
console.log(`${s}转换格式为:${h}:${m}:${ss}`)
// 可以封装成一个函数
</script>
\
