js版本之ES6特性简述【类（class）、模块化(ES Module) 、j箭头函数、函数参数默认值、模板字符串、解构赋值、扩展运算符、对象属性简写、Promise】(三)

原创已于 2025-03-14 17:46:51 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript

于 2024-11-27 15:55:36 首次发布

web前端同时被 3 个专栏收录

60 篇文章

订阅专栏

JavaScript

35 篇文章

订阅专栏

js版本之ES系列简介

9 篇文章

订阅专栏

类（class）

模块化(ES Module)

export default 导出和对应的 import 导入

export 导出和对应的 import 导入

类（class）

类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类声明和类表达式。

类声明：定义一个类的一种方法。要声明一个类，你可以使用带有class关键字的类名（这里是“Rectangle”）。

注：类声明需要声明你的类，然后访问它，否则代码会抛出一个ReferenceError

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

以下是注意事项错误代码
var p = new Rectangle(); // ReferenceError
class Rectangle {}

类表达式：是定义一个类的另一种方式。类表达式可以是被命名的或匿名的。赋予一个命名类表达式的名称是类的主体的本地名称。

注: 类表达式也同样受到类声明中提到的提升问题的困扰。

// 匿名的
var Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// 被命名的
var Rectangle = class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

模块化(ES Module)

ES6 引入了模块化的概念，允许开发者将代码分割成独立、封装的模块，并通过 import 语句来导入其他模块中的功能，通过 export 语句来暴露模块中的功能。

一个 JS 文件就是一个模块
用 import 关键字导入模块
用 export 关键字导出模块需要暴露的部分
在使用 script 标签加载的时候，需要加上 type=“module”，否则就以普通 JS 文件的形式引入了，就不是模块了

注：对于导入和导出有两种方法：

export default 导出，import 导入
export 导出，import 导入

export default 导出和对应的 import 导入

一个模块中只能有一个 export default

【module.js】

// 模块中的变量都是局部的
const age = 18;
const sex = "male";

export default age;			// 通过 export default 导出（暴露）一个值
// export default sex;		// 报错！因为 export default 只能在一个文件中导出一次！！！

/*
export default 24;				// 可以导出值
export default {};				// 可以导出对象
export default function(){};	 // 可以导出函数
export default class{};			 // 可以导出class
*/

【index.html】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
    // import 之后跟一个模块的别名，推荐别名与导出时的名字相同，比如这里就用 age
    import age from "./module.js";
    console.log(age);	// 18
</script>
</body>
</html>

export 导出和对应的 import 导入

注：在用 export 导出时，也可以用对象简写形式形式！

【const age = 18; export {age};】

【module.js】

/*
const age = 18;
export age;		// 报错
*/

// export 后面只能跟声明或语句！
export const age = 18;

【index.html】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
    // import aaa from "./module.js";	// 报错！ 
    // export 导出的模块，在导入时不能随意取别名，名称必须与模块导出时相同！并且要使用类似于解构赋值的{}形式！
    
    import {age} from "./module.js";	// 注意：名称不能随意取，一定要与模块相同
    console.log(age);	// 18;
</script>
</body>
</html>

箭头（Arrow）函数

ES6引入了箭头函数（Arrow Functions）作为一种新的函数定义方式，它提供了一种更简洁、更灵活的语法，并改变了 this 的绑定机制。

简化规则：

省略 function 关键字: 箭头函数不需要 function 关键字。
单参数省略括号: 如果只有一个参数，可以省略参数列表的花括号。
单行函数体省略花括号和 return: 如果函数体只有一行代码，可以省略花括号和 return 关键字，表达式结果将自动返回。

// 单参数省略括号
const square = x => x * x;
 
// 单行函数体省略花括号和 `return`
const greet = name => `Hello, ${name}!`; 
 
// 多参数
const sum = (x, y) => x + y;
 
// 无参数
const logTime = () => console.log(new Date());

函数参数默认值

在ES6中，函数参数可以有默认值，这样在调用函数时如果没有传递参数，就会使用默认值。

// ES6中定义函数参数默认值
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
 
// 使用默认值
console.log(greet()); // 输出: Hello, Guest!
 
// 传递参数覆盖默认值
console.log(greet('World')); // 输出: Hello, World!

ES6 模板字符串

ES6 模板字符串（template string）是另一种字符串。它可以包含变量，并且用反引号 ` 来代替以往的单引号(')或双引号(")。

let name = 'John';
let age = 25;
let string = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(string); // Hello, my name is John and I am 25 years old.

解构赋值

解构赋值是一种JavaScript表达式，它允许我们将数组或对象的值解压到不同的变量中。这种语法糖让代码更加简洁易读。

let [a, b, c] = [1, 2, 3];
console.log(a); // 输出1
console.log(b); // 输出2
console.log(c); // 输出3

let {name: n, age: a} = {name: 'John', age: 23};
console.log(n); // 输出'John'
console.log(a); // 输出23

ES6扩展运算符

应用场景：数组复制、数组合并、函数调用时传递一个数组作为一组参数、构造字面量对象

// 复制数组
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

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

// 函数调用时传递一个数组作为一组参数
function myFunction(x, y, z) {
  console.log(x, y, z);
}
let arr = [1, 2, 3];
myFunction(...arr); // 1 2 3

// 构造字面量对象
let obj1 = {name: 'John', age: 30};
let obj2 = {...obj1, city: 'New York'};
console.log(obj2); // {name: 'John', age: 30, city: 'New York'}

对象属性简写

ES6 允许在对象中使用属性简写，即如果属性名与变量名相同时，可以不写成员的名字。

const key = 'value';
const obj = { key };
 
console.log(obj.key); // 输出: 'value'

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

详解请参考另一篇文章：对Promise的理解

上一章：js版本之ES5特性简述【String、Function、JSON、其他】(二)

下一章：js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)