(五).JavaScript的函数
1. 函数
1.1 函数基础简介
- 函数介绍
函数：具有特定功能的代码块
本质：一种对象数据类型
功能：1. 代码复用 2. 项目模块化
函数组成（两者必须同时存在）：
1. 函数定义
2. 函数调用
有声明，没调用，函数不会生效；
没声明，有调用。引用类型错误
-
函数的定义方式（三种，本质上都是
new Function()）- 函数声明定义
function fun1() { console.log(11); } console.log(fun1); //打印结果 ƒ fun1() { console.log(11); }- 函数表达式定义
var fun2 = function () { console.log(22); } console.log(fun2); //打印结果 ƒ () { console.log(22); }函数声明和表达式定义的区别? 1. 函数声明定义的函数在控制台会带名字 2. 函数表达式定义的函数在控制台不带名字- 构造函数定义
var fun3 = new Function( 'console.log("33");' ); console.log(fun3); //打印结果 ƒ anonymous( ) { console.log("33"); }
1.2 函数的三要素
- 函数声明三要素
function fun1(a, b) {
console.log(a, b);
return 0;
}
功能：看函数名字（函数体是真实逻辑）
参数：形参（形式参数）
形参本质：函数内部定义的变量，可以接收外部传递的实参
返回值：1. return后面的值
只写了return;或者没有return，返回值都是undefined
2. return后面的代码不会执行
- 函数调用三要素
fun1(1, 2);
功能：函数调用的名称必须和函数声明的名字一致
参数：实参（实际参数）
实参本质：给函数声明的形参赋值
返回值：函数调用本质是一个表达式，返回值看return的值
- 函数调用的特殊情况
1. 实参多于形参，可以调用成功，多的实参不会被赋值
fun1(1, 2, 3);
2. 实参少于形参，可以调用成功，少的实参会自动赋值undefined
fun1(1);
1.3 函数三要素案例
// 1.
function fn1(a) {
console.log(a);
}
console.log(fn1); //打印函数的定义
console.log(fn1(12)); //执行fn1(12) ,打印fn(12)返回值 undefined
// 2.
function fn2(a, b, c) {
console.log(a);
console.log(c);
return;
}
console.log(fn2(1, 2)); //1 undefined undefined
// 3.
function fn3(a, b, c) {
console.log(a);
return 45;
console.log(b);
console.log(c);
}
fn3(12, 23, 34); //执行fn3(12,23,34)，只会打印a
// 4.
function fn4(a, b, c) {
console.log(a);
return b;
}
console.log(fn4(12)); // 12 undefined
// 5.
function fn5(b, c) {
console.log(b);
console.log(c);
return 56;
}
console.log(12); //12
console.log(fn5(23, 34)); //23 34 56
console.log(45); //45
1.4 函数的基础案例
1.未知使用参数
2.返回值使用return
// 封装函数打印100遍我爱你
// 1.无参数无返回值
function printLove() {
for (var i = 0; i < 100; i++) {
console.log("我爱你");
}
}
printLove();
// 封装函数打印n遍你想要打印的内容
// 2.有参数无返回值
function printContentN(n, content) {
for (var i = 0; i < n; i++) {
console.log(content);
}
}
printContentN(52, 'i love you');
// 封装函数返回2 + 3的和
// 3.无参数有返回值
function sum() {
return 2 + 3;
}
console.log(sum());
// 封装函数返回n + m的和
// 4.有参数有返回值
function sumNM(n, m) {
return n + m;
}
console.log(sumNM(100, 200));
1.5 函数的强化案例
// 编写函数返回1到n的和
function sum(n) {
var sum = 0;
for (var i = 1; i <= n; i++) {
sum += i;
}
return sum;
}
console.log(sum(100));
// 编写函数返回一个数的阶乘
function factorial(n) {
var total = 1;
for (var i = 1; i <= n; i++) {
total *= i;
}
return total;
}
console.log(factorial(4));
// 编写函数实现返回某个数组的最大值，最小值
// return后面只能返回一个值
function maxAndMin(arr) {
var max = arr[0];
var min = arr[0];
for (var index = 1; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index];
}
if (arr[index] < min) {
min = arr[index];
}
}
//转化成数组返回
return [max, min];
}
console.log('最大值:' + maxAndMin([1, 4, 5, 7, 11, 3, 2])[0]);
console.log('最小值:' + maxAndMin([1, 4, 5, 7, 11, 3, 2])[1]);
// 封装函数加工数组，每一项加10输出
function addNum(arr) {
for (var index = 1; index < arr.length; index++) {
console.log(arr[index] + 10);
}
}
addNum([1, 2, 3, 4, 5]);
// 封装函数实现打印1到N的质数;
function findPrimeNumber(n) {
var flag = true;
for (var i = 1; i <= n; i++) {
for (var j = 2; j < i; j++) {
if (i % j == 0) {
flag = false;
break;
}
}
if (flag & i != 1) {
console.log(i);
}
flag = true;
}
}
findPrimeNumber(10);
// 封装函数返回对数组排序后的结果；
function sort(arr) {
var temp = 0;
// 轮次
for (var i = 0; i < arr.length - 1; i++) {
// 每轮比较次数
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
// 交换位置
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(sort([5, 3, 11, 45, 1, 22, 0, -11]));
// 封装函数返回对数组翻转后的结果
function arrOverturn(arr) {
var temp = 0;
// 折半交换数据
for (var i = 0; i < arr.length / 2; i++) {
temp = arr[i];
arr[i] = arr[arr.length - 1 - i];
arr[arr.length - 1 - i] = temp;
}
return arr;
}
console.log(arrOverturn([1, 3, 5, 7, 9, 100]));
// 封装函数返回对数组去重后的结果
function removeRepeat(arr) {
// 使用遍历新数组的方式
var newArr = [];
var flag = true;
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < newArr.length; j++) {
if (arr[i] == newArr[j]) {
flag = false;
break;
}
}
if (flag) {
newArr[newArr.length] = arr[i];
}
flag = true;
}
return newArr;
}
console.log(removeRepeat([1, 3, 4, 5, 6, 1, 2, 3, 4, 5, 11, -11, 0, 5]));
1.6 函数的分类
第一种区分方式
1、js自带 console.log() parseInt() Number()
2、用户自定义 sum() fun()
第二种区分方式
1、无参无返回值
2、有参无返回值
3、无参有返回值
4、有参有返回值
第三种区分方式
1、普通函数 xxx() xxx.yyyy()
2、构造函数 new xxx()
1.7 函数的作用域
作用域：变量的作用范围
作用：隔离变量
ES5范围分类（函数声明为界）：
全局作用域(在函数声明外部)
局部作用域(函数声明内部)
☆☆☆一个变量的作用域只与函数声明的位置有关，与函数调用的位置无关！
// fn在全局作用域
// c是在局部作用域
var a = 1;
function fn(c) {
var a = 2;
console.log(a);
}
fn();
console.log(a);
1.8 全局变量与局部变量
全局变量：在全局作用域中的变量
局部变量：在局部作用域中的变量
// 第一种
var a = 1;
function fun1() {
var a = 2;
console.log(a, '局部'); //2
}
fun1();
console.log(a, '全局'); //1
// 第二种
var a = 1;
function fun1() {
console.log(a, '局部'); //1
}
fun1();
console.log(a, '全局'); //1
// 第三种
function fun1() {
var a = 2;
console.log(a, '局部'); //2
}
fun1();
console.log(a, '全局');//引用错误，未声明变量a
总结：
1.全局变量和局部变量都存在，各自使用
2.全局变量存在，局部变量不存在，局部可以使用全局变量
3.全局变量存在，局部变量不存在，全局无法使用局部变量
for循环定义的变量也是全局变量
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i); //5
1.9 局部变量不带var的分析
// 局部变量不带var
var a = 10;
var b = 20;
var c = 30;
var d = 40;
function fn() {
var a = 100;
var b = 200;
var c = 300;
var d = 400;
// d = 400;
e = 500;
console.log('局部', a, b, c, d);
console.log('局部', e);
}
fn();
console.log('全局', a, b, c, d);
console.log('全局', e);
局部变量不带var的变量，操作过程：
1.先看函数内部是否声明了这个变量，如果有，这个变量是局部变量
2.如果函数内部没有声明过这个变量，看形参是否有该变量，如果有，该变量就是局部变量
3.如果函数未声明，形参也没有，那么看全局中是否有该变量，如果有，就是在操作全局变量
4.如果全局也没有这个变量，那么会在全局中声明一个变量
版权声明：本文为云语不知原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。