JavaScript进阶教程(第二课续)第2/2页

JavaScript进阶教程(第二课续)第2/2页攻略

一、概述

本教程将对JavaScript进阶知识进行详细讲解，其中包括以下三个部分：

1. 进阶语法特性介绍
2. 函数式编程介绍与应用
3. 异步编程与Promise

二、进阶语法特性介绍

1. Rest参数

Rest参数允许在定义函数时使用不限数量的参数，这些参数将被自动转换为数组，方便对参数进行遍历：

function sum(...args) {
  let result = 0;
  for (let arg of args) {
    result += arg;
  }
  return result;
}

sum(1, 2, 3, 4);    // 10
sum(1, 2);          // 3

2. 箭头函数

箭头函数是ES6引入的语法特性，可以简化函数的定义：

// ES6之前
function add(a, b) {
  return a + b;
}

// ES6之后
let add = (a, b) => a + b;

同时，箭头函数还改变了this的指向：

let obj = {
  name: '张三',
  sayName() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.sayName();    // 1秒后，输出'张三'

3. 对象字面量扩展

ES6还引入了对象字面量扩展语法，可以更方便地定义对象：

let name = '张三';
let age = 20;

let obj = {
  name,
  age,
  sayName() {
    console.log(this.name);
  }
};

三、函数式编程介绍与应用

1. 纯函数

函数式编程中，纯函数是指没有副作用、输入输出完全确定的函数：

function add(a, b) {
  return a + b;
}

2. 高阶函数

高阶函数是指接收函数作为参数或返回函数的函数：

function double(fn) {
  return function(x) {
    return fn(x) * 2;
  }
}

let add1 = function(x) { return x + 1; }
let multiply2 = double(add1);

multiply2(3);    // 8

3. 函数组合

函数组合指将多个函数组合成一个函数：

function compose(...fns) {
  return function(x) {
    return fns.reduceRight((res, fn) => {
      return fn(res);
    }, x);
  }
}

let add1 = function(x) { return x + 1; }
let multiply2 = function(x) { return x * 2; }
let addThenMultiply = compose(add1, multiply2);

addThenMultiply(3);    // 8

四、异步编程与Promise

1. 回调函数

异步编程中，回调函数是一种常见的解决方案，可以在异步操作完成后执行指定的函数：

function getData(callback) {
  setTimeout(function() {
    let data = [1, 2, 3];
    callback(data);
  }, 1000);
}

getData(function(data) {
  console.log(data);    // [1, 2, 3]
});

2. Promise

Promise是ES6中引入的异步编程解决方案，可以更简洁地实现异步操作：

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = [1, 2, 3];
      resolve(data);
    }, 1000);
  });
}

getData().then(function(data) {
  console.log(data);    // [1, 2, 3]
});

三、示例说明

1. 高阶函数实现类Unix操作系统的pipe功能

在Unix操作系统中，可以使用pipe（管道）将多个命令连接起来，第一个命令的输出将作为第二个命令的输入。我们可以通过高阶函数模拟实现这个功能：

function pipe(...fns) {
  return function(x) {
    return fns.reduce((res, fn) => {
      return fn(res);
    }, x);
  }
}

let toUpper = function(str) { return str.toUpperCase(); };
let reverse = function(str) { return str.split('').reverse().join(''); };
let addExclamation = function(str) { return str + '!'; };
let transform = pipe(toUpper, reverse, addExclamation);

transform('hello world');    // "!DLROW OLLEH!"

2. Promise实现网络请求

使用Promise可以实现更高级的网络请求，如下所示：

function fetch(url) {
  return new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject('请求失败');
    };
    xhr.send();
  });
}

fetch('https://api.github.com/users/somebody').then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});