当前位置：首页 > news >正文

谷粒商城实战笔记-29~34-前端基础 - ES6

news 2025/7/15 4:57:14

文章目录

零，安装Live Server插件
一，创建前端工程
- 1，创建工程
- 2，在工程ES6中创建一个html文件
二，ES6 简介
- 1，ES6 的历史
三，前端基础ES6
- 1，let 和 const
- 1.1，let
- - 1.1.1 严格的作用域限制
  - 1.1.2 同名变量的重复声明
  - 1.1.3，作用域提升
- 1.2，const
- 2，解构
- - 2.1 数组解构
  - 2.2 对象解构
- 3，字符串
- - 3.1 插值字符串
  - 3.2 Unicode 支持增强
  - 3.3 遍历器接口（Iterator Protocol）
  - 3.4 新的字符串方法
  - 3.5 `normalize()` 方法
  - 3.6 多行字符串
  - - 3.6.1 创建多行字符串
    - 3.6.2 保留或移除空白
- 4，函数新特性
- - 4.1 参数默认值
  - 4.2 不定参数
  - 4.3 箭头函数
  - - 4.3.1 声明箭头函数
    - 4.3.2 箭头函数结合解构表达式
- 5，数组的Map和Reduce方法
- - 5.1 map() 方法
  - 5.2 reduce() 方法
  - - 语法:
    - 示例:
- 6，Promise
- - 6.1 场景说明
  - 6.2 回调地狱-传统实现
  - 6.3 使用Promise重构
  - - 6.3.1 Promise 语法
  - 6.3.2 用Promise实现上述需求

这一节学习创建前端工程、ES6语法，主要是let和const的使用。

零，安装Live Server插件

为了方便测试，请先给VSCode安装Live Server插件。

在这里插入图片描述

有了这个插件后，在VSCode的编辑界面，右键选择Open With Live Server可以快速部署前端服务，自动打开浏览器访问当前html文件。

在这里插入图片描述

一，创建前端工程

1，创建工程

我们创建一个新的前端工程，用于前端知识的学习。

打开VSCode，选择File->Open Folder。

在这里插入图片描述

在打开的窗口中创建并选择文件夹ES6。

在这里插入图片描述

2，在工程ES6中创建一个html文件

选择File->New File。
在这里插入图片描述
创建一个名为let.html的文件。

使用快捷键Shift+!，快速生成html的模板代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

二，ES6 简介

ECMAScript 6，通常被称为ES6，是JavaScript的一种规范，于2015年发布，因此有时也被称为ES2015。它是JavaScript语言的一次重大升级，引入了一系列新特性和语法糖，旨在提高语言的性能、可读性和功能丰富度。ES6 的目标之一是让JavaScript更接近其他成熟的编程语言，同时也保持其原有的灵活性和动态性。

1，ES6 的历史

JavaScript 作为一种脚本语言，最初由网景公司（Netscape）的布兰登·艾奇（Brendan Eich）在1995年用10天时间创造出来，旨在为网页添加动态效果。随着时间的推移，JavaScript 不断发展，逐渐成为一种全栈开发语言，不仅限于浏览器端，还被广泛应用于服务器端（如Node.js）、移动应用开发（如React Native）等场景。

三，前端基础ES6

1，let 和 const

在ES6之前，JavaScript中唯一的变量声明关键字是var。

然而，var存在一些问题，比如变量提升（hoisting）和作用域链的问题，这可能导致意料之外的行为。

为了解决这些问题，ES6引入了let和const关键字，提供了块级作用域和更安全的变量声明方式。

1.1，let

1.1.1 严格的作用域限制

let声明的变量，只能在其所在的作用域内使用，不能在作用域外使用。关于作用域，可以理解为一对大括号内。

代码示例：

 {var a = 1// 作用域限制，只能在大括号内使用，否则会报错let b = 2;}console.log("a="+a)console.log("b="+b) // Uncaught ReferenceError: b is not defined

在这里插入图片描述

1.1.2 同名变量的重复声明

let声明的变量，同名变量只能被声明一次，var可以多次声明同一个变量。

 {var a = 1;var a = 'xxx';let b = 2;let b = 3;}

let对变量b的重复声明，编译不通过。
在这里插入图片描述

1.1.3，作用域提升

let声明的变量，必须先声明后使用。var声明的变量，可以先试用，后声明。也就是说var声明的变量会在编译时提升到代码的最前面。


{console.log("a="+a)console.log("b="+b) // let.html:14 Uncaught ReferenceError: Cannot access 'b' before initializationvar a = 1;var a = 'xxx';let b = 2;
}

在这里插入图片描述

1.2，const

const关键字用于声明常量，即一旦赋值就不能再改变的变量。这有助于防止意外的修改，从而减少bug。

代码示例：

const PI = 3.14159;
// PI = 3; // 这行代码会抛出错误，因为不能给const声明的变量重新赋值console.log(PI); // 输出：3.14159

值得注意的是，虽然const变量本身不可重新赋值，但如果是引用类型（如对象或数组），则其内部的属性或元素是可以修改的。

代码示例：

const person = { name: "Alice" };
person.name = "Bob"; // 修改对象内的属性是允许的
console.log(person.name); // 输出："Bob"

通过使用let和const，可以写出更清晰、更安全的代码，这在构建复杂的前端应用时尤其重。

2，解构

解构赋值是一种新的赋值语法，它允许你按照预先确定的模式，从数组、对象中抽取值，然后对变量进行赋值。

2.1 数组解构

下面代码中，定义了一个数组，要从数组中取出元素，可以采用如下方式。

{let arr = [1,2,3];let a = arr[0];let b = arr[1];let c = arr[2];console.log('a='+a);console.log('b='+c);console.log('c='+c);}

上面的代码有很多冗余，ES6提供了一种新的语法，更简洁易用。

{let arr = [1,2,3];let [a,b,c] = arr;console.log('a='+a);console.log('b='+c);console.log('c='+c);}

相当于让变量a/b/c自动匹配数组的前三个元素。

2.2 对象解构

我们定义一个对象。

let person = {"name": "George","age": 21,"language":['js','java']
}

可以采用如下方式获取对象属性值。

let name = person.name;
let age = person.age;
let language = person.language;

ES6的解构语法允许如下方式获取对象属性。

let [name,age,language] = person;

3，字符串

ES6（ECMAScript 6 或 ES2015）为字符串处理带来了一些重要的改进。

3.1 插值字符串

插值字符串允许你在字符串中嵌入表达式，使用反引号 `` 包围字符串，并且可以用 ${expression} 的形式插入任何 JavaScript 表达式的值。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

在插值字符串中，可以有表达式，也可以有函数调用。

let name = "Alice";
let age = 10;
let greeting = `Hello, ${name}, i am ${age + 6} years old, i am ${work()}!`;
console.log(greeting); // 输出: Hello, Alice!function work() {console.log('programing...')
}

3.2 Unicode 支持增强

ES6 改进了对 Unicode 字符的支持，特别是对于那些超过基本多文种平面（BMP）的字符，也就是那些码点超过 U+FFFF 的字符。例如，你可以使用 \u{hhhh} 的形式来表示任何 Unicode 码点。

示例：

let emoji = '\u{1F600}';
console.log(emoji); // 输出: 😄

3.3 遍历器接口（Iterator Protocol）

ES6 引入了 for...of 循环，可以直接遍历字符串中的每个字符，这在处理长字符串或需要逐字符操作时非常方便。

示例：

for (let char of "hello") {console.log(char);
}
// 输出:
// h
// e
// l
// l
// o

3.4 新的字符串方法

ES6 引入了几种新的字符串方法，使得字符串的检查和操作更加直观：

includes()：检查字符串是否包含另一个字符串。
startsWith()：检查字符串是否以指定的子串开始。
endsWith()：检查字符串是否以指定的子串结束。

示例：

let str = "Hello World!";
console.log(str.includes("World")); // 输出: true
console.log(str.startsWith("Hello")); // 输出: true
console.log(str.endsWith("!")); // 输出: true

3.5 `normalize()` 方法

此方法可以将字符串转换为标准的 Unicode 形式，这在处理包含重音符号和其他特殊字符的文本时特别有用。

示例：

let str = "café";
let normalizedStr = str.normalize("NFD");
console.log(normalizedStr); // 输出: c a ̧ f é

3.6 多行字符串

在ES6（ECMAScript 2015）中，多行字符串的创建变得更加简单和直观。在ES5及之前的版本中，如果你想创建一个多行字符串，你需要使用反斜杠\作为续行符，或者使用加号+将多行字符串拼接在一起。这种方法不仅繁琐，而且可能会导致代码的可读性降低。

ES6引入了模板字符串（Template Literals），这是一种使用反引号`包围字符串的新方法。模板字符串不仅支持行内表达式的嵌入，还天然支持多行字符串的创建，无需额外的转义字符或拼接操作。

3.6.1 创建多行字符串

使用模板字符串创建多行字符串非常简单，你只需在反引号之间输入你的文本即可，包括换行符。这样，你的字符串将保留所有的换行和空白。

示例代码：

let multilineString = `
这是第一行文本。
这是第二行文本，
它包含了几个单词。
`;console.log(multilineString);

当你运行上述代码时，控制台输出将会显示一个带有正确换行的多行字符串。

3.6.2 保留或移除空白

默认情况下，模板字符串会保留字符串中的所有空白和换行符。但是，如果你希望移除字符串开始和结尾的空白以及每行前面的空白，你可以使用标签模板函数。ES6引入了一个内置的标签函数tag，叫做String.raw，它可以生成一个未经过处理的原始字符串，其中的空白和缩进会被移除。

示例代码：

let rawMultilineString = String.raw`
这是第一行文本。这是第二行文本，它包含了几个单词。
`;console.log(rawMultilineString);

在这个例子中，rawMultilineString中的第二行前面的四个空格将被忽略，因为它使用了String.raw标签。

ES6的模板字符串提供了一种优雅的方式来创建和操作多行字符串，使得代码更加简洁和易于阅读。这对于需要处理大量文本数据的场景，如HTML模板、配置文件或任何需要多行文本的代码片段，都是非常有用的。

4，函数新特性

ES6提供了一些函数新特性，提供了更加灵活和简洁的语法。

4.1 参数默认值

在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法。


function add(a, b) {
// 判断 b 是否为空，为空就给默认值 1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));

ES6允许在声明函数时，指定参数的默认值。

function add2(a , b = 1) {return a + b;
}
// 传一个参数
console.log(add2(10));

注意，有默认值的参数必须放在最后。

下面的函数声明了三个参数，给第二个参数设置默认值的写法是不符合默认值语法的，编译不通过。。

function add2(a , b = 1, c) {return a + b + c;
}

4.2 不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。
不定参数只能放在参数列表的最后，并且有且只有一个不定参数。

function fun(...values) {console.log(values.length)
}// 除了不定参数，函数还可以有其他参数
function fun1(param1, ...values) {console.log(values.length)
}fun(1, 2) //2
fun(1, 2, 3, 4) //4

注意，不定参数必须放在参数列表的最后，以下函数声明是错误的。

function fun1(param1, ...values, param2) {console.log(values.length)
}

4.3 箭头函数

4.3.1 声明箭头函数

ES6 中新增了一种定义函数的简写方式，称之为箭头函数。

//以前声明一个方法
var print = function (obj) {console.log(obj);
}// 可以简写为：
var print2 = obj => console.log(obj);// 测试调用
print(100);
print2(100);

// 两个参数的情况：
var sum = function (a, b) {return a + b;
}//用箭头函数改写
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;//测试调用
console.log(sum2(10, 10));//20// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {c = a + b;return c;
};//测试调用
console.log(sum3(10, 20));//30

4.3.2 箭头函数结合解构表达式


//需求，声明一个对象，hello 方法需要对象的个别属性
// 传统函数声明
const person = {name: "jack",age: 21,language: ['java', 'js', 'css']
}function hello(person) {console.log("hello," + person.name)
}// 用箭头函数和对象结构重构
var hello2 = ({ name }) => { console.log("hello," + name) };//测试
hello2(person);

5，数组的Map和Reduce方法

理解ES6中数组的map()和reduce()方法是非常重要的，它们能更简洁地操作和转换数组数据。下面我将分别介绍这两个方法的用途、语法和一些基本的使用示例。

5.1 map() 方法

map() 方法用于创建一个新数组，其结果是调用数组中的每个元素上的一个函数。这个函数通常称为映射函数，因为它将一个数组映射到另一个数组。原数组不会被修改。

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])

callback 是一个必需的函数，用于处理数组中的每个元素。
currentValue 是当前正在处理的数组元素。
index 可选，是当前元素在数组中的索引。
array 可选，是调用map()方法的原始数组。
thisArg 可选，指定callback函数执行时使用的this值。

示例:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

注意，调用一个数组的map方法后，会生成一个新的数组，旧数组不变。

5.2 reduce() 方法

reduce() 方法用于将数组减少到一个单一的值。它通过一个叫做归约器函数的函数来完成，这个函数会累积结果。与map()不同的是，reduce()不返回一个新数组，而是返回一个单一的值。

语法:

const result = array.reduce(callback(preValue, currentValue[, index[, array]])[, initialValue])

callback 是一个必需的函数，用于处理数组中的每个元素。
preValue 上一次调用函数callback的结果，也是下一次调用的初始值。
currentValue 是当前正在处理的数组元素。
index 可选，是当前元素在数组中的索引。
array 可选，是调用reduce()方法的原始数组。
initialValue 可选，作为第一次调用callback函数的累积器的值。

示例:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((preValue, currentValue) => preValue+ currentValue, 0);
console.log(sum); // 输出: 15

下面逐步解析上述代码中 reduce() 函数的执行过程：

①. 初始化：

数组 numbers 被定义为 [1, 2, 3, 4, 5]。
reduce() 方法被调用，传递给它一个箭头函数 (accumulator, currentValue) => accumulator + currentValue 和一个初始值 0。
accumulator 在首次调用时将被设置为 0（初始值）。
currentValue 将从数组的第一个元素开始，即 1。

②. 第一次迭代：

当前的 accumulator 是 0，currentValue 是 1。
回调函数 (0, 1) => 0 + 1 执行，结果是 1。
accumulator 更新为 1。

③. 第二次迭代：

现在 accumulator 是 1，currentValue 是数组的下一个元素 2。
回调函数 (1, 2) => 1 + 2 执行，结果是 3。
accumulator 更新为 3。

④. 第三次迭代：

accumulator 是 3，currentValue 是 3。
回调函数 (3, 3) => 3 + 3 执行，结果是 6。
accumulator 更新为 6。

⑤. 第四次迭代：

accumulator 是 6，currentValue 是 4。
回调函数 (6, 4) => 6 + 4 执行，结果是 10。
accumulator 更新为 10。

⑥. 第五次迭代：

accumulator 是 10，currentValue 是最后一个元素 5。
回调函数 (10, 5) => 10 + 5 执行，结果是 15。
accumulator 更新为 15。

⑦. 结束迭代：

迭代完成，reduce() 返回最终的 accumulator 值，即 15。

⑧. 输出结果：

sum 变量现在等于 15。
console.log(sum) 打印出 15。

这就是 reduce() 函数如何将一个数组 [1, 2, 3, 4, 5] 中的所有元素累加起来得到总和的过程。通过这种方式，reduce() 提供了一种非常灵活的方法来处理数组数据，可以用于求和、求乘积、查找最大值或最小值等多种场景。

6，Promise

在ES6中，Promise是一个用于异步编程的重要构造，它代表了一个最终可能完成或失败的异步操作，并且具有一个最终的值。

简单的说，Promise提供了一种新的异步调用的语法，让异步调用的语法更加简洁和容易理解。

接下里，我们将以一个例子深入浅出的说清楚Promise的来龙去脉。

6.1 场景说明

假设有这样一个需求，学生登录学校的考试系统，查询某一个的成绩。

实现这个简单的需求，要发出三次请求。

第一次请求，根据用户名查询用户ID，查询成功说明可以登录
第一次请求成功后，发出第二次请求，查询该用户有成绩的科目ID
第二次请求成功后，发出第三次请求，根据科目ID查询成绩

假设后台的数据存储在json文件中，整个请求过程如下。

第一次请求从后台的user.json文件中查询到用户的ID为1。

// user.json：
{"id": 1,"name": "zhangsan","password": "123456"
}

第二次请求从后台的user_corse_1.json中查询到用户有成绩的课程ID为10。

// user_corse_1.json:
{"id": 10,"name": "chinese"
}

第三次请求从后台的corse_score_10.json中查询到用户课程ID成绩为90。

corse_score_10.json:
{"id": 100,"score": 90
}

6.2 回调地狱-传统实现

假设我们用JQuery的ajax实现异步请求，代码如下。

$.ajax({// 第一次请求url: "mock/user.json",success(data) {console.log("查询用户：", data);$.ajax({// 第二次请求url: `mock/user_corse_${data.id}.json`,success(data) {console.log("查询到课程：", data);$.ajax({// 第三次请求url: `mock/corse_score_${data.id}.json`,success(data) {console.log("查询到分数：", data);},error(error) {console.log("出现异常了：" + error);}});},error(error) {console.log("出现异常了：" + error);}});},error(error) {console.log("出现异常了：" + error);}
});

上面代码仅仅有三次回调，如果回答次数更多，嵌套的更深，导致代码难以阅读和理解，这就是所谓的回调地狱。

6.3 使用Promise重构

6.3.1 Promise 语法

const promise = new Promise(function (resolve, reject) {// 执行异步操作if (/* 异步操作成功 */) {resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果} else {reject(error);// 调用 reject，代表 Promise 会返回失败结果}
});

使用箭头函数简化。

const promise = new Promise((resolve, reject) =>{// 执行异步操作if (/* 异步操作成功 */) {resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果} else {reject(error);// 调用 reject，代表 Promise 会返回失败结果}
});

如果要等待异步执行完成之后，再执行下一个特定任务，可以通过 promise 的 then 方法来实现，还可以跟上 catch处理 promise 异步执行失败的事件。

promise.then(function (value) {// 异步执行成功后的回调
}).catch(function (error) {// 异步执行失败后的回调
})

6.3.2 用Promise实现上述需求

new Promise((resolve, reject)=>{$.ajax({url: "mock/user.json",success(data) {console.log("Promise查询用户：", data);resolve(data.id);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});}).then(id=>{return new Promise((resolve, reject)=>{$.ajax({url: `mock/user_corse_${id}.json`,success(data) {console.log("Promise查询到课程：", data);resolve(data.id);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});});}).then(id=>{return new Promise((resolve, reject)=>{$.ajax({url: `mock/corse_score_${id}.json`,success(data) {console.log("Promise查询到分数：", data);resolve(data);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});});}).then(({score})=>{console.log("Promise查询到分数：", score);})

下面重构上述代码，使之更为简洁。

把发送请求的代码抽象为一个公共的方法，减少冗余代码，代码结构更为清晰易懂。

let sendRequest = function (url, params) { return new Promise((resolve, reject) => {$.ajax({url: url,type: "GET",data: params,success(result) {resolve(result);},error(error) {reject(error);}});})
}

于是代码可以重构为：

var sendRequest = function (url, params) {return new Promise((resolve, reject) => {$.ajax({url: url,type: "GET",data: params,success(result) {console.log(result);resolve(result.id);},error(error) {reject(error);}});})}sendRequest("mock/user.json").then(id => {console.log("Promise111查询到id：", id);return sendRequest(`mock/user_corse_${id}.json`);}).then(id => {console.log("Promise1113301查询到id: " + id);return sendRequest(`mock/corse_score_${id}.json`);}).then(({ score }) => {console.log("Promise222查询到分数：", score);})

经过重构后的代码明显变得简洁易读的多，但前提是需要对Promise有一定的熟悉度，否则也是很难理解的，多写多思考。

文章目录

零，安装Live Server插件

一，创建前端工程

1，创建工程

2，在工程ES6中创建一个html文件

二，ES6 简介

1，ES6 的历史

三，前端基础ES6

1，let 和 const

1.1，let

1.1.1 严格的作用域限制

1.1.2 同名变量的重复声明

1.1.3，作用域提升

1.2，const

2，解构

2.1 数组解构

2.2 对象解构

3，字符串

3.1 插值字符串

3.2 Unicode 支持增强

3.3 遍历器接口（Iterator Protocol）

3.4 新的字符串方法

3.5 normalize() 方法

3.6 多行字符串

3.6.1 创建多行字符串

3.6.2 保留或移除空白

4，函数新特性

4.1 参数默认值

4.2 不定参数

4.3 箭头函数

4.3.1 声明箭头函数

4.3.2 箭头函数结合解构表达式

5，数组的Map和Reduce方法

5.1 map() 方法

5.2 reduce() 方法

语法:

示例:

6，Promise

6.1 场景说明

6.2 回调地狱-传统实现

6.3 使用Promise重构

6.3.1 Promise 语法

6.3.2 用Promise实现上述需求

相关文章：

3.5 `normalize()` 方法