前期回顾
目录
在本文你如果有基础，5分钟即可温习一遍。没有"es6+"经验，十分钟亦可掌握雷电！看完直呼技术迭代过快，(其实老早都出来了，都快比我年纪大了)-2015-6
念及此，直接开始
☠ let 和 const
ES6 引入了两个新的声明变量的关键字 let 和 const。let 关键字用于声明局部（函数）变量，而 const 关键字用于声明常量（值不可改）。
function foo() {
let x = 1;
if (true) {
let x = 2; // 块级作用域内声明的变量 x 与外部变量 x 不同
console.log(x); // 输出 2
}
console.log(x); // 输出 1
}在使用 const 声明常量时，变量的值是不可更改的。例如：
const PI = 3.14;
PI = 3; // 抛出错误，因为常量值不可更改🍍 箭头函数
ES6 引入了箭头函数，这是一种更加简洁的函数定义方式。箭头函数可以帮助我们更好地管理函数作用域，并减少代码量。
// 使用普通函数定义
function foo(x, y) {
return x + y;
}
// 使用箭头函数定义
const bar = (x, y) => x + y;箭头函数有一个特殊的语法规则，如果函数体只有一条语句，可以省略函数体的大括号和 return 关键字,如果只有一个参数小括号也可以省略。例如：
// 使用箭头函数定义
const baz = x => x;
// 等价于
const qux = (x) => {
return x ;
};🎀 模板字符串
ES6 引入了模板字符串，这是一种更加灵活的字符串定义方式。模板字符串支持变量插值和多行字符串。
// 使用普通字符串定义
const str1 = "Hello, " + name + "!";
// 使用模板字符串定义
const str2 = `Hello, ${name}!`;在模板字符串中，使用 ${} 语法可以插入变量或表达式。例如：
const x = 1;
const y = 2;
const result = `${x} + ${y} = ${x + y}`;
console.log(result) // 输出: 1 + 2 = 3模板字符串还支持多行字符串定义，这可以帮助我们更好地组织和排版代码。例如：
const str = `
<div>
<h1>Hello, world!</h1>
<p>This is a demo of template strings.</p>
</div>
`;💊 对象解构赋值
ES6 引入了对象解构赋值，这是一种更加方便的变量赋值方式。对象解构赋值可以从对象中提取值并将其赋给变量，从而简化了代码。
// 使用普通方式获取对象属性
const person = { name: "Alice", age: 25 };
const name = person.name;
const age = person.age;
// 使用对象解构赋值获取对象属性
const { name, age } = person;在对象解构赋值中，用花括号 {} 括起来的变量名，必须和对象属性名一致。例如：
const person = { name: "Alice", age: 25 };
const { name: personName, age: personAge } = person; // 将 person 对象的name 和 age 属性分别赋值给 personName 和 personAge 变量
console.log(personName); // 输出 "Alice"
console.log(personAge); // 输出 25🎉 展开运算符
ES6 引入了展开运算符，可以将数组或对象遍历展开为一系列一维值。展开运算符可以使代码更加简洁。
数组：
const arr = [1, 2, 3];
console.log(...arr); // 输出 1 2 3对象：
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出 { x: 1, y: 2, z: 3 }数组合并：
// 使用普通方式合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
// 使用展开运算符合并数组
const arr4 = [...arr1, ...arr2]; // 输出：(6) [1, 2, 3, 4, 5, 6]🔱 类和继承
ES6 引入了类和继承，可以使面向对象编程更加方便和易于理解。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
study() {
console.log(`${this.name} is studying in grade ${this.grade}.`);
}
}在上述代码中，我们定义了一个 Person 类和一个 Student 类。Student 类继承自 Person 类。在构造函数中，使用 super() 调用父类的构造函数，并传入必要的参数。在子类中可以添加自己的属性和方法。例如，我们在 Student 类中添加了一个 study() 方法。
通过以上几个例子，我们简要介绍了 ES6 的一些新特性，包括 let 和 const、箭头函数、模板字符串、对象解构赋值、展开运算符以及类和继承。这些特性都可以使 JavaScript 代码更加简洁、易读和易于维护。
🎉 箭头函数中的 this 关键字
在 ES6 中，箭头函数是一种新的函数定义方式。箭头函数可以使代码更加简洁，特别是在使用函数作为回调函数时。与普通函数不同的是，箭头函数的 this 关键字绑定到定义时的作用域，而不是调用时的作用域。这个特性可以避免 this 绑定错误的问题。
当使用箭头函数时，`this`关键字将指向最近的外层非箭头函数的上下文。如果没有找到外层的非箭头函数，则`this`将指向全局对象。
const person = {
name: "Alice",
sayHello: function() {
console.log(`Hello, my name is ${this.name}.`);
},
sayHelloArrow: () => {
console.log(`Hello, my name is ${this.name}.`);
}
};
person.sayHello(); // 输出 "Hello, my name is Alice."
person.sayHelloArrow(); // 输出 "Hello, my name is undefined."在上述代码中，我们定义了一个 person 对象，其中包含两个方法：sayHello 和 sayHelloArrow。在 sayHello 方法中，我们使用普通函数定义方式，并使用 this 关键字引用 person 对象的 name 属性。在 sayHelloArrow 方法中，我们使用箭头函数定义方式，并尝试使用 this 关键字引用 person 对象的 name 属性。然而，由于箭头函数的 this 关键字绑定到定义时的作用域，因此 this 关键字指向的是全局对象，导致输出为 undefined。
详情看这篇：
📐 Promise
Promise 是一种解决异步编程的方案。在 ES6 中，Promise 是内置的全局对象，可以使异步代码更加清晰和易于理解。
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = [1, 2, 3];
if (data.length > 0) {
resolve(data);
} else {
reject("No data available.");
}
}, 1000);
});
}
getData()
.then(data => console.log(data))
.catch(error => console.error(error));在上述代码中，我们定义了一个 getData 函数，它返回一个 Promise 对象。在 Promise 的构造函数中，我们执行异步操作，并在完成时调用 resolve 或 reject 函数，以表示操作成功或失败。在调用 getData 函数后，我们可以使用 then 方法处理成功的结果，使用 catch 方法处理失败的结果。
详情看这篇：
Promise一分钟入坑_0.活在风浪里的博客-CSDN博客/ 原型上有catch then //得到实例化对象 它其实就是一个构造函数 let promise = new Promise((resolve, reject) => { }) console.log(promise);得到实例化对象https://blog.csdn.net/m0_57904695/article/details/121928022?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258371116782425125013%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258371116782425125013&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-3-121928022-null-null.article_score_rank_blog&utm_term=promise&spm=1018.2226.3001.4450 Promise手撕axios,(它是咋用原生封装的)_0.活在风浪里的博客-CSDN博客in the race在比赛中；有成功的可能,妙笔生花,相信自己正片开始 //这种是不是很简单,答对了,真是个大聪明,他是基于promise封装过了, axios({ url: 'https://cnodejs.org/api/v1/topics' }).then(res => { console.log(res); }) //这是不是一个函数调用?哈哈,调用里面写了实..
https://blog.csdn.net/m0_57904695/article/details/121931205?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258371116782425125013%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258371116782425125013&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-121931205-null-null.article_score_rank_blog&utm_term=promise&spm=1018.2226.3001.4450
Promise.all 和 Promise.race (怎么使用)_promise.race([firstpromise, secondpromise]).then(r_0.活在风浪里的博客-CSDN博客需求:计算两个异步方法,等所有请求都返回在计算他们Promise.all 可以接收多个promise作为参数 当所有的promise都执行结束后会返回结果,使用场景封装请求的时候使用loding加载,当这个请求完毕,另一个请求的loding也结束会形成loding闪烁,<script> //下面一个例子 我需求要这两个异步方法的和,当所有的promise都执行结束后会返回结果 let promise1 = new Promise((resolve, r..https://blog.csdn.net/m0_57904695/article/details/121934475?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258371116782425125013%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258371116782425125013&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-121934475-null-null.article_score_rank_blog&utm_term=promise&spm=1018.2226.3001.4450手写promise class类封装promise_0.活在风浪里的博客-CSDN博客先写class类构造函数,接着实例化对象出来,传入resolve, reject形参,在构造函数中try cactch,验证是否传入的是否是函数,定义默认状态,根据条件变成成功或失败,此时架子已经搭好,但无法异步通讯,定义两个数组,在失败和成功函数中循环它并将其返回出去,为什么是数组?答:因为还有promise.all promise.race 等其他方法,方便封装传值! 感谢阅读到此 <!-- class类封装promise --> <script> .
https://blog.csdn.net/m0_57904695/article/details/121975983?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258371116782425125013%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258371116782425125013&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-121975983-null-null.article_score_rank_blog&utm_term=promise&spm=1018.2226.3001.4450
👋💋 谢谢观看 ：
还有很多特性，需自行学习，
_______________________________ 期待再见 _______________________________
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
