文章目录
这一节学习创建前端工程、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);
})
经过重构后的代码明显变得简洁易读的多，但前提是需要对Promise有一定的熟悉度，否则也是很难理解的，多写多思考。
扫一扫
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
