“ ES6+ —— 让你的JavaScript代码从平凡到精彩 “

前期回顾

【提高代码可读性】—— 手握多个代码优化技巧、细数哪些惊艳一时的策略_0.活在风浪里的博客-CSDN博客代码优化对象策略https://blog.csdn.net/m0_57904695/article/details/128318224?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128318224%22%2C%22source%22%3A%22m0_57904695%22%7D

☠ let 和 const

🍍 箭头函数

🎀 模板字符串

💊 对象解构赋值

🎉 展开运算符

🔱 类和继承

🎉 箭头函数中的 this 关键字

📐 Promise

👋💋 谢谢观看：

在本文你如果有基础，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 代码更加简洁、易读和易于维护。

详情看这篇：class 类的继承_class 类函数继承_0.活在风浪里的博客-CSDN博客class 类的继承https://blog.csdn.net/m0_57904695/article/details/121976812?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258344316782425116273%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258344316782425116273&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-121976812-null-null.article_score_rank_blog&utm_term=class&spm=1018.2226.3001.4450

🎉 箭头函数中的 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。

详情看这篇：

this指向问题_0.活在风浪里的博客-CSDN博客this指向问题https://blog.csdn.net/m0_57904695/article/details/121959431?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168258356516800182168632%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168258356516800182168632&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-8-121959431-null-null.article_score_rank_blog&utm_term=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&spm=1018.2226.3001.4450

📐 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 等其他方法,方便封装传值! 感谢阅读到此  <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