codestory

Die Anleitung zu JavaScript Function

  1. Was ist die Funktion?
  2. Die Funktion mit dem Default-Parameter
  3. Der Parameter Varargs
  4. Die  anonyme Funktion (Anonymous Function)
  5. Function Constructor
  6. Die Funktion Lambda (Arrow)
  7. Generator Function

1. Was ist die Funktion?

In ECMAScript ist eine Funktion ein Sub-Programm. Es fasst die Commands zur Durchführung einer Aufgabe um. Und wenn Sie in irgendwo in die Applikation eine solche Aufgabe tun möchten, brauchen Sie nur diese Funktion aufrufen. Die Funktion hilft Ihnen bei der Unterhaltung der Applikation und bei der einfachen Wieder-verwendung der Kode.

Unter ist das die Syntax zur Definition einer einfachen ohne Parameter Funktion:
function function_name() {
   // function body
}
Zum Beispiel:
my-first-function-example.js
// Define a function:
function greeting()  {
   console.log("Hello World!");
}
// Call function.
greeting();
Output:
Hello World!
Eine Standard-Funktion im ECMAScript wird nach der folgenden Funktion definiert:
function function_name(parameter1, parameter2, .., parameterN) {
   // Function body
   // return ....
}
  • Einen Schlüsselwort function benutzen um eine Funktion zu definieren
  • Die Funktion kann 0 oder viele Parameter haben
  • Die Funktion gibt immer eine Wert zurück. Wenn diese Wert nicht bestimmt wird, wird sie underfined zurückgeben. Um eine Wert zurückzugeben, benutzen wir den Schlüsselwort return.
standard-function-example.js
function calculateTax(salary)  {
    if(salary >= 1000) {
         // The function will end here
         return salary * 20 / 100;
    }
    if(salary >= 500)  {
         // The function will end here
         return salary * 10 / 100;
    }
    return 0;
}
let tax = calculateTax(2000);
console.log("Salary: 2000, tax: " + tax);

tax = calculateTax(800);
console.log("Salary: 800, tax: " + tax);

tax = calculateTax(300);
console.log("Salary: 300, tax: " + tax);
Output:
Salary: 2000, tax: 400
Salary: 800, tax: 80
Salary: 300, tax: 0

2. Die Funktion mit dem Default-Parameter

Im ES6 erlaubt eine Funktion die Parameter, mit den Default-Werte zu initalisieren (khởi tạo). Diese Default-Wert wird benutzt wenn Sie bei der Aufruf von Funktion die Wert für den Parameter (oder die Wert underfined) nicht übergeben. Es is so gleich wie das folgende Beispiel::
default-params-example1.js
function add(a, b = 1) {
   return a+b;
}
// Test
let value = add(2, 3);
console.log(value); // 5

// Test
value = add(9);
console.log(value); // 10
default-params-example2.js
function calculateTax(salary = 1000, rate = 0.2) {
   return salary * rate;
}
// Test
console.log (calculateTax() ) ; // 1000 * 0.2 = 200

console.log (calculateTax(2000) ) ; // 2000 * 0.2 = 400

console.log (calculateTax(3000, 0.5) ) ; // 3000 * 0.5 = 1500

console.log (calculateTax(undefined, 0.5) ) ; // 1000 * 0.5 = 500

3. Der Parameter Varargs

Der Parameter Varargs (oder "Rest Parameters" sogenannt) ist ein besonderer Parameter der Funktion. Sie können 0,1 oder viele Parameter für den Parameter Varargs übergeben

Die Eigenschaften des Parameter Varargs:

  • Wenn eine Funktion den Parameter Varargs hat, muss dieser Parameter den letzen Parameter der Funktion sein.
  • Eine Funktion hat einen Parameter Varargs am meisten.
Syntax
function myFunction(param1, param2, ... paramVarargs)  {

}
varargs-param-example.js
function showInfo(name, ... points)  {
    console.log("------------ ");
    console.log("Name: " + name);
    console.log("Array length: "+ points.length);
    for(let i=0; i< points.length; i++)  {
      console.log( points[i] );
    }
}
showInfo("Tom", 52, 82, 93); 
showInfo("Jerry", 10, 50); 
showInfo("Donald");
Output:
------------
Name: Tom
Array length: 3
52
82
93
------------
Name: Jerry
Array length: 2
10
50  
------------
Name: Donald
Array length: 0

4. Die  anonyme Funktion (Anonymous Function)

Eine Funktion ohne den Name ist eine anonyme Funktion (Anonymous Function). Die anonymen Funktionen werden bei Runtime des Programm dynamisch erstellt. Es hat auch die Parameter und gibt wie eine normalen Funktion zurück.
Sie können eine Variable mit einer Wert al eine anonyme Funktion anmelden. Ein solcher Ausdruck wird die Function Expression genannt.
var myVar = function( parameters ) {
   // ....
}
zum Beispiel:
anonymos-function-example.js
// Function expression
var f = function(name){
  return "Hello " + name;
}
// Call it.
var value = f("Tom");
console.log( value ); // Hello Tom.
Zum Beispiel: Eine anonyme Funktion erstellen und sie sofort aufrufen. In diesen Fall wird die erstellte Funktion nur einziges Mal benutzt
anonymous-function-example2.js
// Create anonymous function and call immediately
(function()  {
   var now = new Date();
   console.log("Now is " + now);
}) () ;

// Create anonymous function and call immediately
(function(name)  {
   console.log("Hello " + name);
}) ("Tom") ;
Output:
Now is Mon Nov 05 2018 00:44:47 GMT+0700 (SE Asia Standard Time)
Hello Tom

5. Function Constructor

Im ECMAScript haben wir die Klasse Function. Deshalb können Sie durch constructor dieser Klasse eine Funktion erstellen.
var variableName = new Function(paramName1, paramName2, ..., paramNameN, "Function Body");
zum Beispiel:
function-constructor-example.js
var myMultiple = new Function( "x", "y", "return x * y");
console.log( myMultiple (3, 4) ); // 12

function showTotal()  {
   let quantity = 4;
   let price = 5;
   console.log("Total: " + myMultiple(quantity, price) );
}
showTotal();
Output:
12
Total: 20

6. Die Funktion Lambda (Arrow)

Die Funktion lambda ist eigentlich eine anonyme Funktion, die nach einer kurzen Syntax geschrieben wird. Diese Funktion wird als Arrow Function genannt denn in ihrer Syntax gibt es die Pfeil-Zeichen ( => ).
Unten ist das eine anonyme Funktion:
Anonymous Function
// Anonymous Function
var func = function(a, b)  {
  return a * b;
}
Auch die Funktion oben aber schreiben wir kürzer nach der Syntax Lambda..
// Arrow function
var func = (a, b) => {
   return a * b;
}
console.log( func( 5, 6 ) ); // 30

Wenn die Funktion keinen Parameter hat :

// Function without parameter.
var func  =  () =>  {
    console.log("Hello World");
} 
console.log( func( ) ); // Hello World
Wenn die Funktion eine einzige Funktion hat, können Sie die runden Klammern (parentheses) ) ( ) nicht schreiben :
// Function with one parameter.
var func  = name =>  {
    console.log("Hello " + name);
}
console.log( func( "Tom" ) ); // Hello Tom

Wenn der Körper der Funktion einen einzigen Ausdruck hat, können Sie die eckigen Klammern (brackets) { } nicht schreiben und den Schlüsselwort return (wenn ja) entfernen:

// Body has only one expression.
var func = (name)  => {
   console.log("Hello " + name)
}
// Body has only one expression.
var func  = (name) =>  console.log("Hello " + name);
// Body has only one expression.
var func = (a, b)  => {
    return a * b;
}

// Body has only one expression.
var func  = (a, b) =>  a * b;
Eine Funktion, die einen Parameter hat und deren Körper einen einzigen Ausdruck hat, können Sie wie das folgende Beispiel am kürzten schreiben
var func = (name)  => {
  console.log("Hello " + name);
}
// Shortest:
var func = name => console.log("Hello " + name);

7. Generator Function

Generator Function ist eine neue Funktion, die in ECMAScript 6 (ES6) gegeben wird. Um eine Generator Function anzumelden, benutzen wir den Schlüsselwort function*.

function* functionName( param1, param2, ..., paramN) {
   // Statements
}
Im Grunde ist Generator Function eine Funktion, die implementieren stoppen kann und in einer Zeitpunkt weiter laufen kann. Generator Function gibt ein Objekt Iterator implizit zurück. In die Inhalt dieser Funktion brauchen Sie die Werte für die Elemente in diesem Iterator nur definieren
Vielleicht werden Sie die oben Erklärungen schwer zu verstehen finden. Wir werden ein Beispiel schauen
generator-function-example.js
function* season()  {
   yield "Spring";
   yield "Summer";
   yield "Autumn";
   yield "Winter";
}
// This method return an Iterator.
var seasonIterator = season();

let value1 = seasonIterator.next().value;
console.log(value1); // Spring

let value2 = seasonIterator.next().value;
console.log(value2); // Summer

let value3 = seasonIterator.next().value;
console.log(value3); // Autumn

let value4 = seasonIterator.next().value;
console.log(value4); // Winter
Das kürzeres Beispiel:
function* season()  {
   yield "Spring";
   yield "Summer";
   yield "Autumn";
   yield "Winter";
}
// This method return an Iterator.
var seasonIterator = season();
let e;
while( !(e = seasonIterator.next()).done ) {
  console.log(e.value);
}
Wenn eine normale Funktion aufgeruft wird, wird sie implementieren zum wenn die Wert zurückgegeben wird oder die Funktion endet. In dieser Zeit kann CallerFunction die Implementation von CalledFuntion nicht kontrollieren.
CallerFunction kann die Implementation vom CalledFunction kontrollieren wenn die aufgerufte Funktion eine Generator Function ist. Unter ist das ein solches Beispiel:
generator-function-example3.js
function* season()  {
   console.log("Do something in Spring");
   yield "Spring";// Spring Stop here!

   console.log("Do something in Summer");
   yield "Summer";// Summer Stop here!

   console.log("Do something in Autumn");
   yield "Autumn";// Autumn Stop here!

   console.log("Do something in Winter");
   yield "Winter";// Winter Stop here!
}
// This method returns an Iterator.
var seasonIterator = season();
let e;
while( !(e = seasonIterator.next()).done ) {
   console.log(e.value);
   if(e.value === "Autumn") {
       console.log("OK Stop after Autumn");
       break;
   }  
}
Output:
Do something in Spring
Spring
Do something in Summer
Summer
Do something in Autumn
Autumn
OK Stop after Autumn

Anleitungen ECMAScript, Javascript

Show More

Anleitungen ECMAScript, Javascript

Show More

Neueste Artikel

Show More