✏️ 跟我一起学 ES6：第一部分

简介👋🏼

欢迎来到这个由四部分组成的系列的第一部分，在这里我将记录我目前正在学习的概念，作为我更好地理解 JavaScript 语言的一部分。

在本部分中，我将讨论以下主题：

1. 使用 Let 和 Const 声明变量
2. 块和立即调用函数表达式
3. ES6 中的字符串

一旦我写完并发布后续部分，我会在这条线下方链接它们！
[在我写完并发布后续部分之前，这里没有任何内容]

使用 Let 和 Const 📦 声明变量

在 ES6 中，有两种使用以下关键字声明变量的新方法：“ let ”和“ const ”。

在 ES6 中定义变量

// Two methods of declaring variables
let counter = 0;
const name = 'Yusuf';

console.log(counter); // Output: 0
console.log(name); // Output: Yusuf

实际上，上面的两个语句将执行相同的操作，即定义两个新变量counter和name并将其设置为某个值。

那么‘let’和‘const’之间有什么区别？

'let' 和 'const' 之间的主要区别是：

• ' let '：用于在 JavaScript 应用程序的整个生命周期内可能发生变化的值。
• ' const '：用于表示在应用程序中任何时候都不能、也不应该改变的值。这些值可以被认为是“常量”。**

** 感谢David在评论中提出的一个非常好的观点：你可以修改 const 结构体本身包含的值（例如数组元素），但不能修改整个变量本身（例如替换整个数组内容）。他的观点如下：

• counter：在我们的程序中，它可以增加或减少（改变），因此使用let作为这个变量是合适的。
• name ：在大多数情况下，一个人不能改变自己的名字，所以我们希望使用const来定义它，这样它就不能被改变。

事实上，如果我们尝试改变使用const定义的变量的值，我们将会遇到一个可爱的错误：

const name = 'Yusuf';
// Attempting to re-assign the value of name throws an error
name = 'new name!';
console.log(name);

此功能使开发人员能够定义并保存具有一个值的变量，并且知道他们无法有意或无意地更改该值，否则 JavaScript 会对此产生干扰。我认为这很棒。

变量声明：函数作用域 vs. 块作用域

随着let和const的引入，JavaScript 引擎访问这些变量的方式与在 ES5 中使用var关键字声明变量时通常的方式不同。

我们可以将let和const变量描述为块级作用域，将使用var定义的变量描述为函数作用域。作用域可以被认为是可访问特定值的“空间”。

• 块作用域：在此作用域中定义的变量仅在其定义的块内可用
• 函数作用域：在此作用域中定义的变量在定义它的整个函数中都可用，甚至在其他内部作用域中也是如此

下面是这两种范围的简单示例，后面附有解释：

// ES5: 'var'
function testingScopesOne()
{
    var num =  1;

    // Creating a new Block Scope
    {
        var num =  2;

        // Output: 2
        console.log(num);
    }

// Output: 2
console.log(num);
}

// ES6: 'let'
function testingScopesTwo()
{
    let num =  1;
    // Creating a new Block Scope

    {
        let num =  2;

        // Output: 2
        console.log(num);
    }

    // Output: 1
    console.log(num);
}

testingScopesOne();
testingScopesTwo();

代码解释👀

上面我定义并执行了两个函数，testingScopesOne和TestingScopesTwo。
我会尝试分解每个函数中我做了什么、结果如何，以及它们如何与函数作用域和块作用域的概念联系起来：

• 在每个函数中，我定义了一个名为num的变量，并赋值为1。它们之间的区别在于，我在testsScopesOne中使用var，而在testsScopesTwo中使用 let 。
• 在变量定义和赋值之后，我使用花括号 {...}创建了一个新块
• 在新创建的块范围内，我创建一个具有相同名称的变量num，并分配一个新值2：
  • TestingScopesOne：我使用var并输出当前块范围内的值。
  • TestingScopesTwo：我使用了let并在这里输出值。

两者都输出值2，这是预期的。然而，一旦我们脱离了这个块作用域，我们在输出语句中就会得到不同的结果：

• 离开块范围后，我再次在testsOne和testsTwo中输出“ num ”的值。
• TestingScopesOne 的输出是2，而TestingScopesTwo 的结果仍然是 1，这是我们一开始赋予它的初始值。

为什么会这样？😮

TestingScopesOne 函数演示了函数作用域的概念。

解释：我们使用var定义了一个变量 num ，并赋值给它，然后在函数的另一个作用域内重新赋值给它。新赋的值 2覆盖了初始值1 ，这表明使用var定义的变量的作用域属于函数作用域。

另一方面，testingScopesTwo 函数演示了块作用域的概念。

解释：我们使用let定义了变量 num ，然后在函数的另一个作用域内，我们为 num 赋了一个不同的值(2)。然而，这里发生的情况是，这个新值并没有像在 testsScopesOne 中那样保存，所以当我们在函数末尾将值输出到该作用域之外时，该值仍然保持为1。

这是因为，当我们在块作用域内再次声明变量 num 时，它创建了一个全新的变量，即使其名称与我们声明的初始变量（num）匹配。这体现了块作用域的概念，其中任何使用 let 定义的变量都仅绑定到它所定义的当前块作用域。

块和立即调用函数表达式🏃🏽

块是包含在一组花括号内的任何代码：

{
    // Some code
}

块通常用于控制结构，例如 if、for、else 等，但不限于在这些中使用。

在 ES6 中，我们可以使用块的概念来简化编写立即调用函数表达式 (IIFE) 的方式。

回顾：什么是 IIFE？

IIFE 是一种定义后立即执行的函数（🏃🏽）——JavaScript 引擎将其识别为需要立即执行的函数。

IIFE 的一大优点在于它能够封装所有在其中使用和定义的数据。这意味着，除非这些数据是公开定义的，否则无法从 IIFE 内部访问任何数据。这是因为，在执行 IIFE 时，会创建一个新的作用域，该作用域独立于主父作用域。

IIFE：ES5 与 ES6

在 ES5 中，我们必须执行以下操作来创建 IIFE：

• 声明匿名函数
• 将此函数括在括号内
• 在这些括号外面添加一对括号

工作量很大，对吧？更不用说最终的结构看起来有多乱了。
幸运的是，在 ES6 中，我们只需要在一对括号内编写代码……就这么简单。

// ES5 IIFE
(function() {
    // Code
})();

// ES6 IIFE
{ 
    // Code
}

ES6 IIFE：示例

下面是一个简单的例子，我们定义了一个 IIFE，并在其中声明了一个变量 myName。
在 IIFE 内部访问这个变量没有问题，但在 IIFE 外部访问它会报错。

{
    const myName = 'Yusuf';
    console.log(myName); // Output: Yusuf
}
console.log(myName); // Error: myName is not defined

ES6 中的字符串

在 ES6 中，我们操作和与字符串交互的方式有了显著的改进。
其中有一个特性尤其值得一提，它或许也是我最喜欢 ES6 的功能之一。那就是……字符串字面量。

字符串文字

还记得当你想打印出一个包含一些变量的字符串（比如一个人的名字）时吗？你必须执行以下操作才能实现此目的：

// ES5 Strings
console.log('Hello' + name + ', welcome to this application!');

有了字符串字面量，在变量之间添加 + 运算符以及在每个变量之间开始/结束字符串的尴尬就消失了🥳！上面的控制台日志可以通过执行以下操作来实现：

// ES6 String Literals
console.log(`Hello ${name}, welcome to this application!`);

显著差异：

• 使用反引号代替普通引号
• 使用以下语法输入任何变量：${...}，其中...代表要显示的变量

您还可以在 ${ ... } 结构中输入其他简单的 JavaScript 代码片段，例如对某个函数的调用。该函数可能会返回您想要显示的值，在这种情况下，您可以直接将其输入到字符串中。

function returnName()
{
    return 'Yusuf';
}

console.log(`Hello ${returnName()}, welcome to this application!`);
// Output: Hello Yusuf, welcome to this application!

ES6 字符串方法

除了字符串字面量之外，ES6 还带来了一些可用于字符串的新函数。下面是每个函数的简单演示：

// Method Name: startsWith
console.log('coffee'.startsWith('cof'));
// Output: true

// Method Name: endsWith
console.log('coffee'.endsWith('ee'));
// Output: true

// Method Name: includes
console.log('coffee'.includes('offe'));
// Output: true

// Method Name: repeat
console.log('hey '.repeat(4));
// Output: hey hey hey hey

结论

在这个由四部分组成的系列的第一部分中，我介绍了以下 ES6 JavaScript 概念：

• 使用 let 和 const 定义变量，并与使用 var 进行比较
• 简要地谈一下范围，尽管在整篇文章中还可以说更多！
• 涵盖立即调用函数表达式以及如何使用块实现这一点
• ES6 字符串操作及其相关的一些新方法

请继续关注本系列的接下来三部分，发布后我将在下面发布链接。

为该系列接下来未发布的三部分留出一些空间！

注意：我绝对算不上 JavaScript 方面的专家。我写这些帖子的目的是为了帮助自己在学习过程中更好地理解这些概念，同时也想回馈开发者社区。
如果我分享的信息有任何根本性的错误，请告诉我。我们都还在学习，我们一定可以一起学习！😊

在Instagram和Twitter上找到我，我会在那里发布我目前正在使用的技术，并记录我作为计算机科学学生的旅程🙂。