整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

什么是JavaScript函数基础知识(全),让你彻

什么是JavaScript函数基础知识(全),让你彻底搞懂函数

果您已经开始学习JavaScript了,那是时候了解下基本函数了,本章节为大家分享JavaScript基本函数!

什么是函数?

一般来说,函数是经过精心挑选和设计以执行特定任务的子程序

它是一个对象。要执行一个函数,您将调用它,也称为调用函数。您还可以将值传递给函数以在函数中使用。事实上,函数总是会返回一个值。因此,如果您不指定返回值, JavaScript 函数将返回 undefined

什么是 JavaScript 函数?

您可以通过多种方式在代码中定义 JavaScript函数。首先,您将使用函数声明。您可以使用关键字function创建函数声明,然后添加函数的名称。当您使用函数声明时,您将提升函数定义,这将允许您在定义函数之前使用它。

接下来,您有一个任务 JavaScript 函数表达式。这定义了一个匿名或命名的名字 JavaScript 函数。匿名函数是尚未命名的函数。因为函数表达式不能被提升,所以在定义它们之前不能使用它们。

创建函数表达式的较短语法是箭头函数。这种类型的 JavaScript 函数不会创建自己的值。它仅用于编写不同的功能。

参数(arguments)和参数(parameters)

您可能听说过“arguments”和“parameters”这两个术语可以互换使用,这可能会导致您认为它们是同一个东西。虽然这两个术语在涉及 JavaScript 函数时非常相似,但您应该了解一些非常重要的区别。

参数用于定义JavaScript 函数。这意味着参数是在定义 JavaScript 函数是最初创建的名称。在进行函数定义时,您可能会传递多达 255 个 JavaScript 参数。使用逗号将参数与下一个参数隔开。

如何调用函数

当您调用JavaScript 函数时,您正在执行该函数,也称为调用它。要调用函数,首先添加JavaScript 函数的名称,后跟两个括号。为了帮助您更好地理解 JavaScript的这个组件。

如果您当前使用的是Google Chrome,请打开开发者控制台。这将允许您练习 JavaScript 函数。要打开此开发人员控制台,请按 Ctrl + Shift + J(对于 Windows)Cmd + Opt + J(对于 Mac)

首先,让我们定义一个名为 logIt的 JavaScript 函数。这个 JavaScript 函数将有一个参数:“city”。执行完此函数后,我们将名称记录到控制台中。它看起来像这样:

如果你想调用这个函数,你可以调用它并将它传递给一个参数。在此示例中,JavaScript 函数名为 Dallas。它看起来像这样:

如果您的函数没有任何参数,则可以使用一组空括号来调用它。它看起来像这样;

什么是 JavaScript 函数返回?

在 JavaScript 中,除非您另行指定,否则每个函数都将返回undefined。让我们通过调用一个空的JavaScript 函数

在上面的示例中,JavaScript 函数将返回 undefined。要自定义它将返回什么,我们可以使用关键字“return”,然后是我们希望它返回的值。

在上面的示例中,我们已经告诉 JavaScript 函数我们希望它返回false。调用此函数允许这种情况发生。这很重要,因为函数返回的值将返回给函数的调用者。

表达式将创建一个 JavaScript 函数,该函数将给出的一个值是什么 num 参数的两倍的值。然后,您可以调用此 JavaScript 函数并未将返回的值保存到变量中:

注销此测试值会返回结果为 9。关于 return 语句的另一个重要规则是它会立即停止函数。

JavaScript 函数对象

函数本质上是一个函数对象。这是一个事实,即如果某些东西不是原始的,那么它就是一个对象。JavaScript对象用途广泛;它甚至可以让我们将 JavaScript 中的函数作为参数移动到另一个 JavaScript 函数。

当一个 JavaScript 函数接受另一个参数函数时,这是一个高阶函数。无论您目前是否参加了会议 JavaScript 训练营,您很可能已经在 JavaScript 使用过一个高阶函数,但并没有意识到这一点。这方面的两个例子是Array.prototype.filterArray.prototype.mapand。这些只是众多高阶函数中的一小部分。

总结:总而言之,JavaScript 函数是一个对象。它是子程序的一部分,其目标是完成一种特定类型的任务。一个 JavaScript 函数被提升,而一个表达式没有。要执行 JavaScript 函数,您将调用它,这称为调用函数。您也可以将值传递给函数,以便在函数中使用它,也称为参数,而其本身的值是参数。一个函数总是会返回一个值,但是 JavaScript 中没有返回值的函数会以未定义的形式返回。

文共2416字,预计学习时长5分钟

图片来源:Unsplash/Luca Bravo

函数是编程中的关键部件之一。这些函数可执行特定任务,并可反复调用执行。将Javascript中的函数和其他编程语言中的函数相比较,其中最大的区别在于Javascript函数为一级对象,这意味着Javascript中的函数表现类似于对象,可作为变量、数组和其他对象。


本文就定义函数的三种不同方法进行讨论:

1. 函数声明

2. 函数表达式

3. 生成器函数


1. 函数声明


函数声明可能是最常见的方式了。观察如下语句:

function name (parameter)
{
 statements 
}


函数声明语句

函数由关键字函数、函数的强制名称和括号内的参数组成(定义函数也可无参数)。最后,大括号内则是函数的主体,用以执行实际任务。


理解形参和实参的区别很重要。形参是定义函数时的一个变量。在调用函数时,实参则是输入函数形参的实际数据。


首先,看一个简单实例:

function hello(name)
{
console.log("Hello "+ name)
}
hello('stuti')
// Hello stuti
hello(12)
// Hello 12


名为hello的函数以实际参数名称声明,在控制台记录消息。从本例中,可以看出,因为实际参数上无指定类型,所以其既适用于string函数,也适用于number函数。倘若只是希望该函数是一个名称而不是数值呢?很遗憾,由于Javascript中没有预建法来实现这一点,必须手动确定输入函数的实际参数类型,如下所示:


function hello(name) {
 if (typeof name==='string')
 console.log("Hello " + name)
 else
 console.log("Please input a Name")
}
hello(12) 
// Plese input a Name


默认情况下,函数返回未定义变量。若要返回任何其他值,则函数必须具备返回语句,而由该语句指定返回值。


function something(){
}
console.log(something()) // undefined
function notSomething(){
 return 1
}
console.log(notSomething()) // 1


函数声明中提升是什么?


简单地说,这意味着在执行代码时,无论何处声明函数或变量,它们均会移动至作用域的顶部。这也就是所谓的提升。


观察下方实例:

myName()
// My name is Stuti Chahuhan
function myName() {
 console.log(`My name is Stuti Chauhan`)
}


函数声明中的提升

此处甚至是在声明之前就调用了这个函数——提升。



2. 函数表达式

图片来源:unsplash.com/@creativegangsters

函数表达式与函数声明极为相似,连语句都不甚相同。最主要的区别在于函数表达式不以关键字函数开头,且函数名称可选,在此情况下,该函数表达式则可以成为一个匿名函数。如果函数有名称,则将其称为命名函数表达式。

let checkNumber=function check (num){
 return (num %2==0)?"even" : "odd"
 }
console.log(checkNumber(50)) 
// even


函数表达式的例子

现在来观察一下定义上述函数的匿名法。

//Anonymous Function 
let checkNumber=function (num){
 return (num %2==0)?"even" : "odd"
 }
console.log(checkNumber(50)) 
// even


匿名函数表达式

函数声明和函数表达式最关键的区别就在于函数表达式无提升功能。若在函数表达式中尝试与提升函数声明相同的项目,则会出现报错。

myName()
// ReferenceError: myName is not defined
let myName=function () {
 console.log(`My name is Stuti Chauhan`)
}


函数表达式中无提升

IIFE(立即执行函数表达式)


这意味着函数一旦定义就开始运行,而函数表达式附在分组操作符()中,

( function () {
 let num=4
 return num
 })
//4


为什么典型的函数表达式需要IIFE?一般定义一个函数,随后多次调用。但倘若只想调用一次用来生成输出,并且不再使用该函数呢?由此就出现了IIFE。该函数会立即执行,并在以后不再经程序访问。因为不需再调用该函数,所以它也不需要名称,因此匿名函数表达式首选IIFE。

3. 生成器函数

图片来源:unsplash.com/@roman_lazygeek

普通函数遵循运行-完成的模型,不能在执行最后一行之前停止运行。若想在执行过程中退出,必须返回或抛出一个错误。


而生成器函数可以在执行过程中停止。当其调回时,仍然从停止的地方继续。


该函数与普通函数一样进行声明,但不同之处在于生成器函数在function关键字后面带有星号*,其间可包含任意数量的空格。


还有一点需要注意:在JavaScript中,生成器是一个函数,该函数返回一个对象,在该对象上可调用next(),每次调用next()都会返回一个结构如下的对象:

{ 
 value: Any,
 done: true|false
} 


此对象包含两个属性:value和done。Value是对象的实际值,而done规定了函数终止的属性——默认值为false,当其变为true时,则函数停止。


通过一个简单的例子来理解这点:

function * generatorFunction()
{ 
 console.log('first to execute');
 yield 'takes a pause'; 
 
 console.log(' printed after the pause'); 
 yield 'end of the function';
 
}
const gen=generatorFunction();
console.log(gen.next().value); // first to execute
 // takes a pause
console.log(gen.next().value); // printed after the pause
 // end of the function
console.log(gen.next().value); 
 // undefined


函数本体中,不使用return关键字——而是使用yeild,如果使用了return,则会将done属性更改为true,函数将结束——之后的任何操作都不会执行。Yield给出为其分配的值。


首先,在调用函数前先定义函数,同时调用一个生成器函数,形成一个生成器对象,存储在变量中。


然后在使用next()和value属性时调用对象。第一次使用next()时,函数执行开始。首先,运行console.log (“首次执行”)并将其记录在控制台中,然后遇到yield—输出 “暂停”值,执行停止。


第二次调用next()时,它从上次暂停处继续。同样,首先运行console.log(),再次遇到yield,生成“函数结束”值,函数停止。


第三次调用next()时,结果是未定义。这是因为由生成器函数生成的对象只能迭代一次——该对象现在是无用的,必须生成一个新对象才能重新启动程序。

function* generator() {
 yield "some value";
 return "ends here";
 yield "will never execute";
 yield "never reach here"
}
var gen=generator()
console.log(gen.next()); 
// { value: "some value", done: false }
console.log(gen.next()); 
// { value: "ends here", done: true }
console.log(gen.next()); 
// { value: undefined, done: true }
console.log(gen.next()); 
// { value: undefined, done: true }


如果使用return而不是yield,那么数据的值就会被更改为true,之后就不会执行任何操作。与Promise结合使用时,就异步编程而言,生成器是一个非常强大的工具。该函数即使不能完全消除回调的问题,也可以减轻其问题的程度。


结论:哪种方法更好?


事实上,我们不能将其进行比较,然后说一个比另一个好——声明的类型还是取决于具体情况或条件。


为实现更好的异步功能则使用生成器函数,针对立即执行函数的情况,则使用匿名函数表达式。

留言 点赞 关注

我们一起分享AI学习与发展的干货

编译组:柳玥、温媛

相关链接:

https://medium.com/better-programming/three-ways-to-define-functions-in-javascript-750a908e51d9

如需转载,请后台留言,遵守转载规范

数-function是Javascript非常重要的概念。


在写程序的时候,你会发现在程序的不同地方会书写相同的代码,这个时候就需要引入函数。


譬如求一个数字是不是素数,素数的定义如下:

素数是指一个数只能被1和本身整除。


我们就可以用前面的for和if语句来写一个函数。


函数的语法是这样:

  • function name(parameters)

    {

    ...body...

    }


    name是函数的名字。

    parameters是函数。

    body表示函数里面的代码。


    那么求一个数是不是素数的函数如下:

    function isPrimer(a){

    for(var i=1;i<a;i++) {

    if(a%i==0) //如果可以整除

    {

    return false; //return也是一个语法,表示函数额返回值

    }

    }

    return true;

    }


    定义完函数以后,我们就可以使用它(这段代码我们称为代码1):

    function isPrimer(a){

    for(var i=1;i<a;i++) {

    if(a%i==0) //如果可以整除

    {

    return false; //return也是一个语法,表示函数额返回值

    }

    }

    return true;

    }

    var a1=100
    if(isPrimer(a1))

    {

    console.log("这个数是素数:"+a1);

    }else{

    console.log("这个数不是素数:"+a1);

    }
    var b1=13
    if(isPrimer(b1))

    {

    console.log("这个数是素数:"+b1);

    }else{

    console.log("这个数不是素数:"+b1);

    }

    基于上面的代码,看到还是有些代码是重复,我们就可以再提取一个函数,这里名字叫PrintPrimer:

    function PrintPrimer(a){

    if(isPrimer(a)) {

    console.log("这个数是素数:"+a);

    } else {

    console.log("这个数不是素数:"+a);

    }

    }

    最后我们代码综合在一起,就变成了这样:


    • var a1=100;

      var b1=13;


      PrintPrimer(a1)

      PrintPrimer(b1)


      最后是综合例子2:

      function isPrimer(a){

      for(var i=1;i<a;i++) {

      if(a%i==0) //如果可以整除

      {

      return false; //return也是一个语法,表示函数额返回值

      }

      }

      return true;

      }

      function PrintPrimer(a){

      if(isPrimer(a)) {

      console.log("这个数是素数:"+a);

      } else {

      console.log("这个数不是素数:"+a);

      }

      }

      var a1=100;

      var b1=13;


      PrintPrimer(a1);

      PrintPrimer(b1);



      我们看到PrintPrimer函数可以在内部调用isPrimer函数,而且更近一步,还可以调用自身,称为“递归”。


      平日下面一个数字列表:

      1 1 2 3 5 8 。。。。


      这个数字列表的特别就是,第一和第二项为1,然后后面的数字是前面两个数字的和。


      用Javascript怎么写这个功能呢?(代码4)


      • function fab(a){

        if(a==1 || a==0) //调用自身的截止条件,如果不设置,容易出现问题。

        return 1;

        else {

        return fab(a-1)+fab(a-2); //调用自身

        }

        }
        var fab_5=fab(5)console.log("fab(5)="+fab_5)


        好了,关于JavaScript的函数今天就到这里,请大家仔细体会。