ES6——字符串模板标签模板字符串函数的默认参数剩余参数数组对象的展开语法数值的表示Symbol

Posted 2022-03-12 小小白学计算机

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6——字符串模板标签模板字符串函数的默认参数剩余参数数组对象的展开语法数值的表示Symbol相关的知识，希望对你有一定的参考价值。

一、字符串模板基本使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过 $expression 来嵌入动态的内容；

二、标签模板字符串使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的javascript的函数：

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：

模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；

三、函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；
而在ES6中，我们允许给函数一个默认值：

默认值也可以和解构一起来使用：

另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了：

// ES5以及之前给参数默认值
/*
* 缺点：
* 1. 写起来麻烦，并且代码阅读性比较差
* 2. 这种写法有bug
* */
function foo(m, n) 
    m = m || 'aaa'
    n = n || 'bbb'
    console.log(m, n)

foo() // aaa bbb
foo(0, '') // aaa bbb

// 1.ES6可以给函数参数提供默认值
function bar(m = 'aaa', n = 'bbb') 
    console.log(m, n)

bar('hhh') // hhh bbb

// 2.对象参数和默认值以及解构
// function printInfo(info = name: 'why', age: 18) 
//     console.log(info.name, info.age)
// 
function printInfo(name, age = name: 'why', age: 18) 
    console.log(name, age)

printInfo() // why 18
printInfo(name: 'zep', age: 22) // zep 22

// 另一种写法
function printInfo2(name = 'zep', age = 33 = ) 
    console.log(name, age)

printInfo2() // zep 33


// 3.有默认值的形参最好放到最后
function bar2(x, y, z = 30) 
    console.log(x, y, z)

bar2(10, 20) // 10 20 30

function bar3(z = 30, x, y) 
    console.log(x, y, z)

bar3(10, 20) // 20 undefined 10
bar3(undefined, 10, 20) // 10 20 30

// 4. 有默认值的函数的length属性
console.log(bar3.length) // 0
console.log(bar2.length) // 2
function baz(x, y, z, m = 30, n) 
    console.log(x, y, z, m, n)

console.log(baz.length) // 3

四、函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

那么剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；
剩余参数必须放到最后一个位置，否则会报错。