【技术积累】JavaSciprt中的函数【一】

JavaScript中的箭头函数是ES6(ECMAScript 2015)中添加的一种新函数类型。箭头函数是一种更简洁的函数声明方式，同时也有不同于传统函数的一些特性。

箭头函数的语法形式为：（参数）=> {函数体}

其中，参数和函数体之间由箭头符号（=>）连接。

箭头函数与传统函数的一些不同点如下：

1. 箭头函数没有自己的this对象，它的this继承自父作用域。这意味着在箭头函数中使用this时，它实际上是指向父作用域中的this，而不是箭头函数自己的this。

2. 箭头函数没有arguments对象，但可以使用rest参数(...args)取代。

3. 如果箭头函数只有一个参数，可以省略小括号。

4. 如果函数体只有一条语句，可以省略大括号和return语句。

箭头函数的应用场景：

1. 作为回调函数。箭头函数的简洁语法和继承父作用域的this对象使它非常适合作为回调函数。

2. 与数组方法结合使用。在数组方法中，箭头函数比传统函数更具可读性和简洁性。

3. 与PromiseAPI结合使用。在PromiseAPI中，箭头函数可以帮助我们更方便地处理异步代码。

总之，箭头函数是一种更简洁、更易读、更方便的函数类型，它的使用可以提高代码的可读性和开发效率。

// 传统函数
function greeting(name) {
  console.log("Hello, " + name);
}

// 箭头函数
const greetingArrow = name => {
  console.log("Hello, " + name);
}

greeting("Tom"); // 输出 "Hello, Tom"
greetingArrow("Jerry"); // 输出 "Hello, Jerry"

const shoppingCart = [
   { id: 1, name: "Shirt", price: 25 },
   { id: 2, name: "Pants", price: 50 },
   { id: 3, name: "Shoes", price: 100 }
];

const VAT_RATE = 0.2; // 税率

const calculateTotalPrice = shoppingCart => {
  // 使用 reduce 方法计算购物车中所有商品的总价
  const totalPrice = shoppingCart.reduce((acc, product) => acc + product.price, 0);
  
  // 计算总价和税费
  const total = totalPrice + (totalPrice * VAT_RATE);
  
  // 四舍五入并保留两位小数
  return Math.round(total * 100) / 100;
}

const total = calculateTotalPrice(shoppingCart);
console.log("Total Price: $" + total); // 输出 "Total Price: $210"

什么是Promise？如何使用Promise？

Promise是JavaScript中一种异步编程的解决方案，它表示一个尚未完成但预计将来会完成的操作，并提供一种处理该操作结果的方式。

在Promise中，我们可以定义需要执行的操作，以及当操作完成后需要执行的一系列回调函数。Promise既可以表示操作失败的情况，也可以表示操作成功的情况。

Promise具有以下特点：

1. Promise对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。

2. Promise对象的状态一旦改变，就不能再改变。如果不设置回调函数，Promise内部的错误不会影响到外部。

3. Promise 对象提供了链式操作，可以使其代码更加简洁易读。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(function(){
    const num = Math.random();
    if(num < 0.5){
      resolve(num)
    } else {
      reject(num)
    }
  }, 1000)
})

promise.then((res)=>{
  console.log("操作成功，结果为：", res);
}).catch((err)=>{
  console.log("操作失败，结果为：", err);
})

上述代码中，我们通过Promise构造函数创建了一个Promise对象，在异步操作完成后通过resolve方法表示操作成功并返回一个结果，通过reject方法表示操作失败并返回一个错误信息。在then和catch方法中，我们分别定义了操作成功和操作失败后需要执行的回调函数。

Promise有三种状态：pending、fulfilled和rejected。当异步操作执行时，它最初处于pending状态。如果异步操作成功，则状态变为fulfilled，并返回一个值，如果发生错误，则状态变为rejected，并返回一个错误对象。

下面是使用Promise的简单示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error))
  })
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中，fetchData函数返回一个Promise。如果异步操作成功，它会调用resolve回调函数，并传递数据对象。如果发生错误，它会调用reject回调函数，并传递一个错误对象。

在这个示例中，我们使用了fetch API来获取数据。通过调用response.json()，我们将响应对象转换为JSON格式的数据。最后，我们处理数据对象或错误对象，您可以在.then()和.catch()方法中进行操作。

在处理异步操作时，Promise非常强大且易于使用。它可以简化代码并提高可读性。不要犹豫，尝试使用Promise来处理异步操作。

什么是async/await？ 如何使用async/await？

async/await 是一种用于简化异步操作的语法特性。它基于 Promise 对象，利用 async 和 await 关键字简化 Promise 的链式调用和错误处理，使异步代码看起来像同步代码。

async 表示一个函数是异步的，并返回一个 Promise 对象。await 表示等待 Promise 对象的解决，并返回 Promise 对象的解决值。使用 async/await 可以避免回调地狱，提高代码的可读性和可维护性。

使用 async/await 的基本流程如下：

1.定义一个异步函数，使用 async 关键字标记。

2.在函数中使用 await 关键字等待 Promise 对象处理完成，返回 Promise 对象的解决值。

3.处理 Promise 对象的错误，使用 try...catch 捕获异步操作的错误。

例如：

async function getData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/users');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

在上面的例子中，我们定义一个异步函数`getData`，使用 await 关键字等待 fetch() 方法返回的 Promise 对象处理完成，然后再使用 await 关键字等待 response 对象的 json() 方法返回的 Promise 对象处理完成，最后将返回的 JSON 数据输出。同时使用 try...catch 捕获异步操作的错误，便于进行错误处理。

使用 async/await 可以大大简化 Promise 的链式调用和错误处理，提高代码的可读性和可维护性。但需要注意的是，await 只能在 async 函数内部使用，否则会报语法错误。