理解 JavaScript 函数
这篇文章最初发表在我的博客上。
功能是什么？
函数是一组用于执行特定任务的语句。当需要执行重复性任务时，函数非常有用。
例如，我们想要输出某些歌曲的歌词。
// Declare functions
function verse1() {
console.log('First verse goes here');
}
function verse2() {
console.log('Second verse goes here');
}
function chorus() {
console.log('Chorus goes here');
}
// Call them
// Use this pattern functionName()
verse1(); // First verse goes here
chorus(); // Chorus goes here
verse2(); // Second verse goes here
chorus(); // Chorus goes here
如您所见，函数合唱可以重复任意次数。
定义函数
函数可以通过以下两种方式定义：函数声明和函数表达式。
// Function Declaration
function verse1() {
console.log('First verse goes here');
}
verse1(); // First verse goes here
// Function Expression
let chorus = function() {
console.log('Chorus goes here');
};
chorus(); // Chorus goes here
返回值
以下是如何从函数输出结果的方法
let chorus = function() {
return 'Chorus goes here';
};
console.log(chorus()); // Chorus goes here
function sum() {
return 1 + 1;
}
console.log(sum()); // 2
功能范围
如果在函数内部声明变量，该变量就无法泄漏到函数外部。但是函数可以访问外部变量（全局变量）。
const amOut = 'Coming from outside';
function testScope() {
const amIn = 'Coming from inside';
console.log(amOut);
console.log(amIn);
}
console.log(testScope()); // Coming from outside, Coming from inside
console.log(amIn); // amIn is not defined
参数与论证
定义函数时使用参数，调用函数时使用实参。在我看来，实参是参数的值，而参数是实参的变量。两者都使函数能够接收输入。
// 'a' and 'b' are paremeters
function sum(a, b) {
return a + b;
}
// 5 and 7 are arguments
console.log(sum(5, 7));
默认函数参数
当参数未定义时，使用默认函数参数。
function sum(a = 5, b = 7) {
return a + b;
}
// If all arguments are undefined, then pass nothing
console.log(sum()); // 12
// If all arguments are not undefined
console.log(sum(6, undefined)); // 13
剩余函数参数
剩余参数允许你传递任意数量的参数，无论函数是如何定义的。剩余参数会将参数收集到一个数组中。
// Without rest paremeters
function sum(a, b) {
return a + b;
}
console.log(sum(5, 7, 6, 8)); // 12
console.log(sum()); // NaN
// With rest paremeters
function sum(...nums) {
console.log(nums); // [5, 7, 6, 8]
let total = 0;
for (num of nums) {
total += num;
}
return total;
}
console.log(sum(5, 7, 6, 8)); // 26
console.log(sum()); // 0
console.log(sum(5)); // 5
console.log(sum(5, 7)); // 12
高阶函数与回调函数
高阶函数是以其他函数作为参数的函数，而回调函数是将参数传递给其他函数的函数。
function callback() {
console.log('Coming from callback');
}
function highOrder(func) {
console.log('Waiting for callback');
func();
console.log('Callback is called');
}
highOrder(callback);
// Waiting for callback
// Coming from callback
// Callback is called
匿名函数
匿名函数是指没有名称的函数。
const anoyms = function() {
console.log('I am Anonymous function');
};
setInterval(anoyms, 2000);
箭头函数
箭头函数是在 ES6 中引入的，与表达式函数相比，它们的语法更简洁。箭头函数始终是匿名的，并且其 `this` 属性不绑定任何变量。
// Expression function
const sum = function(a, b) {
return a + b;
};
console.log(sum(5, 7)); // 12
// In Arrow function
const sum1 = (a, b) => {
return a + b;
};
console.log(sum1(5, 7)); // 12
// In Arrow function(Implicity return)
const sum2 = (a, b) => a + b;
console.log(sum2(5, 7)); // 12