ES6知识集锦2

最新推荐文章于 2024-11-02 12:42:04 发布

布衣而已

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量149

点赞数

文章标签： es6 javascript

本文链接：https://blog.csdn.net/m0_59406757/article/details/119037322

版权

1.模块脚板

1.为了让 JavaScript 更模块化、更整洁以及更易于维护，ES6 引入了在多个 JavaScript 文件之间共享代码的机制。它可以导出文件的一部分供其它文件使用，然后在需要它的地方按需导入。为了使用这一功能，需要在 HTML 文档里创建一个 type 为 module 的脚本：
例子：

<html>
  <body>
    <!-- 只修改这一行下面的代码 -->
<script type ="module" src="index.js"></script>;
    <!-- 只修改这一行上面的代码 -->
  </body>
</html>

使用 module 类型的脚本可以使用 import 和 export ；
例：

import { add, subtract } from './math_functions.js';
export{add,subtract}from './math_functions.js';

export 使用：

<1>.单个函数导出：

const add = (x, y) => {
  return x + y;
}

export { add };//其中add为含有两个参数的变量
//或者有额可以这样表达：
export const add = (x, y) => x + y;

<2>.导出多个函数

export { add, subtract };

import使用：
<1>.导入文件或的一部分：

import { add } from './math_functions.js';
//从/math_functions.js文件中导入add；

<2>.导入整个文件：
需要用到 * ；

import * as myMathModule from "./math_functions.js";
//将math_functions.js文件完整导入，并创建myMathModule对象用来保存完整文件

使用export default 导出，此方法也常用于给文件或模板创建一个返回值,称为默认导出

export default function add(x, y) {
  return x + y;
}

export default function(x, y) {
  return x + y;
}

警告：export default 用于为模块或文件声明一个返回值，在每个文件或者模块中应当只默认导出一个值。此外，你不能将 export default 与 var、let 或 const 同时使用。
6.导入默认导出：

import add from "./math_functions.js";
//此时变量没有花括号.

注：
被导入的 add 值没有被花括号（{}）所包围。 add 只是一个变量的名字，对应 math_functions.js 文件的任何默认导出值。在导入默认导出时，可以使用任何名字。

7.Promise使用：
Promise 是异步编程的一种解决方案 - 它在未来的某时会生成一个值。任务完成，分执行成功和执行失败两种情况。
另外，Promise构造器函数
{
注：在JavaScript中，使用new关键字后，意味着做了如下4件事：
创建一个新的空对象 {}
设置这个对象原型指向构造函数，即上例中的obj.__proto = Person.prototype
执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性。
返回新创建的对象（除非构造函数中返回的是“无原型”）。

作者：HelloJames
链接：https://www.jianshu.com/p/4bbf0c582e97
来源：简书
}
8. Promise 的三个状态：pending、fulfilled 和 rejected。 pending 状态：调用 promise 未完成。 Promise 提供的 resolve 和 reject 参数就是用来结束 promise 的。 Promise 成功时调用 resolve，promise 执行失败时调用 reject，这些方法需要有一个参数。
例子：

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

<2>.then用法：
promise一般用于服务器请求的情况，当请求结束时，根据服务器响应情况可用then执行相关操作
此时应该是完成真，即resolve时
例：

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer 设置为 true，表示从服务器获得有效响应
  let responseFromServer = true;

  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
});
makeServerRequest.then(result =>{
  result="result";
  console.log(result);
}
);

<3>.catch用法：
当 promise 失败时会调用 catch 方法。当 promise 的 reject 方法执行时会直接调用。用法如下：

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer 设置为 false，表示从服务器获得无效响应
  let responseFromServer = false;

  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
});

makeServerRequest.catch(error => {
  console.log(error);
});