Blogger Information
Blog 43
fans 4
comment 0
visits 19380
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
函数参数类型返回值/模板字面量模板函数/闭包函数实例演示
汇享科技
Original
368 people have browsed it

1.函数参数类型和返回值

函数参数类型

函数语法function fun(形参){} 调用时fun(实参)默认情况下形参和实参需要对应起来 写几个形参就要写几个实参一一对应
但是当我们不知道实参有多少的时候呢? 咱们可以用…将所有传来的实参进行压缩
声明一个函数 可以使用…接收函数调用时传的实参

那么返回的arr数据如下:
l5vrvetv.png
想展开查看传入的实参也是使用…进行展开 用在返回值或者调用时是将一个数组进行展开传入效果如下:
l5vrz00u.png

  1. //注意默认情况如果参数不足需要给形参一个默认值~
  2. function f(...arr) {
  3. return arr;
  4. }
  5. console.log(f(1, 2, 3, 4, 5, 6));

返回值

一个函数中通过return返回的数据叫做返回值,默认情况下返回值都是单值,那么怎么才能通过数组或者对象的方式来把多个返回值封装并返回呢?实例如下:

  1. 数组返回

l5vsf2kj.png

  1. //将返回值通过数组返回完整写法
  2. let f1 = function () {
  3. return [1, 2, 3];
  4. };
  5. console.log(f1());
  6. // 简写用箭头函数
  7. f1 = () => [1, 2, 3];
  8. console.log(f1());
  1. 对象返回
    l5vt6daq.png
    1. //将返回值通过对象返回
    2. //完整写法
    3. let f2 = function () {
    4. return {
    5. a: 1,
    6. b: 2,
    7. fun: function () {
    8. return this.a + this.b;
    9. },
    10. };
    11. };
    12. console.log(f2());
    13. // 简写
    14. f2 = () => ({
    15. a: 1,
    16. b: 2,
    17. fun: () => {
    18. return this.a + this.b;
    19. },
    20. });
    21. console.log(f2());

    2.模板字面量/模板函数

    模板字面量

    模板字面量:也就是说一个字符串中存在“占位符”那么这个字符串就可以叫做“模板字面量”
    占位符也叫插值也可以叫做表达式也可以是变量 模板字面量用反引号声明 反引号在esc下面 实例演示:

    l5vtrh3f.png
    1. //模板字面量
    2. let username = "小王";
    3. console.log(`我是${username}`);
    4. //支持表达式
    5. console.log(`a + b =${5 + 6}`);
    6. //支持三元运算符
    7. let age = 18;
    8. console.log(`${age >= 18 ? "我成年了" : "未成年"}`);

    模板函数

    模板函数:使用模板字面量作为参数的函数就是模板函数 模板函数两个参数:参数1:必须是当前模板字面量中的字面量组成的数组 参数2:必须是必须是模板字面量中的插值组成的插值列表实例演示:
    l5vu60ld.png
    1. //模板字面量
    2. let username = "小王";
    3. console.log(`我是${username}`);
    4. //支持表达式
    5. console.log(`a + b =${5 + 6}`);
    6. //支持三元运算符
    7. let age = 18;
    8. console.log(`${age >= 18 ? "我成年了" : "未成年"}`);
    9. console.log("--------------------------");
    10. //模板函数
    11. function sum(zml, ...cz) {
    12. console.log(zml);
    13. console.log(cz);
    14. }
    15. let a = "zimianliang";
    16. let b = "字面量";
    17. sum`这是字面量:${a},这也是字面量:${b}`;

    3.闭包函数/纯函数

    闭包函数

    闭包函数:需要满足两个条件 条件1:需要有父子函数 条件2:子函数需要用到父函数的参数 闭包函数有自己的作用域 函数默认调用完成作用域会立马失效 而闭包函数中子元素如果调用到父元素的参数 那么父元素被调用的时候创建出来的作用域不会立马消失 直到子函数使用完父函数内的参数即可 实例演示:
    l5vv508l.png
  1. //创建一个闭包 已经满足两个条件所以这个是一个闭包函数
  2. function f(a) {
  3. let f1 = function (b) {
  4. let f2 = function (c) {
  5. return a + b + c;
  6. };
  7. return f2;
  8. };
  9. return f1;
  10. }
  11. console.log(f(1)(2)(3));
  12. //简化
  13. f = (a) => (b) => (c) => a + b + c;
  14. console.log(f(1)(2)(3));

纯函数

纯函数:函数内部不使用任何自由变量 可以将自由变量在调用时当参数传入 实例演示:
l5vvijvg.png

  1. let dis = 0.5;
  2. //纯函数
  3. let fun = function (a, b) {
  4. return a * b;
  5. };
  6. console.log(fun(10, dis));
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post