[外门弟子]JS-1|2020年06月29日的日报-技能树.IT修真院

发表于： 2020-06-29 23:23:55

2 2244

今天完成的事情：

1.复习了promise的使用与封装，

我的理解是：promise是一个实现异步编程解决方法，比如ajax，包括jq封装的ajax，如果要执行的操作有一定的先后顺序，传统的解决方式是回调函数，但是回调函数多了之后会导致回调地狱，后期维护起来非常困难，而promise可以很好的解决的这个问题，通过then来指定拿到数据之后要执行的操作。

promise在一定程度上解决了回调问题，减少嵌套，但也有缺点，比如无法检测进行的状态，如果新建一个promise实例则会立即执行其无法取消，如果promise内部出现错误的话，这个错误也无法被抛出。

简单用promise封装一个延时调用：

  function myPromise(url , time) {
    return new Promise((resolve , reject) => {
      setTimeout(() => {
        resolve(url)
      }, time);
    })
  }
  myPromise('www.baidu.com' , 1000)
  .then(res => {
    console.log(res)
  })

下面是简单的封装一个ajax：

 function pAjax(url , methods , data) {
    let xhr = new XMLHttpRequest()
    return new Promise((resolve , reject) => {
      var xhr = new XMLHttpRequest()
      return new Promise(function (resolve, reject) {
          xhr.open(method, url, async);
          xhr.timeout = options.timeout;
          xhr.onloadend = function () {
              if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
                  resolve(xhr);
              else
                  reject({
                      errorType: 'status_error',
                      xhr: xhr
                  })
          }
          xhr.send(data);
          //错误处理
          xhr.onabort = function () {
              reject(new Error({
                  errorType: 'abort_error',
                  xhr: xhr
              }));
          }
          xhr.ontimeout = function () {
              reject({
                  errorType: 'timeout_error',
                  xhr: xhr
              });
          }
          xhr.onerror = function () {
              reject({
                  errorType: 'onerror',
                  xhr: xhr
              })
          }
      })
    })
  }

如果是对jq包装好的ajax再进行包装的话应该会更简单。

2.看了js的循环

a. for循环

b. for in循环

c. for of循环

d. foreach

其中for in循环可以循环数组以及对象，for of和forEach不能循环对象但是可以循环数组。

for循环在上面几个里面性能最好的。我的理解是for循环执行的速度最快。

3.复习了高级函数

a.filter

b.map

c.reduce

map方法主要是起到一个映射的效果

  let Num = [1,2,3,4,5,6,7,8]
  let i = Num.map(item => {
    return item * 2
  })
  console.log(i)

而且可以返回计算的值，生成了新的数组。想到这里试了一下forEach，发现并不能这么做。

filter方法主要是起到过滤器的作用，类似于vue的过滤器。

  let f = Num.filter(item => {
    let a = item < 5
    return a
  })
  console.log(f)

reduce方法是可以用来计算数组的总和

  let r = Num.reduce((total , currentNum) => {
    total = total + currentNum
    return total
  })
  console.log(r)

明天要做的事情:

1.学习vue的一些高级用法

2.复习js的原型，原型链继承。

3.复习闭包

4.学习es6

返回列表

【任务6】 [外门弟子]JS-1 | 2020年06月29日 的日报 下品

评论

分享到

【任务6】 [外门弟子]JS-1 | 2020年06月29日的日报下品