JavaScript ES6 新特性全览：变量声明、函数语法、数据结构等多方面解析

在现代 JavaScript 开发中，ECMAScript 6（简称 ES6）带来了许多强大的新特性，极大地提升了开发效率和代码的可读性。本文将带你全面了解 ES6 的主要新特性。

一、let 和 const 关键字

let和const是 ES6 中引入的新的变量声明方式，与传统的var相比，具有以下重要区别：

1.let

• 块级作用域：声明的变量具有块级作用域，只在其声明的代码块内有效，如函数体、循环体、条件语句块等。

   {
     let x = 10;
     console.log(x); // 10
   }
   console.log(x); // 报错，x 未定义

• 不存在变量提升：在使用let声明变量时，变量不会被提升到其作用域的顶部，在变量声明之前访问该变量会抛出错误。

   console.log(y); // 报错，y is not defined
   let y = 20;

2.const

• 声明常量：用于声明常量，一旦赋值后就不能再被重新赋值，有助于确保某些值在程序的生命周期内保持不变，提高代码的可维护性和可读性。

   const PI = 3.14;
   // PI = 3.14159; // 报错，不能重新赋值

• 块级作用域：与let一样，具有块级作用域。

   {
     const MAX_VALUE = 100;
     console.log(MAX_VALUE); // 100
   }
   console.log(MAX_VALUE); // 报错，MAX_VALUE is not defined

• 并非完全不可变：当使用const声明一个对象或数组时，它指向的内存地址不能被改变，但对象或数组的内容是可以修改的。

   const obj = { name: 'John' };
   obj.name = 'Jane'; // 可以修改对象的属性
   console.log(obj); // { name: 'Jane' }

   const arr = [1, 2, 3];
   arr.push(4); // 可以修改数组的内容
   console.log(arr); // [1, 2, 3, 4]

总之，let和const的引入使 JavaScript 的变量声明更加安全和可预测，避免了变量作用域不明确和变量提升带来的问题。在实际开发中，应根据具体情况选择使用let或const来声明变量或常量。

二、箭头函数

1.箭头函数是一种简洁的函数表达式语法。

基本语法：

1. param => expression：当函数只有一个参数且函数体是一个表达式时使用。
2. (param1, param2) => { statements }：当有多个参数或函数体包含多条语句时使用。

   const sum = (a, b) => a + b;
   const square = x => x * x;

特点：

• 没有自己的this、arguments、super或new.target，继承了外层函数的这些值。
• 例如：

   const obj = {
     numbers: [1, 2, 3],
     doubleNumbers: function() {
       return this.numbers.map(num => num * 2);
     }
   };
   console.log(obj.doubleNumbers()); // [2, 4, 6]

2.箭头函数的 this 指向问题

在传统的 JavaScript 函数中，this的指向取决于函数的调用方式。然而，在箭头函数中，this的指向是在定义时确定的，它继承自外层的执行上下文。

function Person() {
  this.age = 30;
  // 传统函数
  this.increaseAgeTraditional = function() {
    setTimeout(function() {
      this.age++;
      console.log(this.age); // 通常情况下这里的 this 不再指向 Person 的实例
    }, 1000);
  };
  // 箭头函数
  this.increaseAgeArrow = function() {
    setTimeout(() => {
      this.age++;
      console.log(this.age); // 这里的 this 指向 Person 的实例，因为继承了外层的 this
    }, 1000);
  };
}

const person = new Person();
person.increaseAgeTraditional(); // 可能会报错或者输出不是预期的值
person.increaseAgeArrow(); // 正确地输出增加后的 age

三、模板字符串

• 基本语法：使用反引号（）包裹字符串，在字符串中可以使用 ${expression}` 的形式插入变量或表达式。

   const name = "John";
   const greeting = `Hello, ${name}!`;
   console.log(greeting); // Hello, John!

• 多行字符串：可以轻松地表示多行文本。

   const poem = `This is a poem.
   It has multiple lines.`;
   console.log(poem);

四、解构赋值

允许从数组或对象中提取值，并将其赋值给变量。

• 数组解构：

   const [a, b] = [10, 20];
   console.log(a); // 10
   console.log(b); // 20

• 对象解构：

   const person = { name: "Alice", age: 30 };
   const { name, age } = person;
   console.log(name); // Alice
   console.log(age); // 30

五、默认参数

在函数定义时可以为参数设置默认值。

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Bob"); // Hello, Bob!

六、展开运算符

• 数组展开：可以将数组或对象展开为单个元素。

   const arr1 = [1, 2, 3];
   const arr2 = [4, 5, 6];
   const combined = [...arr1,...arr2];
   console.log(combined); // [1, 2, 3, 4, 5, 6]

• 对象展开：

   const obj1 = { a: 1, b: 2 };
   const obj2 = { c: 3, d: 4 };
   const combinedObj = {...obj1,...obj2 };
   console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

七、Promise

用于处理异步操作的对象。

• 基本用法：Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

   const promise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 2000);
   });
   promise.then(result => {
     console.log(result); // Success!
   }).catch(error => {
     console.log(error);
   });

• 链式调用：可以进行链式调用，方便地处理多个异步操作。

   const promise1 = new Promise((resolve, reject) => {
     resolve(10);
   });
   const promise2 = promise1.then(result => result * 2);
   const promise3 = promise2.then(result => result + 5);
   promise3.then(result => {
     console.log(result); // 25
   });

八、class 类

ES6 引入了类的概念，使面向对象编程更加直观。

• 定义类：

   class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age;
     }
     greet() {
       console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
     }
   }
   const person1 = new Person("Bob", 30);
   person1.greet();

• 继承：使用extends关键字实现继承。

   class Student extends Person {
     constructor(name, age, grade) {
       super(name, age);
       this.grade = grade;
     }
     study() {
       console.log(`${this.name} is studying in grade ${this.grade}.`);
     }
   }
   const student1 = new Student("Alice", 15, 9);
   student1.greet();
   student1.study();

九、模块化（import 和 export）

ES6 支持模块化编程，使代码更加可维护和可复用。

• 导出模块：使用export关键字导出函数、变量或类。

   // module.js
   export const add = (a, b) => a + b;
   export class Person {
     constructor(name) {
       this.name = name;
     }
   }

• 导入模块：使用import关键字导入模块。

   // main.js
   import { add, Person } from './module.js';
   const result = add(10, 20);
   console.log(result); // 30
   const person = new Person("John");
   console.log(person.name); // John

十、Set 和 Map 数据结构

1.Set（集合）

1. 特点：是一种新的数据结构，类似于数组，但成员的值都是唯一的。可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数来初始化。
2. 用法：

• 创建和添加元素：

   const s = new Set();
   s.add(1);
   s.add(2);
   s.add(2); // 重复添加无效
   console.log(s); // Set(2) {1, 2}

• 数组去重：

   const arr = [1, 2, 2, 3, 3, 4];
   const uniqueArr = Array.from(new Set(arr));
   console.log(uniqueArr); // [1, 2, 3, 4]

2.Map（字典）

1. 特点：是一种键值对的集合，其中键可以是任何类型的值，包括对象。相比传统的以字符串作为键的对象，Map 更加灵活和高效。
2. 用法：

• 创建和添加键值对：

   const m = new Map();
   m.set('name', 'John');
   m.set('age', 30);
   console.log(m); // Map(2) {'name' => 'John', 'age' => 30}

• 根据键获取值：

   console.log(m.get('name')); // John

十一、Symbol 类型

• 用途：是一种新的原始数据类型，表示独一无二的值。可以用作对象的属性名，确保不会与其他属性名冲突。

   const sym1 = Symbol('description');
   const obj = {};
   obj[sym1] = 'value';
   console.log(obj[sym1]); // value

• 内置 Symbol：ES6 定义了一些内置的 Symbol，用于特定的目的。例如，Symbol.iterator用于定义对象的迭代器。

   const arr = [1, 2, 3];
   const iterator = arr[Symbol.iterator]();
   console.log(iterator.next()); // {value: 1, done: false}

十二、Proxy 和 Reflect

1.Proxy（代理）

1. 作用：可以拦截对象的各种操作，如属性访问、赋值、函数调用等，并在这些操作发生时执行自定义的逻辑。
2. 用法：

   const target = {
     name: 'John',
     age: 30
   };
   const handler = {
     get: function(obj, prop) {
       console.log(`Getting property ${prop}`);
       return obj[prop];
     },
     set: function(obj, prop, value) {
       console.log(`Setting property ${prop} to ${value}`);
       obj[prop] = value;
       return true;
     }
   };
   const proxy = new Proxy(target, handler);
   console.log(proxy.name); // Getting property name，然后输出'John'
   proxy.age = 31; // Setting property age to 31

2.Reflect（反射）

1. 作用：提供了一组与 Proxy 拦截操作对应的方法，用于执行这些操作的默认行为。
2. 用法：

   const obj = {
     name: 'John',
     age: 30
   };
   console.log(Reflect.get(obj, 'name')); // John
   Reflect.set(obj, 'age', 31);
   console.log(obj.age); // 31

十三、生成器函数（Generator Functions）

生成器函数是一种可以暂停和恢复执行的特殊函数。使用function*语法定义，并通过yield关键字暂停执行并返回一个值。

1.定义和使用生成器函数

   function* counter() {
     let i = 0;
     while (true) {
       yield i++;
     }
   }

   const gen = counter();
   console.log(gen.next().value); // 0
   console.log(gen.next().value); // 1
   console.log(gen.next().value); // 2

2.与迭代器的关系

生成器函数返回的对象是一个迭代器，可以使用for...of循环进行遍历。

   function* numbers() {
     yield 1;
     yield 2;
     yield 3;
   }

   for (let num of numbers()) {
     console.log(num);
   }
   // 输出：1、2、3

十四、迭代器（Iterators）和可迭代对象（Iterable Objects）

1.可迭代对象：

一个对象被称为可迭代对象，如果它实现了Symbol.iterator方法。可迭代对象可以被for...of循环遍历。例如，数组、字符串、Set 和 Map 都是可迭代对象。

   for (let char of 'Hello') {
     console.log(char);
   }
   // 输出：H、e、l、l、o

2.迭代器：

迭代器是一个对象，它具有一个next()方法，每次调用next()方法都会返回一个对象，该对象包含两个属性：value表示当前的值，done表示遍历是否完成。

   const iterableObj = {
     [Symbol.iterator]() {
       let i = 0;
       return {
         next() {
           if (i < 3) {
             return { value: i++, done: false };
           } else {
             return { value: undefined, done: true };
           }
         }
       };
     }
   };

   for (let item of iterableObj) {
     console.log(item);
   }
   // 输出：0、1、2

十五、剩余参数（Rest Parameters）和扩展运算符（Spread Operator）的更多应用场景

剩余参数

• 函数参数收集：允许在函数定义中收集多个参数为一个数组。

   function sum(...numbers) {
     return numbers.reduce((total, num) => total + num, 0);
   }
   console.log(sum(1, 2, 3, 4)); // 10

十六、总结

ES6 的这些新特性为 JavaScript 开发带来了巨大的便利和效率提升。掌握它们将使你的代码更加简洁、可读和易于维护。

希望本文对你学习 ES6 有所帮助！