ES6知识点补充——模板字符串、默认参数

简介: JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解模板字符串、默认参数
最近在写算法的时候写出了下面的代码:
image.png
😱 太长了,自己竟然写出了一串糟糕的代码,有什么方法可以优化的吗?

模板字符串

ES6模板字符串 , 插值用 ${ }
if (data == arr[mid]) {
        j = realMid
        console.log('+++++ mid = ' + realMid + ' start = ' + realStart + ' end = ' + realEnd + ' j = ' + j + ' +++++');
        return '数' + data + '在数组的第' + realMid + '位';
        // 使用模板字符串:
              console.log(`+++++ mid = ${realMid}, start = ${realStart}, end = ${realEnd}, j =${j} +++++`);
        return `数${data}在数组的第${realMid}位`;
    }

优化后看起来好多了,下面继续来谈谈模板字符串的其他用法:

多行字符串

在模板字符串中,空格、缩进、换行都会被保留:
// 使用模板字符串前要换行:
console.log('String with \n\
multiple \n\
lines')
// 使用模板字符串后要换行:
console.log(`String with
multiple
lines`)

嵌入变量

在${ }内部不只是可以写变量,还可以写表达式、函数的调用
const info = `age double is ${age * 2}`
console.log(info)

function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`

标签模板字符串

模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串
function foo(m, n, x) {
  console.log(m, n, x, '---------')
}

const name = "a"
const age = 18

foo("Hello", "World", name, age) // Hello World a ---------
foo`Hello${name}World${age}` // [ 'Hello', 'World', '' ] a 18 ---------
  • 第一个参数依然是模块字符串中整个字符串, 只是被${ }切成多块,放到了一个数组中
  • 第二个参数是第一个 ${}里面的内容,第三个参数则是第二个${ }里面的内容

默认参数

JavaScript 函数参数的默认值都是 undefined, ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
传入的参数是undefined时,默认参数才会生效

参数变量是 默认声明 的,所以不能用 let 或 const 再次声明(否则会报错)。

函数参数

function foo(func = () => fn = 'a') {
  console.log(func()) // a
}
foo()

对象参数

函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值

function printInfo({ name, age } = { name: "a", age: 18 }) {
  console.log(name, age)
}

printInfo({ name: "kobe", age: 40 })

另外一种写法:先给传入对象一个默认值:{ },再给对象解构赋值的默认值:a和18

function printInfo1({ name = "a", age = 18 } = {}) {
  console.log(name, age)
}

printInfo1()

补充注意

  1. 有默认值的函数的length属性:有默认值的参数不算在length属性里面,且在其之后的参数也不算进length属性里面
function baz(x, y = 30) {
  console.log(x, y)
}

console.log(baz.length) // 1
  1. 使用参数默认值时,函数不能有同名参数(否则会报错)
  2. 参数作用域
函数声明初始化时,一旦设置了参数默认值,参数会形成一个单独的作用域,等初始化结束后,该作用域即会消失。这种语法在不设置参数默认值的时候是不会出现的。
function foo(m, n = m + 1) {
  console.log(m, n)  //10 11
}

foo(10);

上面代码中,调用函数 fn 时,参数形成一个单独的作用域。在这个作用域里面,默认值变量m 指向第一个参数 m
而如果没有参数中没有默认值调用的变量,则会到上层作用域去找:

let m = 20
function foo(n = m + 1) {
  m = 30
  console.log(m, n)  //30 21
}

foo();

上面代码中,n = m + 1的 m 是来自全局作用域的m = 20
如果参数的默认值是一个函数,该函数的作用域也遵守这个规则。

目录
相关文章
ES6学习(3)模板字符串、简化对象和函数写法
ES6学习(3)模板字符串、简化对象和函数写法
|
3月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
6月前
|
JavaScript 前端开发
js开发:请解释什么是ES6的解构赋值(destructuring assignment),并给出一个示例。
ES6的解构赋值简化了JavaScript中从数组和对象提取数据的过程。例如,`[a, b, c] = [1, 2, 3]`将数组元素赋值给变量,`{name, age} = {name: '张三', age: 18}`则将对象属性赋值给对应变量,提高了代码的可读性和效率。
35 3
|
6月前
|
机器学习/深度学习 存储 算法
C++ 模版函数介绍:介绍模版函数的基本概念、用法和作用
C++ 模版函数介绍:介绍模版函数的基本概念、用法和作用
65 1
|
6月前
|
存储 编译器 Linux
【C++初阶(十)】C++模板(进阶) ---非类型模板参数、模板的特化以及模板的分离编译
【C++初阶(十)】C++模板(进阶) ---非类型模板参数、模板的特化以及模板的分离编译
64 0
ES6模板字符串的基本使用
ES6模板字符串的基本使用
|
12月前
ES6系列笔记-字符串方法和字符串模板
ES6系列笔记-字符串方法和字符串模板
39 1
|
JavaScript 前端开发 网络架构
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
81 0
Go语言之自定义模板,修改模板默认变量符号
Go语言之自定义模板,修改模板默认变量符号
108 0
Go语言之自定义模板,修改模板默认变量符号
|
JavaScript 网络架构
ES6知识点补充——剩余参数、展开语法
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解剩余参数、展开语法
190 0