ES6新特性

ES6新特性：

ES6（ECMAScript 2015）是JavaScript的一个重要更新版本，引入了许多新的语法和功能，使得编写JavaScript代码更加清晰、简洁和易读。在本文中，我将介绍一些ES6的主要新特性。

1. 块级作用域：ES6引入了let和const关键字，用于声明块级作用域的变量。相比于ES5中的var关键字，let和const更加灵活，可以在特定的作用域范围内声明并使用变量，避免了变量污染和命名冲突的问题。

2. 箭头函数：ES6中的箭头函数提供了更简洁的语法，可以更方便地定义函数。箭头函数没有自己的this值，而是继承自外部作用域。这样可以避免this指向的问题，使得代码更加易读和可维护。

3. 模板字符串：ES6引入了模板字符串，使得拼接字符串更加方便。使用反引号(`)可以定义多行字符串，而且可以在字符串中插入变量和表达式，提高了代码的可读性和维护性。

4. 解构赋值：ES6允许我们通过解构赋值的方式，将数组和对象中的值快速地赋给变量。这样可以减少代码的重复性，使得代码更加简洁和清晰。

5. 默认参数：ES6允许我们为函数的参数设置默认值。当调用函数时没有传递参数时，会使用默认值来代替。这样可以减少代码的复杂性和冗余性。

6. 模块化：ES6引入了import和export关键字，使得模块化编程更加简单。我们可以将代码分成多个模块，然后在需要的地方导入和使用。这样可以提高代码的可复用性和维护性。

7. Promise：ES6中引入了Promise对象，用于处理异步操作。我们可以通过Promise对象来处理多个异步操作的结果，使得代码更加清晰和可读。

8. 类和对象：ES6中引入了class关键字，使得面向对象编程更加简单。我们可以使用class来定义类和构造函数，并使用extends和super来实现继承。

9. 迭代器和生成器：ES6中引入了迭代器和生成器，用于处理集合和生成序列。迭代器提供了一种遍历集合的方式，而生成器可以简化异步编程，使得代码更加可读和可维护。

10. 数组和对象的新方法：ES6为数组和对象提供了许多新的方法，如Array.from()、Array.map()、Array.filter()等，使得对数组和对象的操作更加方便和高效。

1.块级作用域：let和const

在ES5中，使用var声明的变量会在函数或全局作用域内解析，这可能导致变量提升和意外的全局变量。而ES6的let和const关键字提供了块级作用域，避免了这些问题。

// ES5  
var x = 1;  
if (true) {  
    var x = 2; // 错误！因为var在函数或全局作用域内解析  
}  
console.log(x); // 输出2  
  
// ES6  
let x = 1;  
if (true) {  
    let x = 2; // 正确！let在块级作用域内解析  
}  
console.log(x); // 输出1

2.箭头函数

箭头函数提供了更简洁的语法，并且this的值继承自外部作用域。

// ES5  
function outer() {  
    this.name = "outer";  
    setTimeout(function() {  
        console.log(this.name); // 输出undefined，因为this不在外部作用域内解析  
    }, 1000);  
}  
outer.prototype.name = "prototype";  
new outer().name; // 输出"prototype"  
  
// ES6  
function outer() {  
    this.name = "outer";  
    setTimeout(() => {  
        console.log(this.name); // 输出"outer"，因为箭头函数中的this继承自外部作用域  
    }, 1000);  
}  
outer.prototype.name = "prototype";  
new outer().name; // 输出"outer"

3.模板字符串

模板字符串允许你在字符串中插入变量和表达式。

// ES5  
var name = "world";  
console.log("Hello " + name); // 输出"Hello world"  
  
// ES6  
let name = "world";  
console.log(`Hello ${name}`); // 输出"Hello world"

4.解构赋值

解构赋值允许我们从数组或对象中提取值并直接赋值给变量。

// ES5  
var arr = [1, 2, 3];  
var [a, b, c] = arr; // 错误！这不是有效的ES5语法  
var obj = {a: 1, b: 2};  
var {a, b} = obj; // 错误！同样不是有效的ES5语法  
  
// ES6  
let arr = [1, 2, 3];  
let [a, b, c] = arr; // 正确！a=1, b=2, c=3  
let obj = {a: 1, b: 2};  
let {a, b} = obj; // 正确！a=1, b=2

5.默认参数

ES6允许为函数的参数设置默认值。

// ES5  
function greet(name) {  
    name = name || "World"; // 如果name未提供，则默认为"World"  
    console.log("Hello " + name);  
}  
greet(); // 输出"Hello World"  
greet("John"); // 输出"Hello John"  
  
// ES6  
function greet(name = "World") {  
    console.log("Hello " + name);  
}  
greet(); // 输出"Hello World"  
greet("John"); // 输出"Hello John"

6.模块化

ES6引入了import和export关键字来实现模块化。

// ES6模块化示例  
// 文件：math.js  
export function add(a, b) {  
    return a + b;  
}  
export function subtract(a, b) {  
    return a - b;  
}  
  
// 文件：app.js  
import { add, subtract } from './math.js';  
console.log(add(1, 2)); // 输出3  
console.log(subtract(3, 1)); // 输出2

7.Promise

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

// ES6 Promise 示例  
let promise = new Promise((resolve, reject) => {  
    setTimeout(() => resolve("完成！"), 1000); // 1秒后resolve并返回字符串"完成！"  
});  
promise.then(value => console.log(value)); // 输出"完成！"

8.类和对象

ES6引入了class关键字来定义类。

// ES5的类定义方式（使用function）  
function Person(name) {  
    this.name = name;  
}  
Person.prototype.sayHello = function() {  
    console.log("Hello, my name is " + this.name);  
};  
var john = new Person("John");  
john.sayHello(); // 输出"Hello, my name is John"  
  
// ES6的类定义方式（使用class）  
class Person {  
    constructor(name) {  
        this.name = name;  
    }  
    sayHello() {  
        console.log("Hello, my name is " + this.name);  
    }  
}  
var john = new Person("John");  
john.sayHello(); // 输出"Hello, my name is John"

9.迭代器和生成器

ES6引入了迭代器和生成器，以处理集合和生成序列。

// 迭代器  
let numbers = new Set([1, 2, 3, 4, 5]);  
let iterator = numbers.values();  
console.log(iterator.next().value); // 输出1  
console.log(iterator.next().value); // 输出2  
  
// 生成器  
function* generateNumbers() {  
    let num = 1;  
    while (true) {  
        yield num++;  
    }  
}  
let numbersGenerator = generateNumbers();  
console.log(numbersGenerator.next().value); // 输出1  
console.log(numbersGenerator.next().value); // 输出2

10.数组和对象的新方法

ES6为数组和对象提供了许多新的方法，以简化操作。

// 数组方法：map(), filter(), reduce() 等  
let numbers = [1, 2, 3, 4, 5];  
let doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]  
let even = numbers.filter(num => num % 2 === 0); // [2, 4]  
let sum = numbers.reduce((acc, val) => acc + val, 0); // 15  
  
// 对象方法：Object.assign(), Object.values(), Object.entries() 等  
let obj1 = {a: 1, b: 2};  
let obj2 = {b: 3, c: 4};  
let merged = Object.assign({}, obj1, obj2); // {a: 1, b: 3, c: 4}  
let values = Object.values(obj1); // [1, 2]  
let entries = Object.entries(obj1); // [['a', 1], ['b', 2]]