前端面试题整理-手撕代码题

已于 2024-09-02 10:13:49 修改
阅读量723 收藏 15
点赞数 10
分类专栏： 前端学习 文章标签： 前端 javascript
于 2024-09-01 13:39:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C_greenbird/article/details/141536011
版权

1. 实现 Promise.all，或者 实现 Promise.allSettled

（1）promise.all:

传入一个promise数组，其中所有promise都变为成功状态，返回一个数组，数组内是各个promise的返回；若任意传入的promise变为拒绝状态，那么返回该拒绝状态的promise的返回。
思路：
输入是一个数组，这个数组中的元素一般都是一个 Promise 实例。
输出是一个新的 Promise 实例, resolve 的内容是一个数组，这个数组就是输入中每个 Promise 的 resolve 的值。
如果有一个 Promise 执行失败，那么返回的新的 Promise 也会 reject。
其次，Promise.all 是 Promise 类上的通用方法，而不是原型上的方法。所以其实现不需要挂在 prototype 上。

    <script>
      // 1. promise.all
      // 输入：[promise实例,promise实例,……]
      // 输出：全部成功resolve返回promise结果组成的数组，只要有一个reject返回失败的promise结果
      // 是promise类上通用方法，非原型方法，无需挂载在prototype上
      Promise.myAll = function (promises) {
        if (!Array.isArray(promises)) {
          console.error("must be a array");
          return;
        }
        const res = new Promise((resolve, reject) => {
          const data = [];
          // 成功执行的promise数
          let completedCnt = 0;
          // 循环执行每个promise
          promises.forEach((promise, index) => {
            // 确保处理的对象是一个Promise
            Promise.resolve(promise)
              .then((res) => {
                // promise执行后放入data中
                data[index] = res;
                completedCnt++;
                if (completedCnt === promises.length) {
                  resolve(data);
                }
              })
              .catch((err) => reject(err));
          });
        });
        return res;
      };

	  // 编写测试用例
      Promise.myAll([
        Promise.resolve(1),
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(2);
          }, 1000);
        }),
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(3);
          }, 2000);
        }),
      ])
        .then((res) => {
          console.log(res);
        })
        .catch();

      Promise.myAll([Promise.resolve(2), Promise.reject(new Error("Failed"))])
        .then((res) => {
          console.log(res);
        })
        .catch(console.err);
    </script>

在这里插入图片描述

以下图解均来自知乎栗子前端

在这里插入图片描述

（2）promise.allSettled ：

传入一个promise数组，当所有promise都变成已完成状态时，返回一个数组，包含每个promise返回结果（状态、值或者拒绝原因）
在这里插入图片描述

      // 2. promise.allSettled
      // 输入：[promise实例,promise实例,……]
      // 输出：返回所有promise实例的结果
      // 是promise类上通用方法，非原型方法，无需挂载在prototype上
      Promise.myAllSettled = function (promises) {
        if (!Array.isArray(promises)) {
          console.error("must be a array");
          return;
        }
        const res = new Promise((resolve) => {
          const data = [];
          // 存放所有执行的promise结果
          let completedCnt = 0;
          // 循环执行每个promise
          promises.forEach((promise, index) => {
            // 确保处理的对象是一个Promise
            Promise.resolve(promise)
              .then((res) => {
                // promise执行后放入data中
                data[index] = { status: "fulfilled", value: res };
              })
              .catch((reason) => {
                data[index] = { status: "rejected", value: reason };
              })
              .finally(() => {
                completedCnt++;
                if (completedCnt === promises.length) {
                  resolve(data);
                }
              });
          });
        });
        return res;
      };

      // 测试用例
      Promise.myAllSettled([
        Promise.resolve(1),
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(2);
          }, 1000);
        }),
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(3);
          }, 2000);
        }),
        Promise.reject(new Error("Failed")),
      ])
        .then((res) => {
          console.log(res);
        })
        .catch(console.err);

在这里插入图片描述

（3）promise.race：

promise.race()接收一个包含过个promise实例，返回最先返回结果的promise（不论成功还是失败）
在这里插入图片描述

      // 3. promise.race
      // 输入：[promise实例,promise实例,……]
      // 输出：返回最先返回结果的promise
      // 是promise类上通用方法，非原型方法，无需挂载在prototype上
      Promise.myRace = function (promises) {
        if (!Array.isArray(promises)) {
          console.error("must be a array");
          return;
        }
        const res = new Promise((resolve, reject) => {
          // 循环执行每个promise
          promises.forEach((promise) => {
            Promise.resolve(promise).then(resolve).catch(reject);
          });
        });
        return res;
      };

      // 测试用例
      Promise.myRace([
        new Promise((resolve, reject) => {
          setTimeout(() => reject("Promise 2 rejected"), 500);
        }),
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(2);
          }, 1000);
        }), //1s
        new Promise((resolve) => {
          setTimeout(() => {
            resolve(3);
          }, 2000);
        }), //2s
        // Promise.reject(new Error("Failed")), //立即
      ])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.error(err));

在这里插入图片描述

（4）promise.any:

promise.any()接收一个包含过个promise实例，返回最先成功执行resolve的promise；如果所有promise都都失败（rejected）时被 reject，返回包含所有失败结果的数组
在这里插入图片描述

      Promise.myAny = function (promises) {
        if (!Array.isArray(promises)) {
          console.error("must be a array");
          return;
        }
        const res = new Promise((resolve, reject) => {
          const errors = [];
          let rejectedCnt = 0;
          // 循环执行每个promise
          promises.forEach((promise, index) => {
            Promise.resolve(promise)
              .then((res) => resolve(res))
              .catch((err) => {
                errors[index] = err;
                rejectedCnt++;
                if (rejectedCnt === promises.length) {
                  reject(
                    new AggregateError(errors, "All promises were rejected")
                  );
                }
              });
          });
        });
        return res;
      };

      // 测试用例
      Promise.myAny([
        // 不能不写resolve
        new Promise((resolve, reject) => {
          setTimeout(() => {
            reject(2);
          }, 1000);
        }), //1s
        new Promise((resolve, reject) => {
          setTimeout(() => {
            reject(3);
          }, 2000);
        }), //2s
        Promise.reject(new Error("Failed")), //立即
        Promise.resolve(1),
      ])
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          if (error instanceof AggregateError) {
            console.error("All promises were rejected:");
            error.errors.forEach((err, index) => {
              console.error(`Error ${index + 1}:`, err);
            });
          } else {
            console.error("An unexpected error occurred:", error);
          }
        });

在这里插入图片描述
在这里插入图片描述

2. 实现 对象的深拷贝和浅拷贝

深拷贝：递归赋值所有层，如果是引用类型，那么会新建一个，所以对原值的修改不会影响拷贝值。
浅拷贝：只处理第一层的复制，如果是引用类型，就会复制其引用。所以对于引用属性的值的修改，会相互干扰，因为他们共用一份引用。
（1）浅拷贝：

      function shallowCopy(obj) {
        // typeof null === 'object' 所以单独处理（typeof对于null、array、object都返回object）
        if (typeof obj !== "object" || obj === null) {
          return obj;
        }
        const isArr = Array.isArray(obj);
        const res = isArr ? [] : {};
        if (isArr) {
          for (let i = 0; i < obj.length; i++) {
            res[i] = obj[i];
          }
        } else {
          const keys = Object.keys(obj);
          for (let i = 0; i < keys.length; i++) {
            res[keys[i]] = obj[keys[i]];
          }
        }
        return res;
      }

      console.log(shallowCopy({ a: 1, b: 2 }));

（2）深拷贝：

      function deepCopy(obj) {
        // 如果深拷贝map
        const map = new Map();
        function realCopy(obj) {
          if (typeof obj !== "object" || obj === null) {
            return obj;
          }
          // 如果map中有，则使用map中的数据
          if (map.has(obj)) {
            return map.get(obj);
          }
          const isArr = Array.isArray(obj);
          const res = isArr ? [] : {};
          // 将当前obj和res关联起来
          map.set(obj, res);
          if (isArr) {
            for (let i = 0; i < obj.length; i++) {
              res[i] = realCopy(obj[i]);
            }
          } else {
            const keys = Object.keys(obj);
            for (let i = 0; i < keys.length; i++) {
              const value = obj[keys[i]];
              res[keys[i]] = realCopy(value);
            }
          }
          return res;
        }
        return realCopy(obj);
      }

      const obj = {
        a: {
          a: 1,
          b: 2,
        },
        b: [1, 2, 3],
      };

      const res = deepCopy(obj);
      console.log("res:", res);

      obj.a.a = 3;
      obj.b[0] = 99;
      console.log("obj:", obj);
      console.log("res:", res);

在这里插入图片描述

3. 实现 call, apply, bind

三者均是改变this的指向
call()将实参在对象后依次传递 a,b,c,d
apply()需将实参封装到一个数组中统一传递 [a,b,c,d]
bind() 也是依次传递参数，返回改过this指向的新函数，调用才会执行，即bind(a,b,c,d)() a,b,c,d
在这里插入图片描述
在这里插入图片描述
自己实现call:

      // 手写实现call
      Function.prototype.myCall = function (context, ...args) {
        // 先判断调用对象是不是函数
        if (typeof this !== "function") {
          console.log("type error");
        }
        // 判断context是否传入，null则设为window
        context = context || window;
        // 增加context的临时属性fn，用来存储原来的this指向，也就是函数自己，方便后面调用（为了避免fn与context本身属性重复，使用symbol)
        const fn = Symbol();
        context[fn] = this;
        // 调用方法，此时使用的是context的方法，那么fn 属性所引用的函数（即原始函数）在执行时，this 将指向 context 对象
        const result = context[fn](...args);
        // 删除临时属性，避免 context 对象被 fn 属性污染
        delete context[fn];
        // 返回函数本身调用结果
        return result;
      };

自己实现apply:
在这里插入图片描述
自己实现bind:

      // 手写实现bind
      Function.prototype.myBind = function (context, ...args) {
        // 先判断调用对象是不是函数
        if (typeof this !== "function") {
          console.log("type error");
        }
        // 判断context是否传入，null则设为window
        context = context || window;
        // 闭包存一下当前函数，此时this指向要调用的函数
        const fn = this;
        return function (...innerArgs) {
          // 由于bind语法与call语法类似，此处利用call帮助实现
          return fn.call(context, ...args, ...innerArgs);
          // 也可以使用apply实现
          return fn.apply(context, args.concat(innerArgs));
        };
      };

4. 实现消抖或者节流

（1）消抖的原理是在事件触发后，等待一段时间再执行函数。如果在等待时间内再次触发事件，则重新开始计时。这样可以确保函数在高频率事件触发时，只在最后一次事件触发后才执行一次。常用于 input 事件和 change 事件的处理。

当新函数被多次执行时，每次都会重新计时，只有 delay 长度的时间内，没有触发，才会真正执行原函数。
所以内部设置计时器，该定时器会在 delay 时间之后执行原函数，每次新函数被执行，清除计时器。

手写消抖：

      // 手写防抖：连续时间内多次触发只执行最后一次（只要打断就会重新开始）。利用计时器实现，每次在delay事件之后执行fn，每次新函数被执行，清楚计时器。
      // 优化：用户每次输入都会等一个delay时间才会响应，我们希望用户在第一次输入后立刻响应
      function debounce(fn, delay, immediate) {
        // 入参类型判断
        if (typeof fn !== "function") {
          console.error("First argument must be a function");
        }
        if (typeof delay !== "number" || delay < 0) {
          console.error("Second argument must be a non-negative number");
        }
        // 闭包存储timer，这样，每次result执行时都会是同一个timer
        let timer;
        // 闭包存储一下是否是第一次执行
        let first = true;
        function result(...args) {
          // 清除定时器
          clearTimeout(timer);
          // delay事件后执行fn
          // 箭头函数保证this指向result作用域
          // 每次新函数执行时，重新计时
          timer = setTimeout(() => {
            fn.apply(this, args);
          }, delay);
        }
        // 如果是第一次执行，那么用户期望立即执行一次
        if (first && immediate) {
          fn.apply(this.args);
          first = false;
        }
        return result;
      }

      // 编写测试用例
      function test(a, b) {
        console.log(a, b);
      }
      const debounceTest = debounce(test, 1000);

      // 1s连续触发3次，只执行最后一次
      debounceTest(1, 2);
      debounceTest(2, 3);
      debounceTest(3, 5);

      //3s后执行4,5
      setTimeout(() => {
        debounceTest(4, 5);
      }, 3000);

（2）节流的原理是在规定时间内只执行一次函数，无论这段时间内事件触发了多少次。这可以确保函数在高频率事件触发时，按照固定的时间间隔执行。常用于 scroll 事件的监听
手写节流：

      // 手写节流：连续时间内多次触发只执行一次，强调不要打断我。
      // 记录上次执行时间，计算当前经过时间是否超过最大限制时间，超过则执行并更新上次执行时间
      // 优化：最后一次一定要能执行到
      function throttle(fn, limit, trailing = false) {
        if (typeof fn !== "function") {
          console.error("First argument must be a function.");
        }
        if (typeof limit !== "number" || limit < 0) {
          console.error("Second argument must be a non-negative number.");
        }

        // 记录上一次执行时间
        let lastTime = 0;
        let timer = null;
        function result(...args) {
          const now = Date.now();
          // 如果当前经过时间超过了limit，就执行fn
          if (now - lastTime >= limit) {
            if (timer) {
              // 由于定时器执行时间在limit之后，没有必要每次销毁重建，直接用上一次定时器即可
              clearTimeout(timer);
              timer = null;
            }
            fn.apply(this, args);
            // 更新上次执行时间
            lastTime = now;
          } else if (trailing && !timer) {
            // 如果没有超过limit，设置一个定时器同时清除设次设定的定时器，保障嘴壶一次被执行（这里类似消抖）
            clearTimeout(timer);
            const remainTime = limit - (now - lastTime);
            timer = setTimeout(() => {
              fn.apply(this, args);
              lastTime = Date.now();
              timer = null;
            }, remainTime);
          }
        }
        return result;
      }

      // 编写测试用例
      function test(a, b) {
        console.log(a, b);
      }
      const throttleTest = throttle(test, 1000);

      // 1s连续触发3次，只执行第一次
      throttleTest(1, 2);
      throttleTest(2, 3);
      throttleTest(3, 8);

      //2s后执行4,5
      setTimeout(() => {
        throttleTest(4, 5);
      }, 2000);
      setTimeout(() => {
        throttleTest(6, 7);
      }, 2500);

5. 实现函数的柯里化

函数柯里化（Currying）是一种将一个只能一次性接受多个参数的函数转化为一系列接受一个或多个参数的函数的技术，使得函数可以更灵活地使用和组合。
一个具体函数：
在这里插入图片描述

      // 函数柯里化（Currying）是一种将一个只能一次性接受多个参数的函数转化为一系列接受一个或多个参数的函数的技术，使得函数可以更灵活地使用和组合。
      // 实现函数sum(1)(2)(3)(4)(); //10
      // 实现函数sum(1)(2)(3,4)(); //10
      // 定义外部变量存储参数
      let params = [];
      // 立即执行函数
      const sum = (function () {
        let params = [];
        function result(...args) {
          if (args.length === 0) {
            let temp = 0;
            for (let i = 0; i < params.length; i++) {
              temp += params[i];
            }
            params = [];
            return temp;
          } else {
            params.push(...args);
            return result;
          }
        }
        return result;
      })();

      const a = sum(1)(2)(3)(4)();
      console.log(a);

对于任意函数：

      function curry(fn) {
        if (typeof fn !== "function") {
          console.error("must be a function");
          return;
        }
        let params = [];
        function result(...args) {
          params.push(...args);
          // 如果参数数量超过fn可以接收的数量就执行fn
          // fn.length获取函数参数长度
          if (params.length >= fn.length) {
            const res = fn.apply(this, params);
            params = [];
            return res;
          }
          // 否则返回新函数
          return result;
        }
        return result;
      }

      // 测试用例
      function add(a, b, c, d) {
        return a + b + c + d;
      }
      const curriedAdd = curry(add);
      const suma = curriedAdd(1)(2, 3)(4); //10
      const sumb = curriedAdd(2)(3, 4, 5); //14
      console.log(suma, sumb);
C_greenbird
关注
专栏目录
华为OD面试手撕代码最新题库（2024年）
面试高手的博客
02-28 4285
本专栏给大家分享华为OD技术面试最新手撕代码真题和解题思路（2024年独家分享），持续收集分享~
前端面试题整理- 手撕代码篇
qq_39581763的博客
04-29 616
手撕代码篇 考察 new 和闭包(某节) // 不使用全局变量前提下实现如下逻辑 let a = new Foo() //a.id -> 1 let b = new Foo() //b.id -> 2 // 使用闭包 const Foo = (function() { let index = 1; return function() { this.id = in...
前端面试知识点整理——常见手撕代码_前端手撕代码
2401_84447112的博客
05-02 836
外链图片转存中…(img-CeHdESEB-1714631040952)][外链图片转存中…(img-wK5aeqxw-1714631040954)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
个人整理的前端面试代码题
o_u_c_h的博客
08-10 2833
本篇文章为个人整理的前端面试中较高几率出现的手撕代码题，有些我的确在面试中遇到过，其中一些写出来了，一些因为少接触吃过亏，其他的是我暂时没遇见但是同学面经有出现，现在开一篇文章记录一下吧，帮自己也希望能帮到读者。...
前端面试知识点整理——常见手撕代码
qq_43819274的博客
04-02 2399
前端面试知识点整理——常见手撕代码 文章目录一、排序1.冒泡排序2.选择排序3.插入排序4.快速排序5.推排序6.归并排序二、防抖和节流1.防抖2.节流三、函数柯里化四、清除前后空格五、数组拍平六、图片懒加载七、深拷贝八、bind、apply、call1.bind2.apply3.call九、发布-订阅模式十、promise十一、promise.all十二、promise.race十三、jsonp十四、new原理实现十五、instanceof原理实现十六、setTimeout实现setInterval 一、
手撕前端面试代码题
热门推荐
weixin_43758603的博客
11-21 1万+
序 最近我终于找到了一份满意的工作(字节跳动的实习岗) 准备面试的过程中,我整理出了一些有用的笔记,这篇就是其中之一. 既然写好了,不妨就放在这里分享给大家. 面试通常都有现场写代码的题目,我基本每次都或多或少的翻车.有意思的是,每次面试结束,自己改不到五分钟就调试出来了. 所以面试中的写代码的过程,一定不能紧张,要沉住气慢慢来.只要不是系统自动检查结果,只要是面试官看着你写,就有很大的表现的机会,哪怕最后做不出来. 我参加的最烦人的面试,是那种系统判定结果的面试,只要做不出来,就绝对不可.
前端面试 - 常考的手撕代码题，web全栈开发
2401_83973893的博客
04-02 713
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；第一个参数都是this要指向的对象，也就是想指定的上下文；call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。所以我们模拟的步骤可以分为：（1）将函数设为对象的属性（2）执行该函数（3）删除该函数}*///第一个参数为null或者undefined时，this指向全局对象window// 非常关键：改变 this 的作用域。
20道手撕JS面试题--上篇
weixin_46015250的博客
12-14 507
20道手撕JS面试题
面试题整理--基础部分
想握住此生辽阔
10-31 277
1 解释一下java的特性，封装继承多态 2：Java和C++的区别
leetcode分类-leetcode::high-speed_train:分类别整理校招前端面试算法与手撕代码题
06-29
分类别整理校招前端面试算法题 持续更新中... 2020/1/12 已更新链表模块 2020/1/13 已更新二叉树模块(上) 2020/1/14 已更新二叉树模块(中) 2020/1/15 已更新二叉树模块(下) :snowflake::snowflake::snowflake: 已...
一夫当关，15道高频手撕代码面试题整理
超逸の学习技术博客
12-28 603
仰望星空的人，不应该被嘲笑 最后 文章产出不易，还望各位小伙伴们支持一波！ 往期精选： 小狮子前端の笔记仓库 leetcode-javascript：LeetCode 力扣的 JavaScript 解题仓库，前端刷题路线（思维导图） 小伙伴们可以在Issues中提交自己的解题代码，???? 欢迎Contributing，可打卡刷题，Give a ⭐️ if this project helped you! 访问超逸の博客，方便小伙伴阅读玩耍~ 学如逆水行舟，不进则退 ...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1120
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1200
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
最新发布
分享有趣的、贴近生活的CS知识
10-07 493
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
登录功能开发 P167重点
2303_81204446的博客
09-30 424
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1215
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 193
Vite。
前端的全栈混合之路Meteor篇（二）：RPC方法注册及调用
分享有趣的、贴近生活的CS知识
10-03 618
Meteor 3.0中引入的异步支持和callAsync方法，使得开发者在处理前后端数据交互时更加轻松，本文简单介绍一下它的前后端用法
前端面试题解析：手写JavaScript代码实现
"该资源为2021年的前端面试题汇总，重点在于手写代码题目，涵盖了JavaScript基础，包括Object.create、instanceof方法的实现以及new操作符的工作原理等核心概念。" 在前端面试中，掌握JavaScript的基础及其实现机制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值