• javascript挑战编程技能第五题:函数作为javascript的一等公民


    函数作为javascript中的一等公民,不仅像别的语言中的函数一样简单的声明和调用,还可以作为对象和参数传递。

    如以下两种定义方式:

    function test(){

    }

    var test = function(){

    }

    第一个函数像船用函数一样的使用方式,先声明函数,后面再调用函数。

    第二种定义方式是将函数定义成一个对象,它不再是一个函数的声明,而更像是一个函数表达式,后面是调用该对象,该对象又是一个函数,所以拥有函数的特性和执行逻辑。

    这两者说起来很绕,但却是有本质上的区别的。

    这里还有一个问题,使用第二种方式定义的对象,在所有调用要在完成这个对象赋值之后才能进行。

    简单的说,js中会把函数的声明,提到代码的最前面,所以使用第一种函数声明,不管声明顺序如何,只要在同一作用域下,调用就不会出错。

    但第二种方式,如果在给该对象赋值之前,就调用它,会有空对象报错。

    在js中刚还有比较常用的是匿名函数。

    比如:

    function test(callback){

    //一些逻辑

    callback&&callback();

    //执行完逻辑回调函数

    }

    test(function(){

    //这里是一个匿名函数,他作为一个没有名字的对象,可以被调用,但是不会增加新的变量,而影响上下文环境。

    })

    同时以上函数,还可以称之为:高阶函数:因为它将函数作为参数使用(作为返回值使用也算高阶函数)。

    谈到js的函数,不免要说起js中的闭包。

    其实在简单的应用级开发中,并不是很常用到闭包。

    “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

    相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段

    function a(){
    var i=0;
    function b(){
    alert(++i);
    }
    return b;
    }
    var c=a();
    c();

    这段代码有两个特点:
    1、函数b嵌套在函数a内部;
    2、函数a返回函数b。
    这样在执行完var c=a( )后,变量c实际上是指向了函数b,再执行c( )后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:
    当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

    简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。
    在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

    那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

    ---以上几段说明来自百度百科:http://baike.baidu.com/link?url=QBTZwlo6dOjYBiXYCBeBRM9L1VsOkMEutyYSb37twNFevJjBaT1OpgCBej58GEdeRTqHMRr6xXGp6OoCIgv7nopb92dxRk9hBQTNvjiSth3

    js中还有函数的其他说明和用法,这里就不过多介绍了。

    现在开始我们今天的做题挑战吧!

    题目:字母异位词检查程序

    问题描述:

    使用函数将逻辑从其余代码中剥离,使其更容易阅读和维护,

    编写一个程序,比较两个字符串是否为字母异位词,也就是说两个词包含的字母是相同的,只是顺序不同。该程序应提示用户输入两个字符串,输出如下所示:

    请输入两个字符串:

    字符串1:note

    字符串2:tone

    输出:”note“和”tone“是异位词。

    要求:

    使用一个名为isAnagram的函数来实现该程序,接收两个词作为参数,返回true或者false。在主程序中调用该函数。

    检查这两个词的长度是否相同。

    不适用内置的函数实现,使用选择或者循环逻辑开发自己的算法。

    代码实现如下:这里我们写一个很简单的算法。先取第一个字符串中的去匹配第二个字符串中的字符,如果找到就将这个字符从第二个字符中移除,最后判断第二个字符串中的字符是否全部被清空,是就说明是异位词,不是就说明不是异位词。

    这里获取输入的值是用来jquery,使用的是百度的cdn。

    详细代码如下:

    <body>
    <div>请输入第一个字符串:<input  id="firstString" type="text" ></div>
    <div>请输入第二个字符串:<input id="secondString" type="text"></div>
    <button id="account" onclick="checkAnagram()">提交</button>
    <div id="endString">结果:<span id="endText"></span></div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function isAnagram(firstStr,secondStr){
            var firStr = firstStr.split("");
            var secStr = secondStr.split("");
            if(firStr.length !== secStr.length){
                return false;
            }
            for(var key = 0; key < firStr.length; key++){
                for(var key2 = 0; key2 < secStr.length; key2++){
                    if(firStr[key] === secStr[key2]){
                        secStr.splice(key2,1);
                        break;
                    }
                }
            }
            return secStr.length === 0;
        }
        function checkAnagram(){
            var firStr = $("#firstString").val();
            var secStr = $("#secondString").val();
            if(isAnagram(firStr,secStr)){
                $("#endText").html(firStr+"和"+secStr+"是异位词");
            }else{
                $("#endText").html(firStr+"和"+secStr+"不是异位词");
            }
        }
    </script>
    </body>


    第五节课就到这里结束了吧,
    谢谢你的阅读.
    有什么问题可以直接联系我本人微信:yu_xiaohu
    希望大家关注我的个人公众号,有更新会在上面同步发布哦.
    我是小虎Oni,希望你开心.



  • 相关阅读:
    Linux kernel 之 uart 驱动解析
    按键驱动程序(异步通知)
    常用Linux运维命令
    进程上下文、中断上下文及原子上下文
    Linux 设备驱动开发 —— platform设备驱动应用实例解析
    C++中rapidxml用法及例子(源码)
    hpp.h与.h的区别
    使用Visual Studio扩展插件Visual assist X给代码插入注释模板
    VC++ MFC SDI/MDI Ribbon程序的停靠窗格被关闭后如何再次显示
    “ping某个IP地址,如果ping不通则在dos窗口或弹出MsgBox提示原因”的批处理bat命令
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642282.html
Copyright © 2020-2023  润新知