JavaScript函数基础-久诚博客 - Java技术学习与分享平台

开始之前

我是一名JAVA后端开发，现在我刚开始学JavaScript。老实说，函数这个东西一开始真把我绕晕了。JavaScript和Java还是有着显著的差异，什么function、箭头，感觉一堆名词扑面而来。

但现在回头看，其实函数就是把一些代码打包起来，需要的时候拿出来用。就这么简单。

今天我想用最简单的方式，记录我怎么学会JS函数的过程。

第一步：最基础的函数写法

函数声明

这是我学的第一种写法，也是最好理解的，也是和Java当中的方法最为类似的：

function sayHello() {
  console.log('你好！');
}

sayHello(); // 调用函数，输出：你好！

就三步：

用function关键字
给函数起个名字（这里叫sayHello）
大括号里写要执行的代码

我的理解： 就像给一段代码起个名字，以后喊这个名字，代码就跑起来了。

带参数的函数

function greet(name) {
  console.log('你好，' + name);
}

greet('小明'); // 你好，小明
greet('小红'); // 你好，小红

name就是参数，像一个盒子，你可以往里面放不同的东西。

函数的返回值

function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result); // 8

没有return，函数就只是做事；有return，函数做完事还会给你一个结果。

第二步：另一种写法 - 函数表达式

学了一段时间，我看到了这种写法：

const sayBye = function() {
  console.log('再见！');
};

sayBye(); // 再见！

和第一种有什么区别？我的理解是：

第一种是直接声明一个函数
第二种是把函数赋值给一个变量

功能是一样的，只是写法不同。我现在一般用const，因为不想函数被意外改掉。

第三步：箭头函数（看起来很酷的那种且简洁）

这个是我学得最慢的，因为符号太抽象了，这里和和Java lambda表达式有很大的差异。

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(4, 5)); // 20

那个=>就是箭头，表示"这是一个函数"。

更神奇的是，如果只有一行代码，还可以简写：

const add = (a, b) => a + b;

console.log("2 + 3 =", add(2, 3));

我的学习经验： 刚开始别管箭头函数（箭头就相当于return），先把普通函数写熟。写多了，自然就会觉得箭头函数很方便。

实际用一下：做个简单的计算器

学了这些，我给自己出了个题：做一个简单的计算器。

function calculator(num1, num2, operation) {
  if (operation === 'add') {
    return num1 + num2;
  } else if (operation === 'subtract') {
    return num1 - num2;
  } else if (operation === 'multiply') {
    return num1 * num2;
  } else if (operation === 'divide') {
    return num1 / num2;
  }
}

console.log(calculator(10, 5, 'add'));      // 15
console.log(calculator(10, 5, 'subtract')); // 5
console.log(calculator(10, 5, 'multiply')); // 50
console.log(calculator(10, 5, 'divide'));   // 2

写完这个，我突然理解了函数的意义：把重复的逻辑写一次，到处用。

我总结的学习方法

我刚学的时候就是死磕教程，看到什么代码就敲什么代码。虽然有点枯燥，但手敲多了真的就有感觉了。现在回想起来，这段时间虽然不懂原理，但至少把语法记住了。

目录CONTENT

JavaScript函数基础