ECMA Script6新特性(上)

ES6（ECMAScript 2015）引入了许多新特性，极大地提升了开发者的开发效率，使得代码的维护性和可读性也更高，提升了 JavaScript 的表达能力和开发效率，以下是一些主要的新特性：

1. 块级作用域

• let 和 const：
  • let 用于声明变量，与 var 不同，let 具有块级作用域，即变量只在声明它的代码块内有效。
  • const 用于声明常量，一旦声明必须赋值，且不能再重新赋值，同样具有块级作用域。

示例代码：

{
    let x = 10;
    const y = 20;
    console.log(x); // 输出 10
    console.log(y); // 输出 20
}
console.log(x); // 报错，x 未定义
console.log(y); // 报错，y 未定义

2. 箭头函数

• 箭头函数是一种简洁的函数定义方式，它没有自己的 this、arguments、super 或 new.target，其 this 值继承自外层函数。

示例代码：

// 普通函数
const add = function(a, b) {
    return a + b;
};

// 箭头函数
const addArrow = (a, b) => a + b;

console.log(add(1, 2)); // 输出 3
console.log(addArrow(1, 2)); // 输出 3

3. 模板字符串

• 模板字符串使用反引号（）来包裹字符串，可以包含占位符 ${}`，用于嵌入变量或表达式。

示例代码：

const name = 'John';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // 输出 "My name is John and I'm 30 years old."

4. 解构赋值

• 解构赋值允许从数组或对象中提取值，并赋值给变量。

示例代码：

// 数组解构赋值
const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2

// 对象解构赋值
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 输出 "John"
console.log(age); // 输出 30

5. 默认参数

• 函数参数可以设置默认值，当调用函数时没有传递该参数或传递的值为 undefined 时，将使用默认值。

示例代码：

const greet = (name = 'Guest') => {
    return `Hello, ${name}!`;
};

console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet('John')); // 输出 "Hello, John!"

6. 扩展运算符

• 扩展运算符（...）可以将数组或对象展开。

示例代码：

// 数组扩展
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 merged = { ...obj1, ...obj2 };
console.log(merged); // 输出 { a: 1, b: 2, c: 3, d: 4 }

7. 类和继承

• 类（class）：ES6 引入了类的概念，它是一种基于原型的继承的语法糖，使 JavaScript 具有更接近传统面向对象编程的语法。
• 继承（extends）：通过 extends 关键字，类可以继承另一个类的属性和方法。

示例代码：

// 定义一个类
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

// 定义一个子类，继承自 Animal 类
class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Buddy');
dog.speak(); // 输出 "Buddy barks."

8. Promise 对象

• Promise 是一种处理异步操作的对象，它可以避免回调地狱，使异步代码的编写和维护更加清晰和高效。

示例代码：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const randomNumber = Math.random();
        if (randomNumber > 0.5) {
            resolve(randomNumber);
        } else {
            reject(new Error('随机数小于等于 0.5'));
        }
    }, 1000);
});

promise.then(
    (result) => {
        console.log('成功:', result);
    },
    (error) => {
        console.log('失败:', error.message);
    }
);

9. for...of 循环

• for...of 循环用于遍历可迭代对象（如数组、字符串、Set、Map 等）。

示例代码：

const arr = [1, 2, 3];
for (const num of arr) {
    console.log(num);
}
// 输出 1
// 输出 2
// 输出 3

10. Map 和 Set 数据结构

• Map：是一种键值对的集合，键可以是任意类型。
• Set：是一种无序且唯一的数据集合。

示例代码：

// Map 示例
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // 输出 "value1"

// Set 示例
const set = new Set([1, 2, 3, 2, 1]);
console.log(set); // 输出 Set(3) { 1, 2, 3 }

这些只是 ES6 引入的部分常用的新特性，另外一篇见 ECMA Script6新特性(下), 这些新特性让 JavaScript 语言更加便捷和强大。