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

文章目录

零，安装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 initialization

   var 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);
        })