JavaScript核心语法（3）

前两篇文章大概把JavaScript的基础语法讲了一下，这篇文章主要讲讲ES6的核心语法。ES6的核心语法说实话其实有点多，我重点挑一些经常在项目中用到的来讲，其他一些我没怎么见过的就不讲了。

目录

1.变量和常量

变量（let 和 var）

var

let

常量（const）

总结

2.箭头函数

语法

示例

特性和行为

使用场景

1.变量和常量

变量（let 和 var）

var

• 作用域：var 声明的变量是函数作用域或全局作用域的。如果在函数内声明，则在整个函数内都可以访问；如果在函数外声明，则在全局范围内都可以访问。
• 提升：var 声明的变量会被提升到函数或全局作用域的顶部，但不会初始化。这意味着你可以在声明之前访问它们，但值是 undefined。

function example() {
  console.log(x); // undefined
  var x = 10;
  console.log(x); // 10
}
example();

let

• 作用域：let 声明的变量是块级作用域的。这意味着它们只在声明它们的块（如 {} 包围的代码块）内有效。
• 提升：let 声明的变量不会被提升到块的顶部，因此在声明之前访问它们会导致 ReferenceError。

function example() {
  console.log(x); // ReferenceError: x is not defined
  let x = 10;
  console.log(x); // 10
}
example();

常量（const）

• 作用域：const 声明的变量是块级作用域的，这与 let 类似。
• 不可变：const 声明的变量必须在声明时初始化，并且不能重新赋值。注意，const 只保证变量名指向的内存地址不变，对于复杂类型（如对象和数组），其内容仍然可以修改。

function example() {
  const x = 10;
  console.log(x); // 10
  x = 20; // TypeError: Assignment to constant variable.
}
example();

// 对于对象或数组
const obj = { a: 1 };
obj.a = 2; // 合法，修改对象属性
console.log(obj.a); // 2

总结

• var：函数作用域或全局作用域，变量提升，允许重复声明。
• let：块级作用域，不提升，不能在同一作用域内重复声明。
• const：块级作用域，不提升，必须初始化，不能重新赋值，适用于常量。

2.箭头函数

箭头函数是 ES6 中引入的一种更简洁的函数表达方式。它们具有一些独特的特性，使得它们在某些情况下比传统函数更方便使用。以下是箭头函数的详细介绍。

语法

箭头函数的基本语法如下：

(param1, param2, ..., paramN) => { statements }

如果只有一个参数，可以省略圆括号：

param => { statements }

如果函数体只有一条语句，并且需要返回值，可以省略大括号和 return 关键字：

(param1, param2, ..., paramN) => expression

示例

1. 无参数的箭头函数：

const sayHello = () => {
  console.log("Hello!");
};
sayHello(); // 输出 "Hello!"

1. 一个参数的箭头函数：

const square = x => x * 2;
console.log(square(4)); // 输出 8

1. 多个参数的箭头函数：

const add = (a, b) => a + b;
console.log(add(3, 5)); // 输出 8

特性和行为

1. 没有自己的 this 绑定：

   箭头函数不会创建自己的 this，它会捕获其所在上下文的 this 值，作为自己的 this 值。这使得它们非常适合用于回调函数，特别是在需要访问类实例的成员时。

   function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
       console.log(this.age);
     }, 1000);
   }
   
   const p = new Person();
   

   在上面的示例中，箭头函数中的 this 绑定到 Person 实例，因此可以正确访问 this.age。

使用场景

1. 简化回调函数：

   const numbers = [1, 2, 3, 4];
   const doubled = numbers.map(n => n * 2);
   console.log(doubled); // 输出 [2, 4, 6, 8]
   

2. 保持 this 上下文：

   class Timer {
     constructor() {
       this.seconds = 0;
       setInterval(() => {
         this.seconds++;
         console.log(this.seconds);
       }, 1000);
     }
   }
   
   const timer = new Timer();