全面解析 ES6 新增特性及详细介绍

于 2025-05-27 08:11:14 发布
阅读量781 收藏 17
点赞数 18
CC 4.0 BY-SA版权
分类专栏： 前端开发 文章标签： es6 前端 ecmascript ES6 ES6 新特性 ES6 新增特性 ES6 详细介绍
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_37775891/article/details/148201554

代码教程

最全的ES6新特性详解与应用实例

一、块级作用域变量（let和const）

（一）特性解析

  1. let关键字

    • 块级作用域
    • 不存在变量提升
    • 暂时性死区
    • 不允许重复声明

  2. const关键字

    • 声明常量，一旦声明必须赋值
    • 常量值不能通过重新赋值来改变
    • 块级作用域
    • 对于引用类型，可以修改其内部属性

（二）应用实例

// let示例
function letExample() {
  if (true) {
    let x = 10;
  }
  console.log(x); // 报错：x is not defined
  
  for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 输出0, 1, 2
  }
}

// const示例
const PI = 3.14;
// PI = 3.1415; // 报错：Assignment to constant variable

const person = { name: 'John' };
person.name = 'Mike'; // 合法：修改对象属性
// person = {}; // 报错：Assignment to constant variable

二、箭头函数（Arrow Functions）

（一）特性解析

  1. 简洁语法
   // 传统函数
   function add(a, b) { return a + b; }
   
   // 箭头函数
   const add = (a, b) => a + b;
  1. 不绑定this
    • 箭头函数不绑定自己的this，它继承自外层函数
    • 不能使用arguments对象
    • 不能使用yield关键字

（二）应用实例

// 传统函数的this问题
function Person() {
  this.age = 0;
  
  setInterval(function growUp() {
    this.age++; // 这里的this指向全局对象或undefined（严格模式）
  }, 1000);
}

// 使用箭头函数解决this问题
function Person() {
  this.age = 0;
  
  setInterval(() => {
    this.age++; // 这里的this指向Person实例
  }, 1000);
}

// 数组方法中的箭头函数
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

三、模板字符串（Template Literals）

（一）特性解析

  1. 多行字符串
   const message = `这是一个
   多行
   字符串`;
  1. 插值表达式
   const name = 'John';
   const greeting = `Hello, ${name}!`;
  1. 标签模板
   function highlight(strings, ...values) {
     let result = '';
     strings.forEach((string, i) => {
       result += string;
       if (i < values.length) {
         result += `<strong>${values[i]}</strong>`;
       }
     });
     return result;
   }
   
   const name = 'John';
   const age = 30;
   const output = highlight`${name} is ${age} years old.`;
   // 输出: John is <strong>30</strong> years old.

四、解构赋值（Destructuring Assignment）

（一）数组解构

// 基本用法
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 剩余元素
const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]

// 默认值
const [x = 10, y = 20] = [5];
console.log(x); // 5
console.log(y); // 20

（二）对象解构

// 基本用法
const { name, age } = { name: 'John', age: 30 };
console.log(name); // John
console.log(age); // 30

// 重命名
const { name: userName, age: userAge } = { name: 'John', age: 30 };
console.log(userName); // John

// 嵌套对象
const person = {
  name: 'John',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const { address: { city } } = person;
console.log(city); // New York

五、默认参数（Default Parameters）

（一）特性解析

// 基本用法
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

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

// 表达式作为默认值
function calculateTotal(price, tax = price * 0.1) {
  return price + tax;
}

console.log(calculateTotal(100)); // 110

六、扩展运算符（Spread Operator）

（一）数组扩展

// 数组拷贝
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

// 数组合并
const arr3 = [4, 5];
const merged = [...arr1, ...arr3];
console.log(merged); // [1, 2, 3, 4, 5]

// 函数参数展开
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

（二）对象扩展

// 对象拷贝
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }

// 对象合并
const obj3 = { c: 3 };
const mergedObj = { ...obj1, ...obj3 };
console.log(mergedObj); // { a: 1, b: 2, c: 3 }

// 覆盖属性
const obj4 = { a: 10, d: 4 };
const mergedWithOverride = { ...obj1, ...obj4 };
console.log(mergedWithOverride); // { a: 10, b: 2, d: 4 }

七、类（Class）与继承

（一）类的定义

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
  }
  
  static info() {
    return 'This is a Person class.';
  }
}

const person = new Person('John', 30);
console.log(person.greet()); // Hello, my name is John and I'm 30 years old.
console.log(Person.info()); // This is a Person class.

（二）继承

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age);
    this.position = position;
  }
  
  introduce() {
    return `${super.greet()} I'm a ${this.position}.`;
  }
}

const employee = new Employee('Mike', 25, 'Developer');
console.log(employee.introduce()); // Hello, my name is Mike and I'm 25 years old. I'm a Developer.

八、Promise对象

（一）特性解析

  1. 三种状态

    • pending：初始状态
    • fulfilled：操作成功完成
    • rejected：操作失败

  2. 链式调用

    • then()方法返回一个新的Promise
    • catch()方法处理错误
    • finally()方法无论结果如何都会执行

（二）应用实例

// Promise基本用法
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      // resolve(data); // 成功情况
      reject(new Error('Failed to fetch data')); // 失败情况
    }, 1000);
  });
}

// 使用Promise
fetchData()
  .then(data => {
    console.log('Data:', data);
    return data.age;
  })
  .then(age => {
    console.log('Age:', age);
  })
  .catch(error => {
    console.error('Error:', error.message);
  })
  .finally(() => {
    console.log('Finally');
  });

// 并行执行多个Promise
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log('All results:', values); // [1, 2, 3]
  });

九、模块化（Module）

（一）导出（Export）

// utils.js
export const PI = 3.14;

export function calculateCircleArea(radius) {
  return PI * radius * radius;
}

export class Calculator {
  add(a, b) {
    return a + b;
  }
}

// 或统一导出
const name = 'Utils';
const version = '1.0.0';

export { name, version };

（二）导入（Import）

// main.js
import { PI, calculateCircleArea, Calculator } from './utils.js';

console.log(PI); // 3.14
console.log(calculateCircleArea(5)); // 78.5

const calculator = new Calculator();
console.log(calculator.add(2, 3)); // 5

// 导入全部
import * as utils from './utils.js';
console.log(utils.PI); // 3.14

// 默认导出
// math.js
export default function add(a, b) {
  return a + b;
}

// 使用默认导出
import add from './math.js';
console.log(add(1, 2)); // 3

十、其他重要特性

（一）Promise.allSettled()

const promises = [
  Promise.resolve(1),
  Promise.reject(new Error('Error')),
  Promise.resolve(3)
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Fulfilled:', result.value);
      } else {
        console.log('Rejected:', result.reason);
      }
    });
  });

（二）String.prototype.matchAll()

const regex = /\b(apple|banana|cherry)\b/g;
const text = 'I like apples and bananas.';

const matches = text.matchAll(regex);

for (const match of matches) {
  console.log(match[0]); // 输出 "apple" 和 "banana"
}

（三）可选链操作符（?.）

const person = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

// 传统写法
const zipCode = person.address && person.address.zipCode;

// 可选链写法
const zipCode = person.address?.zipCode;

（四）空值合并操作符（??）

const value = null;
const defaultValue = 'Default';

// 使用空值合并操作符
const result = value ?? defaultValue; // 'Default'

// 与逻辑或操作符对比
const resultOr = value || defaultValue; // 'Default'

const value2 = 0;
const result2 = value2 ?? 'Default'; // 0
const result2Or = value2 || 'Default'; // 'Default'

十一、总结

ES6引入了众多重要特性，显著提升了JavaScript的语言表达能力和开发效率。主要包括：

  1. 变量声明：let和const提供块级作用域
  2. 函数特性：箭头函数简化语法并解决this指向问题
  3. 数据结构：解构赋值和扩展运算符增强数据处理能力
  4. 面向对象：类和继承提供更清晰的对象模型
  5. 异步编程：Promise为异步操作提供标准化解决方案
  6. 模块化：ES6模块系统提供官方的模块解决方案
  7. 其他特性：模板字符串、默认参数、可选链等实用功能

这些特性已成为现代JavaScript开发的基础，广泛应用于各类项目中。掌握ES6特性是成为一名优秀前端开发者的必备技能。

代码获取方式

【夸克网盘】点击查看

关注我获取更多内容

JavaScript ES6 新特性全览：变量声明、函数语法、数据结构等多方面解析
weimengen的博客
10-17 1350
本文详细介绍 JavaScript ES6 新特性，涵盖 let 与 const 的区别、箭头函数语法及 this 指向、模板字符串、解构赋值、默认参数、展开运算符、Promise、class 类、模块化、Set 与 Map、Symbol、Proxy 与 Reflect、生成器函数与迭代器、剩余参数和扩展运算符等内容，通过代码示例帮助读者掌握 ES6 新特性，提升开发效率和代码质量。
ES6的Promise详解
程序员柒的博客
11-08 5891
本篇文章主要介绍了ES6语法中的Promise对象的使用详解,promise对象是JS进阶学习中的重要知识点，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容。
ES6新特性
seven_sevens的博客
07-16 1035
通常情况下，当我们需要访问嵌套对象或数组的属性或方法时，需要对每个层级进行空值检查，以避免出现空指针错误,放置在对象的属性或数组的索引之前，对于存在的属性或索引进行访问，如果该属性或索引不存在，则表达式直接返回。.Promise的扩展方法：ES6对Promise对象进行了扩展，添加了许多实用的方法，如Promise.all()、Promise.race()等。.Rest参数是ES6引入的一项特性，它允许在函数定义时接收任意数量的参数，并将它们收集到一个数组中。，返回一个新的Promise。
ES6：Promise详解
DZQ1223的博客
06-27 5753
async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。2）Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆。回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件。2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部。创造promise实例后，它会立即执行。
最详细的—— ES6有哪些新特性？
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-12 1821
ES6中新增的用于声明变量的关键字。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
ES6------promise详解
weixin_40381947的博客
04-06 1099
1.promise其实就是一个对象或者说是构造函数2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）3.在前端中，ajax和axios都会用到异步编程，axios更是基于promise的，所以一定要掌握promise以及用async和await搭配promise的使用。
JavaScript（ES6新增、W3C、MDN）最新参考手册.zip
01-10
3. **JavaScript语言中文参考手册.chm** - 这可能是一份全面的JavaScript语言参考，包含从基础到高级的各个层面，包括变量、数据类型、控制流、函数、对象、闭包，以及ES6的新增特性，如let和const变量声明、解构...
ES6 全部特性详解
最新发布
一点一木
11-03 847
ES6 是 JavaScript 语言的一个重要升级，它引入了大量新的功能，极大地增强了 JavaScript 的表达力和可读性。通过了解和掌握这些特性，开发者可以编写出更加简洁、高效、优雅的代码，并轻松应对大型项目的复杂性。
全面解析ES6箭头函数：语法、特性与实例应用
资源摘要信息: "本文档详细介绍了ES6（ECMAScript 2015）中引入的一种新的函数表达式——箭头函数（Arrow Function）。箭头函数提供了一种更加简洁的函数书写方式，其基本语法规则和特性对于理解并正确使用ES6中新增...
深入理解ECMAScript 6：全面剖析ES6新特性
这本书——《ECMAScript 6入门》（第二版），详细介绍了ES6的新特性，旨在帮助已掌握ES5的开发者快速适应并利用这些新功能。 书中涵盖了多个关键知识点： 1. **let和const命令**：这两个新的变量声明关键字提供了...
ES6新特性：const关键字详解
孙悟空
10-26 3111
对ES6新增的const关键字进行了详细讲解。
前端开发的ES6新特性（学生党必看）
qq_51269815的博客
04-15 4147
一：ES6新特性-let&const 1.常量const const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错） 2.let变量 let声明的变量有严格的作用域 var声明的变量往往会越域 var可以声明多次,let只可以声明一次 { var a =1; let b =2; } console.log(a); console.log(b); t
详解ES6中 let、const
mr-ruan的博客
05-15 210
ES6中let、const 先看个var的常见变量提升的面试题目： var a = 99; // 全局变量a f(); // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 console.log(a); // a=>99, 此时是全局变量的a function f() { console.log(a); // 当前的a变量是下面变量a声明提升后，默认值undefined var.
ES6中关于Promise的所有知识点！！！快看快看
2301_76766756的博客
08-18 297
---异步(Asynchronous, async)和同步(Synchronous, sync)；----异步按照代码的顺序执行，异步不按照代码的顺序执行，异步的执行效果更佳；
var与let声明变量的区别、const声明常量
m0_68428066的博客
03-13 528
注意：上面第三张图中的V1用var重新声明变量是重新为变量分配所占区域，而不是覆盖，这也使得用var声明变量容易使变量被污染。 使用var声明变量只支持全局作用域和局部作用域，而放在函数中的变量就是局部变量（局部作用域或函数作用域），此外就是全局变量（全局作用域）。上述的if判断语句中的v1、v2不是在函数中声明的，不满足局部作用域的条件，所以v2、v3都是全局变量，故可以直接输出相应的值。 上述代码在for循环的条件下不能解决fs[x]=x的问题，原因在于var声明的变量只会在
梳理ES6中增加的新特性（一）
qq_41971356的博客
07-01 371
ECMAScript通常被认为是JavaScript的标准化规范，实际JavaScript是ECMScript的扩展语言，ECMAScript只定义提供最基本的语法。 我们通常所说的ES6指的是ES2015、ES2016、ES2017……等，所以ES6泛指所有的新版本。 ES6是在ES5.1的基础上进行的升级： ① 解决了原有语法的上的一些问题或不足 ②对原有语法进行了增强 ③全新的对象，全新的语法，全新的功能 ④全新的数据类型和数据结构 1.作用域——某个成员（变量）能起作用...
浅析JS中的var,let及const的区别
01-08 541
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 var a = []; for (var i = 0; i < 10; i++) { a[...
ES6 ES6详细介绍，const和相关解析赋值，模板字符串
2201_75604580的博客
04-01 942
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-8H5m19kx-1711903436441)]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值