简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 函数参数和返回值，模板字面量和模板函数
Blogger Information
Blog 13
fans 0
comment 0
visits 6507
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
函数参数和返回值，模板字面量和模板函数
shooter
Original
438 people have browsed it

函数的参数和返回值

效果图

代码

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>函数的参数和返回值</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let f = (a, b) => a + b;
  12.       console.log(f(1, 2));
  13.       //1. 参数不足：默认参数
  14.       f = (a, b = 0) => a + b;
  15.       console.log(f(2, 3));
  16.       //2. 参数过多:...剩余参数
  17.       f = (a, b) => a + b;
  18.       console.log(f(1, 2, 3, 4, 5));
  20.       //如何将参数接收到,剩余参数...
  21.       // ...rest: 用在函数的形参中,归并
  22.       f = (a, b, ...c) => console.log(a, b, c);
  23.       //将多出来的3,4,5压入到数组c中
  24.       console.log(f(1, 2, 3, 4, 5));
  25.       let arr = [1, 2, 3, 4, 5];
  27.       //将一个数组打散,变成一个个离散的值
  28.       console.log(...arr);
  29.       console.log(f(...arr));
  30.       //与下面这条语句一样
  31.       console.log(f(1, 2, 3, 4, 5));
  33.       //...用在参数调用时的实参中,是解包,打散
  34.       f = (...arr) => arr.reduce((a, c) => a + c);
  35.       console.log(f(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
  37.       //返回值:函数只能有一个返回值,默认单值返回
  38.       // 需要返回多个值怎么办,数组,对象
  40.       let fn = () => [1, 2, 3];
  41.       let res = fn();
  42.       console.log(res);
  44.       fn = () => ({
  45.         id: 1,
  46.         name: 'admin',
  47.         age: 20,
  48.       });
  50.       res = fn();
  51.       console.log(res);
  52.     </script>
  53.   </body>
  54. </html>

对象字面量的简化

效果图

代码

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>对象字面量的简化</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //属性简化
  12.       let user = {
  13.         name: '吴彦祖',
  14.       };
  15.       console.log(user.name);
  17.       let name = '彭于晏';
  18.       user = {
  19.         name,
  20.       };
  21.       console.log(user.name);
  23.       //1. 变量name与对象属性同名
  24.       // 2. 并处于相同作业域,彼此可见,可以不写变量名
  26.       //2.方法简化
  27.       user = {
  28.         name,
  30.         getName() {
  31.           return 'hello,' + this.name;
  32.         },
  33.       };
  34.       console.log(user.getName());
  35.     </script>
  36.   </body>
  37. </html>

模板字面量与模板函数

效果图

代码

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>模板字面量与模板函数</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //1. 模板字面量
  12.       console.log('hello world');
  14.       //反引号:模板字面量,支持在字符串插入变量/表达式:插值
  15.       console.log(`hello worlf`);
  16.       let name = '陈冠希';
  17.       console.log('hello ' + name);
  19.       //变量/表达式:在模板字面量,使用'${xxx}'来引用,就是一个占位符
  20.       console.log(`hello ${name}`);
  21.       let gender = 1;
  22.       console.log(`${gender ? `男:${name}` : `女`}`);
  24.       // 2. 模板函数
  25.       // 使用模板字面量为参数的参数
  27.       calc`数量: ${10}单价: ${500}`;
  29.       // 第一个参数: 模板字面量中的"字符串字面晨"
  30.       // 第二个参数: 模板字面量中的"插值"数组
  32.       function calc(strings, ...args) {
  33.         console.log(strings);
  34.         console.log(args);
  35.         console.log(args[0] * args[1]);
  36.       }
  38.       /**
  39.        * * 模板字面量: 可以使用插值表达式的字符串
  40.        * * 模板函数: 可以使用"模板字面量"为参数的函数
  41.        * * 模板函数,就是在"模板字面量"之前加一个标签/标识符,而这个标签,就是一个函数名
  42.        * * 模板函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数
  43.        */
  45.       // * 模板字面量, 也叫"模板字符串" , 是同义词,我觉得用"模板字面量"更直观,准确
  46.       // * 模板函数, 有的书也翻译与"标签函数", 因为 它使用"模板字面量"做参数,称为"模板函数"更直观, 一看知识必须传一个模板字面量当参数
  47.     </script>
  48.   </body>
  49. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！