深入理解ES6

目录

1. es6介绍

2. es6的变量和模块字符串

3. es6的解构表达式

4. es6的箭头函数

4.1 声明和特点 

4.2 实践和应用场景

4,3 rest和spread

5. es6的对象创建和拷贝

5.1 对象创建的语法糖（了解）

5.2 对象的深拷贝和浅拷贝

6. es6的模块化处理

6.1 模块化介绍

6.2 分别导出

6.3 统一导出

6.4 默认导出

---

1. es6介绍

ES6是ECMAScript标准的第六个版本，带来了许多新特性和语法改进，成为现代JavaScript开发的基础。它的发布标志着JavaScript语言迈向了更加成熟和强大的阶段。

1. 更加简洁：ES6引入了一些新的语法，如箭头函数、类和模板字符串等，使代码更加简洁易懂。

2. 更强大的功能：ES6引入了一些新的API、解构语法和迭代器等功能，从而使得JavaScript更加强大。

3. 更好的适用性：ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序。

总的来说，ES6在提高JavaScript的核心语言特性和功能方面取得了很大的进展。由于ES6已经成为了JavaScript的标准，它的大多数新特性都已被现在浏览器所支持，因此现在可以放心地使用ES6来开发前端应用程序。

2. es6的变量和模块字符串

变量声明

ES6 引入了两种新的变量声明方式：let 和 const 

• let: 用于声明块级作用域的变量。
• const: 用于声明常量，声明后不可变。

模板字符串

模板字符串（Template Literals）使用反引号（`）包裹，可以包含表达式和多行文本。

let name = 'John';
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

3. es6的解构表达式

解构赋值是一种便捷的语法，可以从数组或对象中提取值，并赋值给变量，极大地简化了代码。

数组解构赋值

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

对象解构赋值

let {name, age} = {name: 'John', age: 25};
console.log(name, age); // John, 25

函数参数解构赋值

• 解构赋值也可以用于函数参数。例如：

function add([x, y]) {
  return x + y;
}
add([1, 2]); // 3

• 该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和。

• ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，我们可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性。

4. es6的箭头函数

ES6 允许使用“箭头” 义函数。语法类似Java中的Lambda表达式

4.1 声明和特点 

箭头函数是一种新的函数表达式语法，使用 => 定义。

• 语法简洁: 省略了 function 关键字。
• 词法作用域: 箭头函数不会绑定自己的 this，而是捕获所在上下文的 this 值。

let add = (x, y) => x + y;
console.log(add(2, 3)); // 5

 

4.2 实践和应用场景

箭头函数常用于简化回调函数和数组操作方法的代码。

let numbers = [1, 2, 3];
let squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9]

4.3 rest和spread

rest参数：收集剩余参数为数组

function sum(...args) {
    return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

spread参数：展开数组或对象

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

5. es6的对象创建和拷贝

5.1 对象创建的语法糖（了解）

ES6中新增了对象创建的语法糖，使得对象的创建更简洁。

let a = 1;
let obj = {a};
console.log(obj); // {a: 1}

5.2 对象的深拷贝和浅拷贝

对象的拷贝,快速获得一个和已有对象相同的对象的方式

• 浅拷贝：只复制对象的引用

let obj1 = {a: 1};
let obj2 = {...obj1};
obj2.a = 2;
console.log(obj1.a); // 1

• 深拷贝：递归复制对象，避免共享引用

let obj1 = {a: 1, b: {c: 2}};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;
console.log(obj1.b.c); // 2

6. es6的模块化处理

6.1 模块化介绍

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下：

1. 提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。

2. 提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。

3. 提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。

目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准. `

• ES6模块化的几种暴露和导入方式

  1. 分别导出

  2. 统一导出

  3. 默认导出

6.2 分别导出

使用 export 关键字导出多个变量或函数。

// module.js
export const a = 1;
export function add(x, y) {
    return x + y;
}

// main.js
import {a, add} from './module.js';
console.log(a); // 1
console.log(add(2, 3)); // 5

6.3 统一导出

使用 export {} 语法统一导出多个实体。

// module.js
const a = 1;
function add(x, y) {
    return x + y;
}
export {a, add};

// main.js
import {a, add} from './module.js';
console.log(a); // 1
console.log(add(2, 3)); // 5

6.4 默认导出

使用 export default 关键字导出默认模块。

// module.js
export default function() {
    console.log('Default export');
}

// main.js
import myFunction from './module.js';
myFunction(); // Default export