`
liu_87663663
  • 浏览: 36495 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 内联函数

 
阅读更多

 

<script type="text/javascript">
    // 函数式编程:
    // 描述我们要做什么,而不是我们如何去做。这意味着我们工作在一个更高的抽象层次。函数式编程将导致更精巧、清晰和令人愉快的代码。

    // 最基础的forEach
    function forEach(array, action) {
        for (var i = 0; i < array.length; i++) {
            action(array[i]);
        }
    }

    // 测试forEach
    forEach(["Pear", "Apple"], function(name) {
        console.log(name);
    });

    // ------------------------------------------------ //
    // 实现reduce
    function reduce(combine, base, array) {
        forEach(array, function(element) {
            base = combine(base, element);
        });
        return base;
    }

    // 使用reduce实例1:计算数组中的0的个数
    function countZeros(array) {
        function counter(total, elem) {
            return total + (elem == 0 ? 1 : 0);
        }

        return reduce(counter, 0, array);
    }

    alert("countZeros by reduce: " + countZeros([1, 3, 0, 4, 7, 0]));

    // 使用reduce实例2:求和
    function sum(array) {
        function add(a, b) {
            return a + b;
        }

        return reduce(add, 0, array);
    }

    alert("sum by reduce: " + sum([1, 2, 3, 5]));


    // ------------------------------------------------ //

    // 实现map
    function map(func, array) {
        var result = [];
        forEach(array, function(elem) {
            result.push(func(elem));
            // 对于map,func函数一般只有一个参数,所以用func(elem)
        });

        return result;
    }

    // 利用map实现数组的每个数字翻倍
    var array = [1, 2, 3, 4, 5];
    var mappedArray = map(function(elem) {
        return elem * 2;
    }, array);
    console.log(mappedArray);

    // 利用map实现数组向下取整
    var array2 = [1.3, 4.5, 6.7, 8, 9.2];
    var mappedArray2 = map(Math.floor, array2);
    console.log(mappedArray2);


    // ------------------------------------------------ //
    
    // 实现filter:我自己根据上面两个补充实现的
    function filter(func, array) {
        var result = [];
        forEach(array, function(elem) {
            if(func(elem))
                result.push(elem);
        });
        
        return result;
    }
    
    // 使用filter过滤出偶数
    function isEven(elem) {
        return elem % 2 == 0;
    }
    var array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var filterArray = filter(isEven, array3);
    console.log(filterArray);
    
</script>
 

 

分享到:
评论

相关推荐

    eslint-plugin-inlinecheck:检查v8引擎是否会将某个函数视为内联函数

    检查v8引擎是否会将某个函数视为内联函数。 安装 您首先需要安装 : $ npm i eslint --save-dev 接下来,安装eslint-plugin-inlinecheck : $ npm install eslint-plugin-inlinecheck --save-dev 注意:如果全局...

    Javascript函数手册.rar

    通过HTML,手册可能包含了丰富的内联示例、注释和结构化的章节,帮助用户理解和学习JavaScript函数。 在JavaScript中,函数可以有多种类型,包括匿名函数、箭头函数、默认参数、剩余参数以及立即执行的函数表达式...

    元素的内联事件处理函数的特殊作用域在各浏览器中存在差异

    内联事件处理函数的作用域链并非遵循常规的JavaScript作用域规则,而是与元素、DOM结构以及浏览器的实现细节紧密相关。 首先,内联事件处理函数的作用域链有一个独特的结构。在执行时,它通常包含以下几个部分: 1...

    next-fun:Next.js 的内联服务器端函数

    next-fun 是一种在您的服务器上执行内联函数而不会妥协的方法。 只需将 $ 添加到页面路由中的任何函数,它就会自动成为服务器端函数。为什么? 我已经在一个项目上工作了一段时间,我发现自己在 api 路由中编写了很...

    .net中前台javascript与后台c#函数相互调用问题.docx

    ### .NET中前台JavaScript与后台C#函数相互调用问题详解 #### 一、概述 在Web应用程序开发中,前后端交互是常见的需求之一。对于.NET框架下的ASP.NET Web Forms应用,实现前后端(即JavaScript与C#)之间的数据...

    reflective-bind:消除由内联函数导致的React组件中的浪费性重新渲染

    反光绑定使用反射绑定,您可以在渲染中自由使用内联函数,而不必担心React纯组件的浪费地重新渲染。 它适用于无状态功能组件和类组件。 最好的部分是,它几乎不需要任何代码更改 :raising_hands: ,以获取有关反射...

    javascript笔记 javascript笔记

    这种方式常见于`&lt;a&gt;`、`&lt;input&gt;`等标签中,通过事件属性如`onclick`、`onmousedown`等来触发JavaScript函数。 **示例1:** ```html &lt;a href="javascript:document.write('Hello World!')"&gt;Click ``` - **解释:** ...

    CSS技术和JavaScript技术

    例如,MM_popupMsg函数用于弹出消息框,MM_callJS函数用于执行JavaScript代码。setInterval函数用于实现日期时间的显示,bgsound标签用于加载音乐。 CSS技术和JavaScript技术是网页开发中不可或缺的一部分, CSS...

    可用于内联样式库的一组动画

    标题中的“可用于内联样式库的一组动画”指的是在前端开发中使用JavaScript或者特定的库,如React,来实现页面元素的动态效果。这些动画通常是通过内联样式或者CSS-in-JS的方式添加到元素上,以提高性能和灵活性。...

    JavaScript课件PPT下载

    事件处理器可以是内联、HTML属性或JavaScript代码中的函数。 9. **AJAX与Fetch API**:异步JavaScript和XML(AJAX)允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。Fetch API是现代JavaScript中...

    突破JavaScript编程实例五十讲

    JavaScript支持函数表达式和函数声明。 4. **对象** 对象是键值对的集合,可以看作是关联数组。对象可以通过字面量语法或构造函数创建。 5. **数组** 数组是一系列有序的元素,可以是任何数据类型。JavaScript中...

    一个不错的JavaScript的学习软件

    2. 事件处理:JavaScript可以通过绑定事件监听器来响应用户的交互,如`addEventListener()`用于添加事件监听,`removeEventListener()`用于移除,以及`onclick`,`onmouseover`等内联事件处理。 3. 数据操作:`...

    C# javaScript函数的相互调用

    总结来说,实现C#与JavaScript的相互调用,主要利用***的页面生命周期机制和Web Forms的回传特性,结合HTML的隐藏字段、内联表达式,以及JavaScript的事件监听和函数调用机制。这些技术点确保了可以在客户端和服务器...

    javascript 指南

    函数也可以作为对象的属性,甚至可以作为参数传递,这是JavaScript的高阶函数特性。另外,JavaScript还引入了箭头函数(Arrow Functions)和默认参数,如: ```javascript const sum = (a, b = 0) =&gt; a + b; ``` ##...

    javascript基础实验含源码

    首先,我们看到有"js.htm"和"js .htm"这两个文件,它们可能是HTML文档,其中包含了内联JavaScript代码。在HTML中,JavaScript通常通过`&lt;script&gt;`标签引入,用于添加交互性。这两个文件可能包含了基本的JavaScript...

    JavaScript总结笔记

    - **内联脚本**:将JavaScript代码直接写在HTML标签中,例如`onclick`属性。 - **内部脚本**:使用`&lt;script&gt;`标签将脚本代码插入HTML文档内。 - **外部脚本**:通过`&lt;script src="path/to/script.js"&gt;&lt;/script&gt;`链接...

    JavaScript

    - **内联方式**:JavaScript代码可以放置在HTML文档内部,通常使用`&lt;script&gt;`标签包裹。例如: ```html // JavaScript 代码 ``` - **外部引用**:如果多个HTML页面共享相同的JavaScript脚本,可以将这些脚本...

    jit JavaScript

    JIT的优化策略通常包括死代码消除、常量折叠、内联函数等。 JavaScript引擎如V8(Chrome和Node.js使用)、SpiderMonkey(Firefox使用)以及JSC(Safari使用)都实现了JIT技术。这些引擎在执行JavaScript时,会根据...

    超链接怎么正确调用javascript函数

    需要注意的是,为了提高代码可维护性和可读性,通常建议将JavaScript代码分离到外部脚本文件或使用`&lt;script&gt;`标签内部定义,而不是直接在HTML中内联编写。例如: ```html function Foo() { // 执行所需操作 } ...

    JavaScript 权威指南(第四版).pdf

     16.3 脚本化内联样式427  16.4 查询计算出的样式431  16.5 脚本化CSS类433  16.6 脚本化样式表436  第17章 事件处理440  17.1 事件类型442  17.2 注册事件处理程序451  17.3 事件处理程序的调用454  17.4 ...

Global site tag (gtag.js) - Google Analytics