一分钟轻松了解大厂面试语法基础题

Asuka805
129 阅读4分钟

ES6笔记：JavaScript的新时代

引言

ECMAScript 6（简称ES6），正式名称为ECMAScript 2015，是JavaScript语言的一个重要里程碑。它引入了许多新的特性和改进，极大地增强了JavaScript的表达能力和功能。本文将详细介绍ES6的主要特性，包括let和const关键字、块级作用域、常量变量等，并通过代码示例来说明这些新特性的使用方法。

ES6简介

ES6是JavaScript语言的最新标准之一，于2015年发布。在此之前，JavaScript的标准是ES5。ES6引入了许多新的语法和API，旨在提高代码的可读性、可维护性和性能。以下是ES6的一些关键特性：

  • 新增的语法糖，如箭头函数、模板字符串等。
  • 新的数据结构，如Map和Set。
  • 新的迭代协议，如for...of循环。
  • 模块化支持，通过import和export实现。
  • 类和继承的支持。
  • 更强大的函数参数处理，如默认参数、剩余参数和扩展运算符。
  • let和const关键字，支持块级作用域。

let与var

在ES5及之前的版本中，声明变量主要使用var关键字。然而，var有一些不足之处，特别是它不具备块级作用域。ES6引入了let关键字，解决了这个问题。

相同点
  • var和let都是用来声明变量的关键字。
区别
  • 作用域：
    • var声明的变量具有函数作用域或全局作用域，不会受到块级作用域的影响。
    • let声明的变量具有块级作用域，只在声明它的代码块内有效。
代码示例
// var 的作用域
function exampleVar() {
    var x = ½;
    if (true) {
        var x = 2;
        console.log(x); // 输出 2
    }
    console.log(x); // 输出 2
}

// let 的作用域
function exampleLet() {
    let y = 1;
    if (true) {
        let y = 2;
        console.log(y); // 输出 2
    }
    console.log(y); // 输出 1
}

exampleVar();
exampleLet();

常量变量 constant variable

const关键字用于声明常量，一旦声明就不能重新赋值。const同样支持块级作用域，并且在声明时必须初始化，const声明的常量最好大写。

特点

  • 不可重新赋值：

    • const声明的常量一旦赋值后，不能再被赋值新的值。

  • 块级作用域：

    • const声明的常量具有块级作用域。

  • 复杂数据类型：

    • 如果const声明的是一个对象或数组，虽然不能重新赋值，但可以修改对象或数组内部的属性。
代码示例
// 基本类型
const PI = 3.14;
console.log(PI); // 输出 3.14
// PI = ⅓; // 报错：Assignment to constant variable.

// 复杂数据类型
const person = { name: 'Alice' };
console.log(person.name); // 输出 Alice
person.name = 'Bob';
console.log(person.name); // 输出 Bob
// person = {}; // 报错：Assignment to constant variable.

变量的作用域

变量的作用域决定了变量的可见性和生命周期。ES6中的let和const关键字引入了块级作用域的概念，使得变量的作用范围更加精确和可控。

全局作用域

全局作用域中的变量在整个程序中都可以访问。

var globalVar = 'I am global';
console.log(globalVar); // 输出 I am global
局部作用域

局部作用域中的变量只能在特定的范围内访问，主要包括函数作用域和块级作用域。

  • 函数作用域：
    • 使用var声明的变量具有函数作用域。
function exampleFunction() {
    var localVar = 'I am local';
    console.log(localVar); // 输出 I am local
}
exampleFunction();
// console.log(localVar); // 报错：localVar is not defined
  • 块级作用域：
    • 使用let和const声明的变量具有块级作用域。
if (true) {
    let blockScopedVar = 'I am block scoped';
    console.log(blockScopedVar); // 输出 I am block scoped
}
// console.log(blockScopedVar); // 报错：blockScopedVar is not defined

总结

ES6为JavaScript带来了许多重要的改进和增强，其中let和const关键字的引入尤为显著。它们不仅解决了var的一些不足，还提供了更精细的作用域控制。通过本文的介绍和代码示例，相信你已经对ES6的新特性有了更深入的理解。在未来的学习和开发中，合理使用这些新特性，可以使你的代码更加简洁、高效和易于维护。

代码总结

以下是完整的代码示例，供参考：

// var 的作用域
function exampleVar() {
    var x = ½;
    if (true) {
        var x = 2;
        console.log(x); // 输出 2
    }
    console.log(x); // 输出 2
}

// let 的作用域
function exampleLet() {
    let y = 1;
    if (true) {
        let y = 2;
        console.log(y); // 输出 2
    }
    console.log(y); // 输出 1
}

exampleVar();
exampleLet();

// 基本类型
const PI = 3.14;
console.log(PI); // 输出 3.14
// PI = ⅓; // 报错：Assignment to constant variable.

// 复杂数据类型
const person = { name: 'Alice' };
console.log(person.name); // 输出 Alice
person.name = 'Bob';
console.log(person.name); // 输出 Bob
// person = {}; // 报错：Assignment to constant variable.

// 全局作用域
var globalVar = 'I am global';
console.log(globalVar); // 输出 I am global

// 函数作用域
function exampleFunction() {
    var localVar = 'I am local';
    console.log(localVar); // 输出 I am local
}
exampleFunction();
// console.log(localVar); // 报错：localVar is not defined

// 块级作用域
if (true) {
    let blockScopedVar = 'I am block scoped';
    console.log(blockScopedVar); // 输出 I am block scoped
}
// console.log(blockScopedVar); // 报错：blockScopedVar is not defined

希望这篇笔记能帮助你更好地理解和掌握ES6的新特性，从而写出更高质量的JavaScript代码。祝你编程愉快！

avatar
文章
阅读
粉丝