JavaScript进阶系列02,函数作为参数以及在数组中的应用

有时候,把函数作为参数可以让代码更简洁。

        var calculator = {
            calculate: function(x, y, fn) {
                return fn(x, y);
            }
        };

        var sum = function(x, y) { return x + y; },
            diff = function (x, y) { return x - y; };

        var sumResult = calculator.calculate(2, 1, sum),
            diffResult = calculator.calculate(2, 1, diff);

        alert(sumResult + " " + diffResult);

变量sum和diff代表的函数参数和calculator对象的calculate方法的前2个参数保持一致。

□ 数组的every, some, filter方法参数可以是函数

       var fruit = ["apples", "oranges", "bananas", "grapes"];

        //判断是否是字符串
        function isString(value, index, array) {
            return typeof value == "string";
        }

        //判断每个数组长度是否为1
        function isLengthOne(value, index, array) {
            return value.length === 1;
        }

        //判断是否有g开头的
        function startsWithG(value, index, array) {
            return value[0] === "g";
        }

        //过滤以a和b开头的数组元素
        function startsWithAB(value, index, array) {
            return value[0] === "a" || value[0] === "b";
        }

        var result = fruit.filter(startsWithAB);

        //打印
        alert(fruit.every(isString));//判断每个数组元素的类型
        alert(fruit.every(isLengthOne));//判断是否每个数组元素都为1
        alert(fruit.some(startsWithG));//判断是否有一些以G开头
        alert(result); //过滤结果


以上,every, some, filter方法参数大致是every(value, index, array, fn),所以自定义函数的参数必须和这前3个参数保持一致。

□ 数组的forEach, map方法参数可以是函数

※ 数组的forEach方法

        var fruit = ["apples", "oranges", "bananas", "grapes"];

        function doSth(value, index, array) {
            alert(value);
        }

        fruit.forEach(doSth);

forEach方法,只针对数组元素进行操作,不返回新的数组。

※ 数组的map方法

        var fruit = ["apples", "oranges", "bananas", "grapes"];

        function doMap(value, index, array) {
            return "i like " + value;
        }

        var result = fruit.map(doMap);
        alert(result);

map方法,不仅对数组元素操作,而且返回新的数组。

“JavaScript进阶系列”包括:

JavaScript进阶系列01,函数的声明,函数参数,函数闭包

JavaScript进阶系列02,函数作为参数以及在数组中的应用

时间: 2024-08-01 22:37:39

JavaScript进阶系列02,函数作为参数以及在数组中的应用的相关文章

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y); }; var sum = function(x, y) { return x + y; }; var diff = function(x, y) { return x - y; }; var sumResult = calculate(1, 2, sum), diffResult = calcu

JavaScript进阶系列01,函数的声明,函数参数,函数闭包

本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调用我"); } 通过这种方式声明的函数属于Window对象,可以在任何地方调用,即在doSth方法的之前和之后都可以调用. 可以在doSth方法之前调用: doSth(); function doSth() { alert("可以在任何时候调用我"); } 可以在doSth方法之

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 □ 事件必须在页面元素加载之后起效 有这样一段简单的代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style>

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件 创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(

JavaScript进阶系列07,鼠标事件

鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keypress事件,而会触发Keydown和Keyup事件,这就是Keypress事件与Keydown.Keyup事件的不同之处.另外,通常使用Keypress事件来获取用户输入信息. 继续使用"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件

JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = { firstName: "Darren", lastName: "Ji", getFullName: function() { return this.firstName + " " + this.lastName; } }; 如果需要创建2个结

javascript如何给事件处理函数传递参数

javascript如何给事件处理函数传递参数:在应用中可能需要给注册的事件处理函数传递参数,但是会发现好像无法实现直接传递,下面就简单介绍一下如何给事件处理函数传递参数.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

JavaScript基本数据类型,函数对象,表,数组,字符串,函数调用

直接上代码了, 1 cc.Class({ 2 extends: cc.Component, 3 4 properties: { 5 6 }, 7 //JS基本数据_函数对象_表_数组_字符串_函数调用 8 onLoad:function () { 9 //基本数据类型 10 //1整数 2 小数 3 逻辑变量真/假 cc.log();进行打印 11 console.log(1); 12 console.log(2.0); 13 console.log(true); 14 15 /*1: var

JavaScript 的in 操作符 (“如何判断某值是否数组中的元素”?)

在编写JavaScript时,遇到一个常见的问题"如何判断某值是否数组中的元素"?这让我想起了PHP中的in_array()函数和Python中in 操作符.但JavaScript似乎没有内置类似的函数,而其in 操作符的作用也有点不同.通过查询相关的资料,我发现JavaScript的in 操作符还是挺有用的. 一.问题让我想到in 操作符,正是因为这样一个问题:"如何判断某值是否数组中的元素"?在PHP中,您可能会这样来处理: $os = array("