ES6（又称 ECMAScript 2015）是 JavaScript 的最新版本，引入了许多新特性，旨在提高开发效率和代码的可读性。以下是一些常见的 ES6 特性及其代码示例：
1. Let 和 Const
-
let关键字用于声明块级作用域的变量，防止变量重复声明和意外修改。 -
const关键字用于声明常量变量，其值不可更改。
// let 声明变量
let name = '张三';
console.log(name); // 输出：张三
// const 声明常量
const PI = 3.1415926;
console.log(PI); // 输出：3.1415926
// 无法重复声明 let 变量
let name = '李四'; // 报错：Identifier 'name' has already been declared
2. 箭头函数
箭头函数提供了一种更简洁的函数写法，省略了 function 关键字和部分冗余代码。
// 普通函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出：3
3. 模板字符串
模板字符串使用反引号 (```) 定义，可以方便地嵌入变量和表达式。
const name = '王五';
const age = 30;
// 普通字符串拼接
const message = '姓名：' + name + '，年龄：' + age;
console.log(message); // 输出：姓名：王五，年龄：30
// 模板字符串
const message = `姓名：${name}，年龄：${age}`;
console.log(message); // 输出：姓名：王五，年龄：30
4. 解构赋值
解构赋值可以方便地从对象和数组中提取多个值。
const person = {
name: '赵六',
age: 25,
hobby: '编程'
};
// 传统赋值
const name = person.name;
const age = person.age;
const hobby = person.hobby;
// 解构赋值
const { name, age, hobby } = person;
console.log(name, age, hobby); // 输出：赵六 25 编程
5. 类
ES6 引入了类语法，使 JavaScript 开发更加面向对象。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
}
const p1 = new Person('马七', 40);
console.log(p1.getName(), p1.getAge()); // 输出：马七 40
6. Promise
Promise 用于处理异步操作，使代码更加清晰易读。
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = {
name: '张三',
age: 30
};
resolve(data);
}, 1000);
});
};
fetchData().then(data => {
console.log(data.name, data.age); // 输出：张三 30
}).catch(error => {
console.error(error);
});
7. 生成器
生成器用于创建可迭代对象，可以按需生成一组数据。
function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
const numbers = generateNumbers(1, 10);
for (const number of numbers) {
console.log(number); // 输出：1 2 3 4 5 6 7 8 9 10
}
ES6 特性详解：隐式返回值、模板字符串、扩展运算符和默认参数
8. 隐式返回值
ES6 允许函数在没有 return 语句的情况下隐式返回表达式的值。这使得函数代码更加简洁明了，尤其是在一些简单的函数中。
示例:
function square(x) {
x * x; // 隐式返回 x * x 的值
}
const result = square(5);
console.log(result); // 输出：25
9. 模板字符串
模板字符串使用反引号 (}) 定义，可以方便地嵌入变量和表达式，使得字符串拼接更加简洁易读。
示例:
const name = '张三';
const age = 30;
// 传统字符串拼接
const message = '姓名：' + name + '，年龄：' + age;
console.log(message); // 输出：姓名：张三，年龄：30
// 模板字符串
const message = `姓名：${name}，年龄：${age}`;
console.log(message); // 输出：姓名：张三，年龄：30
10. 扩展运算符（...）
扩展运算符可以将数组或对象拆解为单个元素，用于函数参数传递、数组合并和对象扩展等场景。
示例:
函数参数传递:
function sum(a, b, ...rest) {
console.log(a, b, rest); // 输出：传入的参数
}
sum(1, 2, 3, 4, 5);
数组合并:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6]
对象扩展:
const obj1 = {
name: '张三',
age: 30
};
const obj2 = {
hobby: '编程'
};
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // 输出：{ name: '张三', age: 30, hobby: '编程' }
11. 默认参数
ES6 允许函数参数设置默认值，方便调用者省略部分参数。
示例:
function greet(name = '默认姓名') {
console.log(`欢迎你，${name}！`);
}
greet('张三'); // 输出：欢迎你，张三！
greet(); // 输出：欢迎你，默认姓名！
