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

阿皮想当小怪兽
108 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

最近在写算法的时候写出了下面的代码： 😱 太长了，自己竟然写出了一串糟糕的代码，有什么方法可以优化的吗？

模板字符串

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

如果参数的默认值是一个函数，该函数的作用域也遵守这个规则。

avatar
文章
阅读
粉丝