JavaScript第4天学习:函数
一.函数的设计
在JavaScript中,函数的设计一般是针对某一类型的的方法,所以得对该类型的所有情况都要考虑。
函数参数:合理设计函数的参数,避免过多或过少的参数。如果函数需要接收多个参数,可以考虑使用对象或数组来传递参数,以提高代码的可读性。
例如:
//一个数组求和函数
function fn(numbers) {
var result = 0;
for (var i = 0; i < numbers.length; i++) {
result += numbers[i];
}
return result;
}
console.log(fn([1, 2, 3, 4, 5]));
// 输出:15
函数命名:函数的名称应该能够准确地描述函数的目的和功能。使用有意义的、可读性强的命名,可以让其他开发者更容易理解函数的用途。目前还在初级阶段比较随意,但函数的见名知意还是比较重要的,使用中文拼音或者英文都行。
例如:
//一个求数组平均值的函数
function pingjun(numbers) {
var sum = 0;
for (var i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
var average = sum / numbers.length;
return average;
}
var numbers = [5, 7, 9, 11, 13];
console.log(pinjun(numbers));
// 输出:9
二.函数的参数
在 JavaScript 中,函数的参数是在函数定义时声明的变量。当调用函数时,传递给函数的值会被赋给这些参数。
1.无参数类型
函数可以没有参数
例如:
function sayHello() {
console.log("Hello world");
}
sayHello()//输出:Hello world
2.单个参数
函数可以有一个或多个参数。参数可以是任何数据类型,如字符串、数字、数组、对象等。
例如:
function fn(person) {
console.log("Name:"+person.name);
console.log("Age:"+ person.age);
console.log("gender:"+ person.gender);
}
var person1 = {
name: "John",
age: 30,
gender: "male"
};
var person2 = {
name: "Alice",
age: 25,
gender: "female"
};
fn(person1);
// 输出:
// Name: John
// Age: 30
// gender: male
fn(person2);
// 输出:
// Name: Alice
// Age: 25
// gender: female
3.默认参数
可以为函数的参数设置默认值。如果调用函数时没有提供该参数的值,将使用默认值。
例如:
function multiply(a, b = 2) {
console.log(a * b);
}
multiply(5); // 输出:10
multiply(5, 3); // 输出:15
默认值还有其他的设置方式,如直接写在函数里面之类,但推荐使用这种方式来进行默认值的设置。
像这样少写一些参数,或者多写一些参数并不会报错。还是按顺序对应来进行取值,是因为它的取值原理是先把实参存于arguments数组里面的,再按序传入。arguments.length就可以看到实参的个数。
当我们不知道一个函数的形参个数时,可以通过fn(函数名).length来确定形参个数。
函数也是一种引用数据 因为它也是一种特殊的对象 只要是对象就能使用点语法 访问成员(属性)。
三.函数的返回值
函数调用一定可以生成一个结果,只不过函数生成的结果可以使用也可以不使用。
1. 没有执行return
函数执行后的值就会是undefined
例如:
function fn() {
console.log("Hello World");
}
var result = fn();
console.log(result); // 输出:undefined
2. 执行了return 但是只有return,后面没有表达式
函数执行后的值也会是undefined
例如:
function fn() {
console.log("Hello World");
return;
}
var result = fn();
console.log(result); // 输出:undefined
3. 有return 而且后面还有表达式 (原始,成员访问,函数调用,计算表达式) 把表达式的结果生成后返回出去.
return语句后的表达式将会计算出一个结果,并将该结果作为函数的返回值返回出去。函数调用时,该返回值可以被赋值给一个变量,或者直接使用。
例如:
function multiply(a, b) {
return a * b;
}
var result = multiply(2, 3);
console.log(result); // 输出:6
四.函数-变量的作用域
函数和变量都有自己的作用域,也就是它们所能够被访问的范围。
1. 全局作用域
全局作用域是在代码的任何地方都可以访问的作用域。在全局作用域中声明的变量和函数都可以在代码的任何地方进行访问。
例如:
var a = "好喜欢js啊";
function hr() {
console.log(a);
a="js还行";
console.log(a);
}
hr(); // 输出:好喜欢js啊 js还行
console.log(a);// 输出:好喜欢js啊
2. 局部作用域
局部作用域也叫函数作用域,是在函数内部声明的变量和函数所拥有的作用域。在函数内部声明的变量和函数只能在函数内部访问,外部的代码无法访问。
例如:
var a;
function fn() {
var a = 20
function fm() {
console.log(1111)
}
}
fn()
console.log(a)//输出undefined
fm()//报错,停止运行
五.函数的执行顺序
语法规则
1. 一个标识符 它在哪些地方能被正常使用 这些地方就是这个标识符起作用的地方 称之为标识符的作用域
例如:
var a = 100 //全局都能被访问的标识符就是全局标识符
function fn() {
var b = 200
console.log(a)
console.log(b)
}
fn(); //输出100 200
console.log(a)//输出 100
console.log(b)//直接报错
console.log(11111)
2.函数内部的标识符只能在函数内部使用 函数外部不能使用
例如:
var a = 100 //全局都能被访问的标识符就是全局标识符
function fn() {
var b = 200
console.log(a)
console.log(b)//
}
fn(); //输出100 200
console.log(a)//输出 100
console.log(b)//直接报错
console.log(11111)
就像这个b一样,外部无法调用
3.语法规则:访问一个标识符时 先访问当前作用域,没有就访问外层作用域 直到全局作用域
例如:
var a = 20;
function fn() {
var a = 30;
function fm() {
console.log(a)
c = 90
console.log(c)
}
fm()
}
fn()//输出30 90
console.log(c)//未定义报错
4.语法规则:函数调用一次就会运行一次,而且函数调用如果在A作用域 它是在B作用域生成的 那么函数运行代码在B作用域
例如:
var a = 100
function fn() {
var a = 20
function fm() { console.log(a) }
return fm
}
var re = fn()
re()//输出 20
5.参数和作用域
在作用域生成时: 形(变) 实 函 运
1.形参或者局部变量的声明
2.实参赋值给形参变量
3.内部的函数会声明
4.运行代码
例如:
var a=10;
function fn(a)
{
var a;
console.log(a);
a = 20;
console.log(a);
console.log(a);
function a() { };
}
fn(a);//输出函数a(){} 20 20
函数运行时,是先进行形参或者局部变量的声明,再是将实参赋值给形参,在是内部函数的声明。最后才是运行。
var a = 0
function f() {
var a;
console.log(a);
var a = 2;
console.log(a);
}
f()//输出 undefined 2
记住上面的函数运行规则,不是简单的顺序进行。