目录
1. es6介绍
ES6是ECMAScript标准的第六个版本,带来了许多新特性和语法改进,成为现代JavaScript开发的基础。它的发布标志着JavaScript语言迈向了更加成熟和强大的阶段。
-
更加简洁:ES6引入了一些新的语法,如箭头函数、类和模板字符串等,使代码更加简洁易懂。
-
更强大的功能:ES6引入了一些新的API、解构语法和迭代器等功能,从而使得JavaScript更加强大。
-
更好的适用性: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 模块化介绍
模块化是一种组织和管理前端代码的方式,将代码拆分成小的模块单元,使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下:
-
提高代码可维护性:通过将代码拆分为小的模块单元,使得代码结构更为清晰,可读性更高,便于开发者阅读和维护。
-
提高代码可复用性:通过将重复使用的代码变成可复用的模块,减少代码重复率,降低开发成本。
-
提高代码可扩展性:通过模块化来实现代码的松耦合,便于更改和替换模块,从而方便地扩展功能。
目前,前端模块化有多种规范和实现,包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准,使用 import 和 export 关键字来实现模块的导入和导出。现在,大部分浏览器都已经原生支持 ES6 模块化,因此它成为了最为广泛使用的前端模块化标准. `
-
ES6模块化的几种暴露和导入方式
-
分别导出
-
统一导出
-
默认导出
-
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