函数概述、参数、返回值、函数名函数体和函数加载问题、函数声明、变量和作用域、隐式全局变量、变量声明提升。
1。函数的定义和使用
函数 ，具有一定功能的代码块 可以重复执行的代码块
函数不调用不执行 执行方法 fn（）
函数定义 function fn（）{}
预解析 function 和变量
函数调用可以在函数定义之前
<!DOCTYPE html>
<html>
<head>
<title>函数的定义和使用</title>
</head>
<body>
<script type="text/javascript">
fn_name();
function fn_name(){
alert(1);
}
// 定义函数
function getSum(){
var sum = 0;
for (var i=1;i<=100;i++){
sum+=i;
}
alert(sum);
}
fn1();
// 会输出1
function fn1(){
alert(1+1);
}
function fn1(){
alert(1);
}
// a,b占位置用的,形参，形式上参与运算的值
function fn2(a,b){
alert(a+b);
}
fn2(4,4);
// 4，4实参，实际上参与运算的值
fn2(1,2);
fn3();
function fn3(a,b){
alert(a+b);
// NaN
alert(a);
alert(b);
// undefined,未定义，未赋值
document.getElementById(a).title=‘1‘;
// 未赋值，又进行强制操作，报错
}
</script>
</body>
</html>
2.参数
参数 返回值 函数两大组成部分
函数的组成部分1：参数2返回值3功能
参数
需求1 1+1=？ Alert（1+1）
需求2 2+2=？ Alert（2+2）
需求3 4+4=？ Alert（4+4）
需求随时会改变，
可能修改运算的值而不是功能，可以设置参数，解决问题。
形参 形式上参与运算的值，占位置
实参 实际上参与运算的值
实参想参与运算必须要有形参占位置。
参数：增加函数功能性 如1+1 -》 a+b 功能强大
程序员交互性
参数可拓展性
// a,b占位置用的,形参，形式上参与运算的值
function fn2(a,b){
alert(a+b);
}
fn2(4,4);
// 4，4实参，实际上参与运算的值
函数名相同，后面的函数会覆盖前面的函数。函数名不能相同
3参数个数问题
如果形参个数与实参个数不匹配
一般情况下，不会让形参和实参不匹配
- 形参=实参 正常执行
- 实参》形参 正常执行，多余的实参无意义，函数不使用
- 实参《形参 看程序具体内容是否报错 NaN，undefined，报错
未给定实参，undefined
本身没有赋值，又对其进行强制操作，报错
fn3();
function fn3(a,b){
alert(a+b);
// NaN
alert(a);
alert(b);
// undefined,未定义，未赋值
document.getElementById(a).title=‘1‘;
// 未赋值，又进行强制操作，报错
}
Js中没有方法重载，函数名相同（无关形参个数），后面的会覆盖前面的函数。
比如fn（a,b）
fn(a,b,c)
4.
- 返回值
什么是返回值：执行完毕函数以后，我们能给其他变量赋值。
把函数的值赋值给外面，使用return，否则返回值是undefined
返回值的作用：一般来说，函数通过运算出来的数都是一个半成品，需要二次加工，所有不能直接结束，需要在函数外部二次加工。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//函数的组成分为： 1.参数。 2.返回值。 3.功能。
//什么是返回值：执行完毕函数以后，我们能给其他变量赋值。
//返回值干什么用的呢？一般来讲，函数通过运算出来的数都是一个半成品，需要二次加工。
// 系统自带的函数，confirm等的返回值
var bool1 = confirm("我们结婚吧？");
console.log(bool1);
// false，返回值是布尔值
var bool2 = alert("我们结婚吧？");
console.log(bool2);
// undefined，返回值是undefined
var bool3 = prompt("请输入：");
console.log(bool3);
// 返回值输入什么就是什么
var aaa = fn();
console.log(aaa);
function fn(){
var bbb = 111;
//如果我们想把函数内部的值赋值为外部，必须使用return;
//如果没有return或者只有return没有值，那么返回值都是undefined。
return bbb;
}
</script>
</body>
</html>
练习1：返回值必须执行函数才能得到，return可以退出函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//函数的返回值必须要执行函数才能得到。
//求和：
var num = getSum()+1+1+1;
alert(num);
function getSum(){
var sum = 0;
for(var i=1;i<=100;i++){
sum+=i;
}
return sum;
}
//需求：1+1=2；拓展这个算式
var aaa = fn(1,1);
alert(aaa);
// 或者
alert(fn(2,2));
function fn(a,b){
//规则中有几个变化的值，我们就定义几个变量。
var sum = a+b;
//外部要用哪个值，我们就返回哪个值。
return sum;
}
demo();
function demo(){
console.log(1);
console.log(2);
// return可以切断函数。 后面的所有代码不再执行
// break跳出这个循环。 continue跳出本次循环进入下一循环。
return;
console.log(3);
console.log(4);
}
</script>
</body>
</html>
练习二：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//(参数和返回值)
//求圆的周长(long=2*pi*r)
var long1 = getLong(0.5);
console.log(long1);
console.log(getLong(1));
function getLong(r){
// 通俗版
var pi = 3.141592653;
var l = 2*pi*r;
return l;
}
//求圆的和面积(area = pi*r*r)
var area1 = getArea(1);
console.log(area1);
function getArea(r){
//通俗版
// var pi = 3.14;
// var a = pi*r*r;
// return a;
//精简版
// var pi = Math.PI;
// var a = pi*Math.pow(r,2);
// return a;
//最终版
return Math.PI*Math.pow(r,2);
}
//求2个数中的最大值
console.log(getMax(1,2));
function getMax(num1,num2){
// if(num1>num2){
// return num1;
// }else{
// return num2;
// }
//return是可以切断函数的。
// if(num1>num2){
// return num1;
// }
// return num2;
//三元运算
return num1>num2?num1:num2;
}
//求3个数中的最大值
console.log(getMaxThree(-1,0,3));
function getMaxThree(a,b,c){
// var d = a>b?a:b;
// return d>c?d:c;
//精简版
return (a>b?a:b)>c?(a>b?a:b):c;
//判断a和b
// if(a>b){
// //如果a大判断a和c
// if(a>c){
// return a;
// }else{
// return c;
// }
// }else{
// //如果b打，判断b和c
// if(b>c){
// return b;
// }else{
// return c;
// }
// }
}
//求一组数中的最大值
var arr = [-3,-2,-1,0,1,2,3];
var maxValue = getArrMax(arr);
console.log(maxValue);
console.log(getArrMax(arr));
function getArrMax(array){
//用的必须是形参的数组中的第一项。
var max = array[0];
for(var i=1;i<array.length;i++){
if(array[i]>max){
max = array[i];
}
}
return max;
}
//求一组数中的最小值
var arr = [-3,-2,-1,0,1,2,3];
var minValue = getArrMin(arr);
console.log(minValue);
console.log(getArrMin(arr));
function getArrMin(aaa){
//把数组中的第一位默认为，最小值。
var min = aaa[0];
for(var i=1;i<aaa.length;i++){
//判断数组中的每一项，如果下雨min，那么把他赋值给min
if(aaa[i]<min){
min=aaa[i];
}
}
//书写位置要注意，一定是这个for循环执行完毕之后再返回
return min;
}
//翻转数组，返回一个新数组
//用两种方法做，第一种创建心数组。第二种直接修改原数组。
var arr1 = [1,2,3];
var arr2 = reverse1(arr1);
console.log(arr2);
console.log(reverse1(arr1));
//定义一个新数组，把老数组中的元素反向添加到新数组中
function reverse1(array){
var newArr = [];
for(var i=array.length-1;i>=0;i--){
newArr[newArr.length] = array[i];
}
return newArr;
}
var arr = [1,2,3];
console.log(arr);
// console.log(reverse2(arr));
reverse2(arr);
console.log(arr);
//修改或者说翻转原数组，此方法没有返回值，所以只能打印原数组。
function reverse2(array){
for(var i=0;i<array.length/2;i++){
var temp = array[i];
array[i] = array[array.length-1-i];
array[array.length-1-i] = temp;
}
return array; //Array对象中的方法返回了一个数组。
}
//对数组排序，从小到大
// var arr = [2,1,3,4];
var arr = [4,3,2,1];
console.log(bubble(arr));
function bubble(array){
//外循环控制轮数（元素-1）
for(var i=0;i<array.length-1;i++){
//开闭原则(标志，标识，旗帜)
var flag = true;
//内循环控制次数（元素-1）
for(var j=0;j<array.length-1-i;j++){
//判断符合标准就交换位置
if(array[j]>array[j+1]){
var temp = array[j];
array[j] = array[j+1];
array[j+1] = temp;
flag = false;
}
}
if(flag){
//此情况在数组是极限从大到小排列下，会出现问题。每一轮flag都是false，最终无返回值。
// return array;
break;
}
}
//有了return执行完毕方法后，就可以用变量接收返回值！
return array;
}
</script>
</body>
</html>
练习3：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 求阶乘
console.log(getJC(10));
function getJC(num){
var sumJC = 1;
for(var i=1;i<=num;i++){
sumJC *= i;
}
return sumJC;
}
// 求1!+2!+3!+....+n!（函数嵌套）
//求阶乘的和
console.log(getSumJC(4));
function getSumJC(number){
var sum = 0;
for(var i=1;i<=number;i++){
sum += getJC(i);//求阶乘
}
return sum;
}
// 判断一个数是否是素数(质数)
//思路：除了自身和1以外，不能被其他数整除。
//注意点：
//1.必须用for循环实现
//2.判断是否是素数，所以她的返回值应该是true或者false。
//3.如果num%i===0了，那么一定不是素数。只有出了1和自身以外所有的数都不能整除，那么才能说她是素数。
console.log(isPrime(3));
// function isPrime(num){
// //除了自身和1以外，不能被其他数整除。
// for(var i=2;i<num;i++){
// if(num%i===0){
// return false;
// }
// }
// return true;
// }
//拓展1（了解）
// function isPrime(num){
// //开闭原则
// var bool = true;
// //除了自身和1以外，不能被其他数整除。
// for(var i=2;i<num;i++){
// if(num%i===0){
// bool = false;
// }
// }
// return bool;
// }
//拓展2
function isPrime(num){
//除了自身和1以外，不能被其他数整除。
for(var i=2;i<=num/2;i++){
if(num%i===0){
return false;
}
}
return true;
}
//拓展3
// function isPrime(num){
// //除了自身和1以外，不能被其他数整除。
// //判断一个数是不是指数，只需要判断到他的平方根，超过平方根在判断，无意义。
// //因为一个数是由两个数相称得到的，一个变大，另外一个必然变小，那么判断到这个数的平方根就已经是极限了，不必超过平方根
// for(var i=2;i<=Math.sqrt(num);i++){
// if(num%i===0){
// return false;
// }
// }
// return true;
// }
</script>
</body>
</html>
5.函数名、函数体、函数加载
函数名，就等于整个函数。执行函数，就等于函数的功能+返回值。 js加载的时候只加载函数名，不加载函数体
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//函数名，就等于整个函数。
//执行函数，就等于函数的功能+返回值；
// js加载的时候只加载函数名，不加载函数体
//打印函数名，就等于打印整个函数。
console.log(fn);
//打印执行函数，就等于打印函数的返回值。
console.log(fn()); //函数中包函数，先执行里面，后执行外面。
function fn(){
var arr = [1,3,3];
}
</script>
</body>
</html>
6.函数的定义
三种定义方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// //第一种定义方法最强大，定义完毕后，在哪里使用都可以，无位置限制。
// fn1();
// //后两种定义方法是有局限性的。（使用函数必须在定义函数之后）
// fn2();
// fn3();
//第一种
function fn1(){
console.log("我是第一种定义方法！");
}
//第二种(匿名函数)，函数不会被提前，使用必须在定义之后
var fn2 = function (){
console.log("我是第二种定义方法！");
}
//第三种
var fn3 = new Function("console.log(‘我是第三种定义方法！‘)");
// fn1();
// fn2();
// fn3();
</script>
</body>
</html>
7.变量和作用域
局部变量：只有局部能够访问到的变量
全局变量：在哪里都能访问的变量
隐式全局变量
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//变量问题：根据作用范围，变量可以分为局部变量和全局变量。
//局部变量：只有局部能够访问的变量。存在的时间比较短，执行完函数之后会被回收。
//函数内部用var定义的变量。
//全局变量：在哪里都能访问到的变量。
//函数外部或者进入javascript之后立即定义的变量和函数内部不带有var的变量。
var num3 = 333;
//全局变量
// //函数加载的时候，只加载函数名，不加载函数体。
function fn(){
//局部变量，
var num1 = 111;
//全局变量（成员变量）
num2 = 222;
console.log(num3);
}
//
fn();
// console.log(num1); 访问不到，因为num1是局部变量
console.log(num2);
// 执行fn()之后num2才能访问到，因为函数加载时候只加载函数名，不加载函数体
console.log(num3);
// //块级作用域，js中没有。
// {
// var aaa = 1;
// }
// 作用域指的是作用范围
//隐式全局变量
function fn(){
//b和c都是隐式全局变量
var a = b = c = 1;
//e和f都是隐式全局变量(分号相当于换行)
var d = 1;e =2;f=3;
//g和i都不是隐式全局变量 ，g，h，i全是局部变量
// ，相当于共用一个var
var g = 1,h= 2,i=3;
}
fn();
console.log(b);
console.log(c);
console.log(e);
console.log(f);
// console.log(a);
// console.log(h);
// console.log(i);
</script>
</body>
</html>
8.变量声明提升和预解析
预解析：js的解析器在页面加载的时候，首先检查页面上的语法错误。把变量声明提升起来。
变量值提升变量名，不提升变量值。而用function直接定义的方法是整体提升。
1.查看语法错误。
2.变量声明提升和函数整体提升(变量声明提升的时候，只提升变量名，不提升变量值)
3.函数范围内，照样适用。
函数就近原则
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// console.log(aaa);报错
// console.log(aaa);
// var aaa; undefined 预解析
// console.log(aaa);
// var aaa=111; undefined 预解析，但是变量值提升变量名，不提升变量值
var aaa;
console.log(aaa);
aaa = 111;
fn();
// 形参bbb相当于局部变量
function fn(bbb){
//
//函数的就近原则。局部变量能解决的不会使用全局变量。
// console.log(a); 报错
// var a;
// console.log(a); undefined
var aaa;
//函数的就近原则。局部变量能解决的不会使用全局变量。这里的aaa是函数内部定义的局部变量
console.log(aaa);
// undefined 变量声明提升在函数内部照样实用。
aaa = 222;
}
function fn2(bbb){
//两个函数中的局部变量不会相互影响。
console.log(bbb);
}
</script>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 1、-----------------------------------
var num = 10;
fun();
function fun(){
//变量声明提升 只提升变量名，不提升变量值。var num;
console.log(num);
// undefined
var num = 20;
}
//// 2、-----------------------------------
var a = 18;
f1();
function f1(){
var b=9;
console.log(a);
// undefined，就近原则，函数内部有a的定义，此时a是局部变量；根据变量声明提升，只提升变量名，不提升变量值。
console.log(b);
// 9
var a = ‘123‘;
}
//// 3、-----------------------------------
f2();
console.log(cc);
// 9 输出顺序4 cc是全局变量，故有值
console.log(bb);
console.log(aa);
// 报错，aa是局部变量，函数执行结束变量已经销毁，没有定义过
function f2(){
var aa = bb = cc = 9;
// bb、cc隐式全局变量
console.log(aa);
// 9 输出顺序1
console.log(bb);
// 9 输出顺序2
console.log(cc);
// 9 输出顺序3
}
</script>
</body>
</html>
时间： 2024-10-28 11:13:55