javascript的ES6是什么，它带来了哪些新特性？

ES6是ECMAScript 2015的简称，是javascript语言标准的第六次重大修订版本，于2015年正式发布。这次更新为javascript增加了大量新语法和特性，解决了之前版本中很多长期存在的痛点，让代码的编写更加规范、简洁，也提升了代码的可读性和可维护性，如今已经成为前端开发中最常使用的javascript版本标准。

ES6的核心新特性

1. 变量声明方式升级

ES6新增了let和const两种变量声明方式，替代了之前只有var的单一模式，解决了var存在变量提升、作用域模糊的问题。

let声明的变量具有块级作用域，只在当前代码块内有效，且不存在变量提升：

// var的变量提升问题
console.log(a); // 输出undefined
var a = 10;

// let的块级作用域特性
if (true) {
  let b = 20;
  console.log(b); // 输出20
}
console.log(b); // 报错，b未定义

const用于声明常量，一旦声明赋值后不能再修改，同样具有块级作用域：

const PI = 3.1415926;
PI = 3; // 报错，常量不能重新赋值

// const声明对象时可以修改对象属性
const user = { name: '张三' };
user.name = '李四'; // 合法，修改对象属性不会报错
user = {}; // 报错，不能重新赋值整个对象

2. 箭头函数

箭头函数是ES6中对函数定义的简化写法，语法更简洁，同时解决了普通函数中this指向混乱的问题，箭头函数内部的this继承自外层作用域，不会动态改变。

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

// 箭头函数写法
const add = (a, b) => {
  return a + b;
};

// 函数体只有一行返回时可以省略大括号和return
const add = (a, b) => a + b;

// this指向示例
const obj = {
  name: '测试对象',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name); // 输出空，this指向window
    }, 1000);
  },
  sayHiArrow: function() {
    setTimeout(() => {
      console.log(this.name); // 输出测试对象，this继承自sayHiArrow的作用域
    }, 1000);
  }
};

3. 模板字符串

ES6引入的模板字符串使用反引号包裹，支持在字符串中直接换行，还可以通过${}语法嵌入变量和表达式，不需要再用字符串拼接的方式处理。

const name = '小明';
const age = 18;

// 之前的字符串拼接
const info1 = '我叫' + name + '，今年' + age + '岁';

// 模板字符串写法
const info2 = `我叫${name}，今年${age}岁`;

// 支持嵌入表达式
const sum = 10 + 20;
const result = `10加20的结果是${sum}`;
console.log(result); // 输出10加20的结果是30

// 支持直接换行
const html = `
  <div class="box">
    <p>这是一段多行文本</p>
  </div>
`;

4. 解构赋值

解构赋值允许按照一定模式从数组或对象中提取值，赋值给对应的变量，让赋值操作更加简洁。

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

// 对象解构
const user = { name: '小红', age: 20 };
const { name, age } = user;
console.log(name, age); // 输出小红 20

// 解构时重命名
const { name: userName } = user;
console.log(userName); // 输出小红

// 函数参数解构
function printUser({ name, age }) {
  console.log(`姓名：${name}，年龄：${age}`);
}
printUser(user); // 输出姓名：小红，年龄：20

5. Promise异步处理

ES6新增了Promise对象，用于更优雅地处理异步操作，解决了之前回调地狱的问题，让异步代码的书写更接近同步逻辑。

// 创建一个Promise实例
const requestData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { code: 200, msg: '请求成功' };
      if (data.code === 200) {
        resolve(data); // 异步操作成功时调用
      } else {
        reject('请求失败'); // 异步操作失败时调用
      }
    }, 1000);
  });
};

// 使用Promise
requestData()
  .then(res => {
    console.log(res); // 输出{ code: 200, msg: '请求成功' }
  })
  .catch(err => {
    console.log(err);
  });

6. 模块化语法

ES6引入了原生的模块化支持，通过export导出模块内容，通过import导入其他模块的内容，让javascript的模块化开发更加规范。

// module.js 导出模块
export const name = '模块名称';
export function sayHello() {
  console.log('hello');
}
// 默认导出
export default {
  version: '1.0.0'
};

// main.js 导入模块
import defaultObj, { name, sayHello } from './module.js';
console.log(name); // 输出模块名称
sayHello(); // 输出hello
console.log(defaultObj.version); // 输出1.0.0

7. 其他常用特性

除了上述核心特性外，ES6还带来了很多实用的小特性：

• 默认参数：函数参数可以设置默认值，调用时未传参则使用默认值
• 展开运算符：使用...可以展开数组或对象，方便合并数据
• Map和Set数据结构：提供了新的数据存储结构，解决Object键只能是字符串、数组去重麻烦的问题
• class类语法：提供了更接近传统面向对象语言的类写法，让构造函数和继承的书写更清晰

// 默认参数示例
function multiply(a, b = 10) {
  return a * b;
}
console.log(multiply(5)); // 输出50，b使用默认值10

// 展开运算符示例
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // 输出[1,2,3,4]

// class类示例
class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
const person = new Person('小王');
person.sayName(); // 输出小王

ES6的兼容性说明

目前主流的现代浏览器都已经原生支持ES6的大部分特性，如果是需要兼容旧版本浏览器（如IE），可以通过Babel等工具将ES6代码转译为ES5代码，保证代码的正常运行。现在的前端工程化项目中，ES6已经是默认的编写标准，掌握ES6的新特性是前端开发者的必备技能。

ES6javascriptlet箭头函数Promise修改时间：2026-06-14 15:24:27