🌲 新订年付会员,赠送一年会员资格。立即订阅

《小白兔的开发之路》函数(Function):可重复使用的功能

在应用里有些事情要重复做,可以把一些事情组织到一块儿,再给它们起个名字,这就是定义了一个函数。

定义函数<箭头函数>

JavaScript 语言提供了几种定义函数的方法。比如可以像这样:

const greet = () => {};

上面用的是箭头函数,把定义好的函数起了个名字叫 greet。

在 JavaScript 语言里,定义函数可以使用这种形式 () => {} ,这叫箭头函数,因为它里面有个胖胖的箭头 => ,在它左边的括号里可以添加它里面需要的一些参数,使用这个功能的时候,可以提供给它这些参数,这些参数会在它的主体里面用到。箭头右边是个大括号,它里面的东西就是这个功能的主体部分,就是它具体要做的事情。

定义函数<函数声明>

还可以用声明函数的方法,在应用里声明一个函数,像这样:

function greet() {}

需要使用 function 这个关键词声明一个函数,greet 是这个函数的名字,括号里可以放入需要的参数,大括号里的东西就是函数的主体,也就是函数要去做的事情。

执行函数

上面定义好了一个叫 greet 的函数,使用它提供的功能,就是要去执行一下它,或者叫调用它。用的形式就是在函数名字的后面加上一组括号 ,比如像这样:greet()

函数主体

函数要做的事情要放在它的主体里面,一般就是放在大括号里。

const greet = () => {
  console.log('您好 ~');
};

现在执行 greet() 这个函数,就会在控制台上输出文字: 您好~

函数参数

定义函数的时候可以添加一些参数,这些参数可以用在函数主体里面,执行函数的时候可以设置参数的值。

const greet = (prefix, suffix) => {
  console.log(prefix, '您好 ~', suffix);
};

函数里的参数放在括号里,你可以随便定义添加需要的参数,参数的名字尽量让它有意义。在上面我们给 greet 函数添加了两个参数:prefix 与 suffix,表示前缀与后缀,参数之间用逗号分隔开。现在执行 greet 的时候,可以设置它的两个参数的值,或者叫传递参数值。要注意参数的顺序,在 greet() 函数里,第一个参数是 prefix,所以执行 greet() 的时候,给它提供的第一个值会传递给 prefix 这个参数。

greet('🎈', '🐰')

这样这个函数在控制台上输出的结果就会是:🎈 您好 ~ 🐰

返回数据

我们给函数提供了一些东西,它做了一些加工处理,最终制造出来一些新的东西,如果在别的地方想要使用函数制造出来的东西,需要在定义函数的时候明确的说明一下。用的就是 return 这个关键词。下面改造一下 greet() 函数:

const greet = (prefix, suffix) => {
  return `${prefix} 您好 ~ ${suffix}`;
};

现在 greet() 函数会 return 它制造出来的东西,就是一串加工处理之后的文字。它会把执行它的时候设置的 prefix 与 suffix 参数值,跟 您好~ 这个文字拼接到一块儿,拼接文字的时候用的是字符模板这种写法。就是把一串文字放在一组反引号里面,需要计算的东西放在 ${} 的大括号里面。${prefix} 的意思就是把 prefix 表示的值放到这里。

现在可以这样使用 greet() 函数:

const greeting = greet('🎈', '🐰');

// 检查 greeting 里有什么
console.log(greeting);

因为现在 greet() 函数会返回它制造出来的东西,所以我们可以把函数返回的值交另外一个东西,这里就是 greeting ,也就是 greeting 表示的值就是执行 greet() 函数返回的值。在控制台上输出 greeting 的值,得到的结果会是:🎈 您好 ~ 🐰

参数值的类型

在项目里我们用了 TypeScript,可以把它想成是增强版的 JavaScript。设置一个东西的类型是 TypeScript 提供的一个增强功能。比如我们可以设置一下函数参数值的类型:

const greet = (prefix: string, suffix: string) => {
  return `${prefix} 您好 ~ ${suffix}`;
};

上面设置了一下 prefix 与 suffix 这两个参数的值的类型为 string,表示它们的值是文字类型的。这样,如果你在函数里错误的使用了参数,比如把它们当数字用了,编辑器,TypeScript 就会警告你犯的错误。在执行函数的时候,如果提供了错误类型的参数值,同样会出现警告。这就会减少我们在开发时犯的错。

如果不明确的设置一个东西的时候,TypeScript 会做一些推断,猜出这个东西的类型是什么,如果它实在猜不出来,它就认为这个东西的类型是 any ,表示可能是任何类型的数据。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

11611
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点