JavaScript前端开发案例教程 函数教学 课堂.ppt

? 4.3 匿名函数 多 学 一 招 箭头函数 // 设置 1 个参数 var fn1 = x => x + 2; console.log(fn1(4));// 输出结果： 6 // 设置 2 个参数 var fn2 = (x, y) => x + y; console.log(fn2(1, 2) );// 输出结果： 3 示 例 ? 4.3 匿名函数 多 学 一 招 箭头函数 值 得 一 提 箭头函数中箭头“ => ”不是操作符或者运算符，但是箭头函数相比普 通的函数受操作符的优先级影响。 ? 4.3 匿名函数 3. 回调函数 概念 ：所谓回调函数指的就是一个函数 A 作为参数传递给一个函数 B ，然后在 B 的 函数体内调用函数 A 。此时，我们称函数 A 为回调函数。 提示 ：匿名函数常用作函数的参数传递，实现回调函数。 应用 ：函数体中某部分功能由调用者决定，此时可以使用回调函数。 ? 4.3 匿名函数 3. 回调函数 在 JavaScript 中还 为数组 提供了很多利用 回调函数 实现具体功能的方法。 方法名称 功能描述 find() 返回数组中满足回调函数的第一个元素的值，否则返回 undefined every() 测试数组的所有元素是否都通过了回调函数的测试 some() 测试数组中的某些元素是否通过由回调函数实现的测试 forEach() 对数组的每个元素执行一次提供的函数 map() 创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果 reduce() 对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值 reduceRight() 接收一个函数作为累加器（ accumulator ）和数组的每个值（从右到左）将其减少为单个值 ? 4.3 匿名函数 3. 回调函数 以 map() 方法为例进行演示，对 arr 数组中的每个元素都按顺序调用一次回调函数。 var arr = ['a', 'b', 'c']; arr.map(function(value, index) { console.log(value, index); }); ? 参数 ： map() 的参数是一个回调函数 fn 。 fn 的第 1 个参数表示当前数组的元素。 fn 的第 2 个参数表示对应元素的索引下标。 ? 返回值 ：回调函数每次执行后的返回值 会组合起来形成一个新数组。 ? 示例结果 ：在控制台依次可查看到， “ a 0 ”、 “ b 1 ”和“ c 2 ”。 ? 4.3 匿名函数 3. 回调函数 思考 ：如何利用 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]; // 返回转置前数组元素的指定索引的元素 }); }); 具体实现 JS 第 4 章 函数 ? 函数的使用 ? 匿名函数 ? 变量的作用域 ? 闭包函数 ? 学习目标 掌握 函数的使用方法 1 2 掌握 变量的作用域 掌握 匿名函数与闭 包函数 3 ? 目录 变量的作用域 函数的定义与调用 匿名函数 ? 点击查看本小节知识架构 ? 点击查看本小节知识架构 嵌套与递归 ? 点击查看本小节知识架构 ? 目录 闭包函数 ? 点击查看本小节知识架构 ? 4.1 函数的定义与调用 1. 初识函数 函数 ：用于封装一段完成特定功能的代码。 相当于将一条或多条语句组成的代码块包裹起来，用户在使用时只需关心参数和 返回值，就能完成特定的功能，而不用了解具体的实现。 ? 4.1 函数的定义与调用 1. 初识函数 console.log(parseFloat('7.26e-2')); // 返回解析后的浮点数： 0.0726 console.log(isNaN(' ')); // 判断是否是 NaN ： false console.log(parseInt('15.99')); // 返回解析后的整数值： 15 观察“内置函数”的使用 ? parseFloat() 用于返回解析字符串后的浮点数。 ? isNaN() 判断给定参数是否为 NaN ，判断结果为是，返回 true ，否则返回 false 。 ? parseInt() 用于返回解析字符串后的整数值。 ? 4.1 函数的定义与调用 1. 初识函数