Blogger Information
Blog 2
fans 0
comment 0
visits 756
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
流程控制,循环,模板字面量,模板函数演示
哈哈哈
Original
288 people have browsed it
  1. 实例演示: 流程控制的分支,循环

    ```javascript
    // 单分支
    let age = 28
    if (age >= 18) {
    console.log(‘允许观看’)
    }
    // 双分支
    age = 15
    if (age >= 18) {
    console.log(‘允许观看’)
    }
    else {
    console.log(‘少儿不宜’)
    }
    // 双分支的简化
    // 语法: (条件) ? true : false
    age = 50
    let res = age >= 18 ? ‘允许观看’ : ‘少儿不宜’
    console.log(res)

    // 多分支 switch
    age = 15
    // 区间判断, 使用 true
    switch (true) {
    case age >= 18 && age < 35:

    1. console.log(允许单独观看)
    2. break

    case age >= 35 && age < 60:

    1. console.log('建议二人观看')
    2. break

    case age > 60 && age < 120:

    1. console.log('请在家人陪同下观看')
    2. break

    case age <= 3 || age >= 120:

    1. console.log('非法年龄')
    2. break

    default:

    1. console.log('少儿不宜')

    }
    // 1. 起始索引 2. 循环条件3. 更新条件
    // while 循环
    i = 0;
    while (i < length) {
    console.log(colors[i]);
    i++;
    }
    // * do {} while()
    i = 0;
    do {
    console.log(colors[i]);
    i++;
    } while (i > length);

    // 语法: for (初始条件; 循环条件; 更新条件) {…}
    for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
    }
    // 优化, 将数组长度,提前计算出来缓存到一个变量中
    for (let i = 0, length = colors.length; i < length; i++) {
    console.log(colors[i]);
    }

  1. 2. 实例演示函数的参数与返回值

//1. 参数不足: 默认参数
f = (a, b = 0) => a + b;
console.log(f(1));
console.log(f(1, 2));
// 2. 参数过多,用 …rest
f = (…arr) => arr;
console.log(f(1, 2, 3, 4, 5));

  1. 3. 实例演示对象字面量的简化方案
  2. ```javascript
  3. // ! 属性简化
  4. // 1 变量name 与 属性name 同名
  5. // 2且在同一个作用域中,可以不写变量名
  6. let name = '哈哈哈'
  7. let user = {
  8. name
  9. }
  10. console.log(user);
  11. //方法简化
  12. let name = '哈哈哈'
  13. user = {
  14. name,
  15. // getName:function () {
  16. // return this.name
  17. // }
  18. // 简化 删除:function
  19. getName () {
  20. return this.name
  21. },
  22. }
  23. console.log(user.getName());
  24. //箭头函数不能用this
  1. 实例演示模板字面量,并分析与原始字符串的区别

    1. // 模板字面量中,可以使用"插值"(变量,表达式),可以解析变量
    2. let name1 = "哈哈哈"
    3. console.log(`hello ${name1}`);
    4. console.log(`10 + 20 = ${10+20}`)
    5. console.log(`${10<20 ? "大于" : "小于"}`)
  1. 实例演示模板函数,并分析每个参数的功能与用途

    `` //模板函数(第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表) function sum(strings,...args) { console.log(strings); console.log(args); console.log(${args.reduce((a,c)=>a+c)}); } sum多个数和:${1}${21}${31}${41}${11}`
    /**

      • 模板字面量: 可以使用插值表达式的字符串
      • 模板函数: 可以使用”模板字面量”为参数的函数
      • 模板函数,就是在”模板字面量”之前加一个标签/标识符,而这个标签,就是一个函数名
      • 模板函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数
        */

    // 模板字面量, 也叫”模板字符串” , 是同义词,我觉得用”模板字面量”更直观,准确
    // 模板函数, 有的书也翻译与”标签函数”, 因为 它使用”模板字面量”做参数,称为”模板函数”更直观

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