SAP Fiori开发中的JavaScript基础知识8 - 分支，循环，函数，高阶函数

1. 前言

JavaScript中分支和循环的概念和ABAP中类似，在此仅给出了语法和简单的示例。本文将着重介绍JavaScript中的“一等公民” - 函数Function。

2. 分支

在JavaScript中，实现条件分支的语法有三种，分别是if, swtich和三元表达式。

2.1 if…else

它们的语法如下：

if( ){

}
else if ( ) {

}
else{

}

2.2 switch

switch ( ) {
case 1:
break;
case 2:
break;
default:
break;
}

2.3 三元表达式

三元表达式： var result = (iNum < 0) ? “Negative” : “Positive”

2.4 示例代码：

let num = 10;

if (num > 10) {
    console.log('num is greater than 10');
} else if (num < 10) {
    console.log('num is less than 10');
} else {
    console.log('num is equal to 10');
}

switch (num) {
    case num > 10:
        console.log('num is greater than 10');
        break;
    case num < 10:
        console.log('num is less than 10');
        break;
    default:
        console.log('num is equal to 10');
        break;
}

let result = (num < 0) ? "Negative" : "Positive";
console.log(result);  // 输出 Positive

3. 循环

在JavaScript中，实现循环有三种方式，分别是for, while和do-while。

2.1 for

它们的语法如下：

for (var i = 0 ; i < 5; i ++){

}

遍历对象属性
for (var prop in obj){

}

遍历数组内容
for (var item of arr){

}

示例代码：

let obj = {
    key1: 'value1',
    key2: 'value2',
    key3: function () { },
    key4: ['content1', 'content2']
};

let arr = ['item1', 'item2'];

for (let i = 0; i < 5; i++) {
    console.log(i);
}

for (prop in obj) {
    console.log(prop);
}

for (item of arr) {
    console.log(item);
}

2.2 while, do-while

示例代码：

let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

do {
    console.log(i);
    i++;
} while (i < 10);

4. 函数

在JavaScript中，函数是一种可重用的代码块，可以接受输入（参数），并返回输出（结果）。函数可以使代码更易于阅读和维护，同时避免重复。

对于传统的ABAP开发人员，要注意区分JavaScript中函数的概念与ABAP中的function概念在设计上的不同。

1. JavaScript中的函数也是一种 值类型。函数的输入，输出参数都也可以是函数。

2. JavaScript函数只能有一个返回值。但是，如果你需要返回多个值，你可以通过返回一个对象或数组来实现。

3. JavaScript中函数的输入参数、输出参数都没有类型的（变量无类型）

4. JavaScript的函数调用时，并不要求输入所有的参数

4.1 函数的声明

函数使用function关键字声明，后跟函数名称和括号内的参数列表。函数体（即要执行的代码）包含在大括号中。

function greet(name) {
    return "Hello, " + name;
}

在上述代码中，greet是一个接受一个参数name的函数，返回一个字符串。

4.2 函数的调用

要调用（或执行）函数，使用函数名称后跟括号和要传递的参数。

let message = greet("Alice");
console.log(message);  // 输出 "Hello, Alice"

4.3 匿名函数和函数表达式

函数也可以是匿名的，即没有名称。这些通常用作函数表达式，或者作为其他函数的参数（如回调函数）。

let greet = function(name) {
    return "Hello, " + name;
}

console.log(greet("Bob"));  // 输出 "Hello, Bob"

4.4 箭头函数

ES6引入了箭头函数，这是创建函数的更简洁的语法。

let greet = (name) => {
    return "Hello, " + name;
}

console.log(greet("Charlie"));  // 输出 "Hello, Charlie"

如果箭头函数只有一个参数并且函数体只有一行，那么可以省略括号和return关键字：

let greet = name => "Hello, " + name;

console.log(greet("Dave"));  // 输出 "Hello, Dave"

4.5 复杂函数设计

4.5.1 返回对象 / 数组

例如，如果你想返回多个值，你可以将它们放在一个对象中：

function getSize(width, height, depth) {
    let area = width * height;
    let volume = width * height * depth;
    let sizes = {'area': area, 'volume': volume};
    return sizes;
}

let result = getSize(3, 2, 3);
console.log(result.area);   // 输出 6
console.log(result.volume); // 输出 18

在上述代码中，getSize函数返回一个包含area和volume属性的对象。

或者，你也可以将它们放在一个数组中：

function getSize(width, height, depth) {
    let area = width * height;
    let volume = width * height * depth;
    return [area, volume];
}

let result = getSize(3, 2, 3);
console.log(result[0]); // 输出 6
console.log(result[1]); // 输出 18

在这个例子中，getSize函数返回一个包含area和volume的数组。

4.5.2 高阶函数（输入参数/输出也为函数）

JavaScript中的函数可以接受其他函数作为参数。这种类型的函数通常被称为高阶函数。

以下是一个例子，其中一个函数接受另一个函数作为参数：

function greet(name) {
    return "Hello, " + name;
}

function shout(func, name) {
    let message = func(name);
    console.log(message);
}

shout(greet, "Alice");  // 输出 "Hello, Alice"

在上述代码中，shout函数接受两个参数：一个函数func和一个字符串name。shout函数调用func函数，将name作为参数。

这种模式在JavaScript中非常常见，特别是在处理异步操作（如网络请求）或在数组方法（如map，filter和reduce）中时。

以下是一个例子，其中一个函数返回另一个函数：

function createGreet(name){
    return function(){
        return "Hello," + name;
    }
}

let greetAlice = createGreet("Alice");
console.log(greetAlice()); // 输出 "Hello, Alice"

在上述代码中，createGreeting函数接受一个参数name，并返回一个新的函数。这个新的函数在被调用时会打印一条问候语。

这种模式在JavaScript中非常常见，特别是在函数式编程和闭包中。

4.6 IIFE (立即调用的函数表达式)

IIFE 是 “Immediately Invoked Function Expression” 的缩写，也即"立即调用的函数表达式"。这是一种在定义函数的同时立即执行该函数的 JavaScript 编程技术。

IIFE 的基本语法如下：

( function() { // 函数体 } ) ();

或者：

( function() { // 函数体 } () );

在这两种语法中，函数被包裹在一对括号 () 中，这使得 JavaScript 引擎将其视为函数表达式而非函数声明。然后，通过在末尾添加另一对括号 () 来立即调用该函数。

IIFE 的主要用途和使用场景包括：

1. 创建新的变量作用域：在 JavaScript 中，新的变量作用域是通过函数创建的。IIFE 可以创建一个新的作用域，防止变量污染全局作用域。

(function() {
  var localVariable = "I'm local!";
  console.log(localVariable); // 输出："I'm local!"
})();

console.log(localVariable); // 报错：localVariable is not defined

2. 数据隐私和封装：在 IIFE 中声明的变量和函数对外部是不可见的，这有助于实现数据隐私和封装。

var myModule = (function() {
  var privateVariable = "I'm private";

  return {
    publicMethod: function() {
      return privateVariable;
    }
  };
})();

console.log(myModule.publicMethod()); // 输出："I'm private"
console.log(myModule.privateVariable); // 输出：undefined

3. 避免变量提升：在 IIFE 中声明的变量不会被提升。

4. 在循环中创建闭包：在循环中使用 IIFE 可以为每次迭代创建一个新的作用域，这在创建事件处理程序或回调函数时非常有用。

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i); // 输出：0, 1, 2, 3, 4
    }, i * 1000);
  })(i);
}

5 小结

本文介绍了JavaScript中分支和循环的语法，同时详细介绍了函数的概念，并比较了与ABAP语言中Function概念的异同。希望对你有帮助！