浅谈js定义function函数的几种方式 |
您所在的位置：网站首页 › 一次函数表达式的几种方法 › 浅谈js定义function函数的几种方式 |
|
通过声明
通过关键词 function 定义 ，这是最早也是最经典的function定义方式。 function hello (firstname) { console.log(`Hello ${firstname}`); }这个函数有一个名称 “hello”, 所以我们称这个函数为命名函数。 通过表达式这是比较现代化的定义方式了。这种定义方式也说明了函数也是对象，因此可以把函数赋值给变量。 const hello = function (firstname) { console.log(`Hello ${firstname}`); };仔细看，你会发现这个函数是没有名称的，因此它是匿名函数。 它在创建时，没有名称 (形如 “function (…) { … }”)。即便我们把这个函数赋值给一个名称为hello的变量 ， 它依然是一个匿名函数。 注意 : 这既然是一个赋值语句，那么在结尾处有分号就很自然了。 就像其他普通的赋值语句一样: const pi = 3.14; 。 通过箭头语法箭头语法是ES6中出新的新语法，可以用在通过表达式定义函数的情境中: 去除关键词 function .添加箭头符号 => 到参数右侧的位置. const hello = (firstname) => { console.log(`Hello ${firstname}`); };这种写法比叫简洁明了。如果满足以下情况写法可以更简单： 当只有一个参数时，参数外面可以不要圆括号。当函数体内只有一行代码时，函数体可以不需要花括号"{ … }"包裹 。当函数体内只有一行代码时，关键词return 可以省略。以下对函数的三种定义方式是一个意思: const hello1 = function (firstname) { return `Hello ${firstname}`; }; const hello2 = (firstname) => { return `Hello ${firstname}`; }; const hello3 = firstname => `Hello ${firstname}`;下面我们用数组的.map()方法的callback调用，来体会以上三种定义函数的方式。 const test = [1, 2, 3]; function doubler (x) { return x * 2; } test.map(doubler); // [2, 4, 6] test.map(function (x) { return x * 2; }); // [2, 4, 6] test.map((x) => { return x * 2; }); // [2, 4, 6] test.map(x => x * 2); // [2, 4, 6] |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |