JavaScriptES6新特性

一. 块级作用域（let和const）

ES6引入了let和const两个新的关键字用于声明变量，解决了var关键字带来的作用域问题。let声明的变量只在当前块级作用域内有效，而const声明的变量是常量，一旦被赋值后就不能再改变。

1.let

let 是 ES6 中引入的用于声明块级作用域变量的关键字。与 var 不同，let 声明的变量只在其声明的块（或子块）作用域内有效，且不会发生变量提升（hoisting）现象（即变量在声明之前不可用）。

特点：

1. 块级作用域：let 变量只在其声明的块或子块中可用。
2. 不提升（Temporal Dead Zone）：在声明之前引用 let 变量会抛出 ReferenceError。
3. 可重新赋值：let 声明的变量可以重新赋值。

示例代码：

if (true) {
   
   
    let a = 10;
    console.log(a); // 10
}
// console.log(a); // ReferenceError: a is not defined

let b;
// console.log(b); // ReferenceError: b is not defined，因为b没有初始化，处于Temporal Dead Zone
b = 20;
console.log(b); // 20

let c = 30;
c = 40; // 重新赋值
console.log(c); // 40

2.const

const 也是 ES6 引入的，用于声明一个只读的常量。一旦一个常量被赋值后，它的值就不能再被改变（但如果是对象或数组，则内部状态可以被修改，只是指向的引用不能变）。

特点：

1. 块级作用域：与 let 相同，const 声明的常量也只在其声明的块或子块中可用。
2. 不提升（Temporal Dead Zone）：在声明之前引用 const 变量同样会抛出 ReferenceError。
3. 不可重新赋值：一旦 const 变量被赋值后，尝试修改其值会抛出 TypeError。

示例代码：

const PI = 3.14;
// PI = 3.14159; // TypeError: Assignment to constant variable.

if (true) {
   
   
    const MAX_VALUE = 100;
    console.log(MAX_VALUE); // 100
}
// console.log(MAX_VALUE); // ReferenceError: MAX_VALUE is not defined

const obj = {
   
    key: 'value' };
obj.key = 'new value'; // 对象内部状态可以修改
console.log(obj.key); // 'new value'
// obj = {}; // TypeError: Assignment to constant variable.

3.let 和 var 的区别

1. 作用域：var 声明的变量是函数作用域或全局作用域，而 let 声明的变量是块级作用域。
2. 变量提升（Hoisting）：var 声明的变量会提升到其作用域的顶部，而 let 声明的变量不会提升，在声明前引用会抛出 ReferenceError。
3. 重复声明：在同一个作用域内，var 可以重复声明同一个变量，而 let 不能（会抛出 SyntaxError）。
4. 全局对象属性：在浏览器环境下，var 声明的全局变量会成为 window 对象的属性，而 let 和 const 声明的全局变量不会。

示例代码对比：

// var
var x = 1;
{
   
   
    var x = 2; // 同一作用域内可以重复声明
    console.log(x); // 2
}
console.log(x); // 2

// let
let y = 1;
{
   
   
    let y = 2; // 不同的块级作用域，允许重复声明
    console.log(y); // 2
}
console.log(y); // 1

// 尝试在let前使用
// console.log(z); // ReferenceError: z is not defined
let z = 3;

// var 和全局对象
var globalVar = 42;
console.log(window.globalVar); // 42

let globalLet = 42;
console.log(window.globalLet); // undefined

二. 箭头函数

箭头函数提供了一种更简洁的函数书写方式，并自动绑定了上下文（即this的值）。这解决了传统函数在回调中this指向不一致的问题。箭头函数（Arrow Functions）是ES6中引入的一种更简洁的函数写法，它使用 => 语法。箭头函数不绑定自己的 this，arguments，super，或 new.target。这些函数表达式更适用于非方法函数，并且它们不能用作构造函数。

1.特点

1. 更简洁的语法：特别是对于只有一个参数的函数，或者函数体只有一行代码的情况。
2. 不绑定自己的 this：箭头函数不创建自己的 this 上下文，而是继承自父执行上下文中的 this 值（即所谓的词法作用域或静态作用域）。这是箭头函数最显著的特点，也是它最常被使用的原因之一。
3. 不支持 arguments 对象：因为箭头函数没有自己的 this，所以它也没有自己的 arguments 对象。在箭头函数内访问 arguments 实际上会访问到外层函数的 arguments 对象。
4. 不支持 new 操作符：由于箭头函数没有自己的 this，且没有 prototype 属性，因此它们不能被用作构造函数，即不能使用 new 关键字来调用。
5. 没有 super：箭头函数不能通过 super 关键字调用父类的方法。
6. 不支持 yield：箭头函数不能用作 Generator 函数，即不能包含 yield 表达式。

2.语法

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

(参数1, 参数2, …, 参数N) => {
   
    函数体 }

如果函数体只有一行代码（且不需要返回对象字面量），可以省略大括号和 return 关键字：

(参数1, 参数2, …, 参数N) => 表达式

当函数只有一个参数时，可以省略圆括号：

参数 => {
   
    函数体 }
参数 => 表达式

3.示例代码

// 基本用法
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

// 单个参数时省略圆括号
const square = x => x * x;
console.log(square(4)); // 16

// 函数体只有一行代码时省略大括号和return
const greet = name => `Hello, ${
     
     name}!`;
console.log(greet('Alice'