google企业网站seo,石家庄专业商城网站制作,网站微信认证费用多少钱,十六局集团门户网1 函数的定义与调用
1.1 初识函数
函数是用于封装一段完成特定功能的代码。
相当于将一条或多条语句组成的代码块包裹起来#xff0c;在使用时只需关心参数和返回值#xff0c;就能完成特定的功能#xff0c;而不用了解具体的实现。
// 内置函数
console.log(parseFloat…1 函数的定义与调用
1.1 初识函数
函数是用于封装一段完成特定功能的代码。
相当于将一条或多条语句组成的代码块包裹起来在使用时只需关心参数和返回值就能完成特定的功能而不用了解具体的实现。
// 内置函数
console.log(parseFloat(7.26e-2)); // 返回解析后的浮点数0.0726
console.log(isNaN( )); // 判断是否是NaNfalse
console.log(parseInt(15.99)); // 返回解析后的整数值15parseFloat() 用于返回解析字符串后的浮点数。 isNaN() 判断给定参数是否为NaN判断结果为是返回true否则返回false。 parseInt() 用于返回解析字符串后的整数值。
除了使用内置函数外JavaScript 中还可以根据具体情况自定义函数提高代码的复用性、降低程序维护的难度。
函数的定义由以下4部分组成
关键字 function。函数名。参数。函数体。
function 函数名([参数1, 参数2, ……])
{函数体……reutrn
}function定义函数的关键字。函数名可由大小写字母、数字、下划线_和 $ 符号组成但是函数名不能以数字开头且不能是JavaScript 中的关键字。参数是外界传递给函数的值它是可选的多个参数之间使用“,”分割。函数体是专门用于实现特定功能的主体由一条或多条语句组成。返回值在调用函数后若想得到处理结果在函数体中可用 return 关键字返回。 注意函数的名称最好不要使用 JavaScript 中的保留字避免在将来被用作关键字导致出错。 1.2 参数设置
函数可以根据参数的设置分为以下两种
无参函数有参函数
无参函数
无参函数适用于不需要提供任何数据即可完成指定功能的情况。
function greet() {console.log(Hello everybody!);
}注意在自定义函数时即使函数的功能实现不需要设置参数小括号“()”也不能够省略。 有参函数
有参函数适用于开发时函数体内的操作需要用户传递数据的情况。
形参指的就是形式参数具有特定的含义在定义有参函数时设置的参数。简单理解为不用声明的变量。 用于接收实参的 实参指的是实际参数也就是具体的值在函数调用时传递的参数。函数调用的时候实参值是传递给形参的。实参和形参的多个参数之间用逗号(,)分隔。
function maxNum(a, b) {a parseInt(a);b parseInt(b);return a b ? a : b;
}获取函数调用时传递的所有实参适用于开发时函数体形参不确定的情况。
实现方式利用 arguments 对象在函数体内可获取函数调用时传递的实参。其他操作length 属性可获取实参的总数具体实参值可利用数组遍历方式。
function transferParam() {console.log(arguments.length);console.log(arguments);
}形参和实参个数不匹配
参数个数说明实参个数等于形参个数输出正确结果实参个数多于形参个数只取到形参的个数实参个数小于形参个数多的形参定义为 undefined结果为 NaN
function sum(num1, num2) {console.log(num1 num2);
}
sum(100, 200); // 300形参和实参个数相等输出正确结果
sum(100, 400, 500, 700); // 500实参个数多于形参只取到形参的个数
sum(200); // 实参个数少于形参多的形参定义为undefined结果为NaN注意在 JavaScript 中形参的默认值是undefined 含有默认值的参数与剩余参数
函数参数的设置在 ES6 中提供了更灵活的使用方式如设置形参的默认值等。
function greet(name, say Hi, I\m ) {console.log(say name);
}函数的形参在设置时还可以为其指定默认值。当调用者未传递该参数时函数将使用默认值进行操作。
扩展运算符
函数定义时还可用“…变量名”的方式动态接收用户传递的不确定数量的实参。
// 一个确定形参
function transferParam(num1, ...theNums) {theNums.unshift(num1);console.log(theNums);
}// 无确定的形参
function transferParam(...theNums) {console.log(theNums);
}transferParam(99, 33, 56, 88, 90, 662);1.3 函数的调用 当函数定义完成后要想在程序中发挥函数的作用必须得调用这个函数。 函数的调用非常简单只需引用函数名并传入相应的参数即可。 函数声明与调用的编写顺序不分前后。
函数名称([参数1, 参数2, ……])[参数1参数2…]是可选的用于表示形参列表其值可以是零个、一个或多个。
1.4 练习作业
字符串大小写转换 编写HTML表单设置两个文本框和两个按钮文本框显示转换前后数据按钮用于转换。为按钮添加点击事件并利用函数处理。编写函数根据传递的不同参数执行不同的转换操作。将转换后的数据显示到对应位置。 封装函数求2个数中的最大值 求出求两个数中的最大值求出三个数中的最大值。
2 变量的作用域
声明变量后就可以在任意位置使用该变量嘛不是的。
函数内 var 关键字声明的变量不能在函数外访问。
function info() {var age 18;
}
// 输出结果Uncaught ReferenceError: age is not defined
console.log(age);变量的使用是有作用域范围的。
作用域划分全局作用域、函数作用域和块级作用域ES6提供的。
不同作用域对应的变量全局变量、局部变量、块级变量ES6提供的。
// demo.js 全局作用域
// -- 函数 函数作用域
// -- 语句(含有{}) 块级作用域// 全局作用域
var global global;
function add(){// 函数作用域var fuc fuc;// 块级作用域for(let a1;a5;a){console.log(a);}
}全局变量不在任何函数内声明的变量显示定义或在函数内省略 var 声明变量隐式定义都称为全局变量。 作用范围它在同一个页面文件中的所有脚本内都可以使用。
// 全局变量
var global global;
function add(){// 全局变量fuc fuc;
}局部变量在函数体内利用 var 关键字定义的变量称为局部变量它仅在该函数体内有效。
var global global;
function add(){// 局部变量var fuc fuc;
}块级变量ES6 提供的 let 关键字声明的变量称为块级变量仅在“{}”中间有效如 if、for 或 while 语句等。
function add(){// 块级变量let fuc fuc;// 块级变量for(let a1;a5;a){console.log(a);console.log(fuc);}console.log(fuc);console.log(a);
}注意 当使用 var 来声明或者声明并赋值变量时无论声明位置在何处声明本身这个语句会在当前 script 标签中的最顶端被执行无论函数在何处被声明函数声明本身会在任何代码前被执行 垃圾回收机制
在 JavaScript 中局部变量只有在函数的执行过程中存在而在这个过程中会为局部变量在栈或堆内存上分配相应的空间以存储它们的值然后在函数中使用这些变量直到函数结束。一旦函数执行结束局部变量就没有存在必要了此时 JavaScript 就会通过垃圾回收机制自动释放它们所占用的内存空间。当创建对象之后对所有这个对象的变量赋值为null时这个对象就永远无法被操作这个对象就称为垃圾js 拥有自动的垃圾回收机制不需要也不能手动地回收垃圾能做的只有将不再使用的对象赋值为 null
在开发中若要保留局部变量的值可以通过以下两种方式实现
// 第1种方式利用return返回
function test(num) {num num 1;return num;
}
var num test(24);
console.log(num); // 输出结果25// 第2种方式利用全局变量保存
var memory;
function test(num) {memory num 1;
}
test(24);
console.log(memory); // 输出结果253 匿名函数
3.1 函数表达式
所谓函数表达式指的是将声明的函数赋值给一个变量通过变量完成函数的调用和参数的传递它也是 JavaScript 中另一种实现自定义函数的方式。
// 函数表达式
var fn function sum(num1, num2) {return num1 num2;
};
fn();// 函数声明方式
sum();
function sum(num1, num2) {return num1 num2;
};函数的定义方式不同函数的调用方式不同函数定义与调用顺序不同
3.2 匿名函数
匿名函数指的是没有函数名称的函数。
可以有效的避免全局变量的污染以及函数名的冲突问题。
既是函数表达式的另一种表示形式又可通过函数声明的方式实现调用。
// 函数表达式中省略函数名
var fn function (num1, num2) {return num1 num2;
};
fn(1, 2);// 自调用方式
(function (num1, num2) {return num1 num2;
})(2, 3);// 处理事件
document.body.onclick function () {alert(Hi, everybody!);
};箭头函数
ES6 中引入了一种新的语法编写匿名函数我们称之为箭头函数。
一个箭头函数表达式的语法比一个函数表达式更短。
// 语法
(p1, p2, …, pN) { statements }
/*
参数
多个参数(p1, p2, …, pN)
一个参数(p1) 或 p1
没有参数() 或 _函数体
函数体{ statements }
返回值{ return expression; }
函数体只有一条语句expression
*/// 设置1个参数
var fn1 x x 2;
console.log(fn1(4)); // 输出结果6// 设置2个参数
var fn2 (x, y) x y;
console.log(fn2(1, 2) ); // 输出结果3箭头函数中箭头“”不是操作符或者运算符但是箭头函数相比普通的函数受操作符的优先级影响。
3.3 回调函数
所谓回调函数指的就是一个函数 A 作为参数传递给一个函数 B然后在 B 的函数体内调用函数 A。此时我们称函数 A 为回调函数。
匿名函数常用作函数的参数传递实现回调函数。
函数体中某部分功能由调用者决定此时可以使用回调函数。
在 JavaScript 中还为数组提供了很多利用回调函数实现具体功能的方法。
方法名称功能描述格式find()返回数组中满足回调函数的第一个元素的值否则返回 undefinedarray.find(function(currentValue, index, arr),thisValue);every()测试数组的所有元素是否都通过了回调函数的测试array.every(function(currentValue,index,arr), thisValue);some()测试数组中的某些元素是否通过由回调函数实现的测试array.some(function(currentValue,index,arr),thisValue);forEach()对数组的每个元素执行一次提供的函数array.forEach(function(currentValue, index, arr), thisValue);map()创建一个新数组其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果array.map(function(currentValue,index,arr), thisValue);reduce()对累加器和数组中的每个元素从左到右应用一个函数将其减少为单个值array.reduce(function(total, currentValue, currentIndex, arr), initialValue);reduceRight()接收一个函数作为累加器accumulator和数组的每个值从右到左将其减少为单个值array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue);
/* array.find(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: find() 对于空数组函数是不会执行的。
注意: find() 并没有改变数组的原始值。
*/
// 获取数组中年龄大于 18 的第一个元素
var ages [3, 10, 18, 20];
function checkAdult(age) {return age 18;
}
console.log(ages.find(checkAdult));/* array.every(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: every() 对于空数组函数是不会执行的。
注意: every() 并没有改变数组的原始值。
*/
// 检测数组中所有元素是否都大于等于 18
var ages [32, 33, 16, 40];
function checkAdult(age) {return age 18;
}
console.log(ages.every(checkAdult));/* array.some(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: some() 对于空数组函数是不会执行的。
注意: some() 并没有改变数组的原始值。
*/
// 检测数组中是否有元素大于 18
var ages [3, 10, 18, 20];
function checkAdult(age) {return age 18;
}
console.log(ages.some(checkAdult));/* array.forEach(function(currentValue, index, arr), thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: forEach() 对于空数组函数是不会执行的。
注意: forEach() 并没有改变数组的原始值。
*/
// 获取数组中所有值的总和
var sum 0;
var numbers [65, 44, 12, 4];
numbers.forEach(function (item) {sum item;
});
console.log(sum);/* array.map(function(currentValue,index,arr), thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: map() 对于空数组函数是不会执行的。
注意: map() 并没有改变数组的原始值。
*/
var arr [a, b, c];
arr.map(function(value, index) {console.log(value, index);
});/* array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
initialValue 可选。传递给函数的初始值
reduce() 对于空数组是不会执行回调函数的。
*/
var numbers [65, 44, 12, 4];
function getSum(total, num) {return total num;
}
console.log(numbers.reduce(getSum));/* array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue);
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
initialValue 可选。传递给函数的初始值
reduce() 对于空数组是不会执行回调函数的。
*/
var numbers [65, 44, 12, 4];
function getSum(total, num) {return total num;
}
console.log(numbers.reduceRight(getSum));参数map() 的参数是一个回调函数fn。fn的第1个参数表示当前数组的元素。fn的第2个参数表示对应元素的索引下标。返回值回调函数每次执行后的返回值会组合起来形成一个新数组。结果在控制台依次可查看到“a 0”、 “b 1”和“c 2”。
// 利用 map() 方法实现二维数组的转置
var arr [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // 待转置的数组
var reverse arr[1].map(function (col, i) { // 利用i获取转置后数组元素的下标return arr.map(function (row) { // 返回转置后新组合而成的数组元素return row[i]; // 返回转置前数组元素的指定索引的元素});
});
console.log(reverse);4 嵌套与递归
4.1 函数嵌套与作用域链
嵌套函数是在一个函数内部存在另一个函数的声明。
内层函数只能在外层函数作用域内执行在内层函数执行的过程中若需要引入某个变量首先会在当前作用域中寻找若未找到则继续向上一层级的作用域中寻找直到全局作用域我们称这种链式的查询关系为作用域链。
var i 10;function fn1() {fn2();
}function fn2() {console.log(i);
}fn1();4.2 递归调用
递归调用是函数嵌套调用中一种特殊的调用。它指的是一个函数在其函数体内调用自身的过程这种函数称为递归函数。
简单理解 函数内部自己调用自己这个函数就是递归函数
function factorial(n){if(n1){return 1;}return n*factorial(n-1);
}
console.log(factorial(4));注意递归调用虽然在遍历维数不固定的多维数组时非常合适但它占用的内存和资源比较多同时难以实现和维护因此在开发中要慎重使用函数的递归调用。 由于递归很容易发生栈溢出错误所以必须要加退出条件 return 4.3 练习作业
求斐波那契数列第N项的值 斐波那契数列又称黄金分割数列如 “1, 1, 2, 3, 5, 8, 13, 21……”这个数列从第3项开始每一项都等于前两项之和。代码实现原理 小于0给出错误提示信息。等于0返回0。等于1返回1。大于1按找到的规律并利用函数递归调用实现。
5 闭包函数
5.1 什么是闭包函数
在 JavaScript 中内嵌函数可以访问定义在外层函数中的所有变量和函数并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用“闭包”来实现。
所谓“闭包”指的就是有权访问另一函数作用域内变量局部变量的函数。它最主要的用途是以下两点
可以在函数外部读取函数内部的变量。可以让变量的值始终保持在内存中。 注意由于闭包会使得函数中的变量一直被保存在内存中内存消耗很大所以闭包的滥用可能会降低程序的处理速度造成内存消耗等问题。 5.2 闭包函数的实现
闭包的常见创建方式就是在一个函数内部创建另一个函数通过另一个函数访问这个函数的局部变量。
// 闭包closure指有权访问另一个函数作用域中变量的函数。
// 一个作用域可以访问另外一个函数的局部变量
// 我们 fn 外面的作用域可以访问 fn 内部的局部变量
// 闭包的主要作用: 延伸了变量的作用范围
function fn() {var num 10;return function() {console.log(num);}
}
var f fn();
f();点击 li 输出索引号
bodyul classnavli榴莲/lili臭豆腐/lili鲱鱼罐头/lili大猪蹄子/li/ulscriptvar lis document.querySelector(.nav).querySelectorAll(li);for (var i 0; i lis.length; i) {lis[i].index i;lis[i].onclick function() {// console.log(i);console.log(this.index);}}// 2. 利用闭包的方式得到当前小li 的索引号for (var i 0; i lis.length; i) {// 利用for循环创建了4个立即执行函数// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量(function(i) {// console.log(i);lis[i].onclick function() {console.log(i);}})(i);}/script
/body6 练习作业
使用函数实现从小到大排序 给出一组数据要求按照从小到大进行排序。 函数求阶乘 给出一个数利用函数直接可以求出阶乘计算结果和求出阶乘函数的和。 判断是否是闰年 用户输入一个年份通过函数来判断输入的年份是闰年还是平年。 函数计算圆的面积和周长 定义周长和面积函数用程序来计算圆的面积和周长。 两个整数相互交换点击为盒子添加边框样式网页计算器 编写HTML页面两个文本框用于输入数据4个按钮用于完成加减乘除运算最后一个文本框显示计算结果。编写calc()函数获取并转换输入的数据判断不合法给出提示调用指定函数完成相关计算。 ) { // 利用for循环创建了4个立即执行函数 // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量 (function(i) { // console.log(i); lis[i].onclick function() { console.log(i); } })(i); }
6 练习作业
使用函数实现从小到大排序 给出一组数据要求按照从小到大进行排序。 函数求阶乘 给出一个数利用函数直接可以求出阶乘计算结果和求出阶乘函数的和。 判断是否是闰年 用户输入一个年份通过函数来判断输入的年份是闰年还是平年。 函数计算圆的面积和周长 定义周长和面积函数用程序来计算圆的面积和周长。 两个整数相互交换点击为盒子添加边框样式网页计算器 编写HTML页面两个文本框用于输入数据4个按钮用于完成加减乘除运算最后一个文本框显示计算结果。编写calc()函数获取并转换输入的数据判断不合法给出提示调用指定函数完成相关计算。编写函数实现加、减、乘、除运算。
