波罗丁的菠萝

波罗丁的菠萝 查看完整档案

北京编辑  |  填写毕业院校北京百望山害虫有限公司  |  抓害虫 编辑填写个人主网站
编辑

深林人不知,明月来相照

个人动态

波罗丁的菠萝 赞了回答 · 2020-09-03

js中多个时间,怎么取最小值

转时间戳排序:

array.sort((a, b) => (new Date(a)).valueOf() - (new Date(b)).valueOf())[0];

或者转时间戳取最小值(推荐):

Math.min.apply(null, array.map(item => (new Date(item)).valueOf()));

关注 4 回答 4

波罗丁的菠萝 赞了回答 · 2020-09-03

js中多个时间,怎么取最小值

排个序

arr.sort((a, b) => {
    return new Date(a).getTime() - new Date(b).getTime()
})

关注 4 回答 4

波罗丁的菠萝 发布了文章 · 2020-08-20

缓存

在任何一个语言中,如果要一段程序计算量比较大、执行时间比较长,我们可以将计算结果保存下来,待一下次执行相同的程序时,可以去保存的结果中直接获取,而无需再次计算,这种方式就叫做缓存。

在JavaScript中的实现如下

function longTime(key){
    console.log('after 2000 years....');
    return key + '的计算结果';
}
let cache = {};
function compute(param){
    let result;
    let key = param.toString();
    if(cache[key]){
                console.log('从缓存获取');
        result = cache[key];
                console.log(result);
    }else{
                console.log('没有从缓存获取');
        cache[key] = result = longTime(param);
                console.log(result);
    }
    return result;
}
// 执行
compute('key1');
compute('key2');
compute('key3');
compute('key3');

可以看到执行结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key1的计算结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key2的计算结果

VM45407:14 没有从缓存获取
VM45407:2 after 2000 years....
VM45407:16 key3的计算结果

VM45407:10 从缓存获取
VM45407:12 key3的计算结果
"key3的计算结果"
查看原文

赞 0 收藏 0 评论 0

波罗丁的菠萝 发布了文章 · 2020-08-03

for in 和 hasOwnProperty()的区别

for in可以遍历所有可枚举属性以及原型上的属性


var createObj = function(){
    this.name = "大表哥";
}
var obj1 = new createObj();
createObj.prototype.age = 10;

for(var p in obj1){
    console.log('key:',p);
    console.log('value:',obj1[p]);
}

输出结果

key: name
value: 大表哥
key: age
value: 10

hasOwnProperty()不会从原型上寻找属性

var resName = obj1.hasOwnProperty("name");
console.log("name",resName);

var resAge = obj1.hasOwnProperty("age");
console.log("age",resAge);

输出结果

name true
age false
查看原文

赞 0 收藏 0 评论 0

波罗丁的菠萝 回答了问题 · 2020-08-02

解决vue token 快过期时去调刷新toekn的接口

token过期跳转到登录页面

关注 5 回答 4

波罗丁的菠萝 回答了问题 · 2020-08-02

关于JS的 闭包,想问个问题

这其实是个变量作用域的问题。i在f1的最终值是10。var的作用域有两个,一个是全局一个是函数内,而缺少块级作用域,实际代码等同于下面。如果你把var 换成 let那就不一样了。let是有块级作用域的。
`

  function f1(){
      var result=[];
      var i =0;
      for(;i<10;i++){
          result[i]=function(){
              return i
          }
      }
      return result
  }
  console.log(  f1()[0]()  )  
  console.log(  f1()[1]()  )

`

关注 5 回答 4

波罗丁的菠萝 回答了问题 · 2020-08-01

前端 移动端开发什么情况下使用rem?

rem可以做到简单的等比例缩放,你这里以50px为基准单位,如果在比较大的屏幕上的话,字体什么的确实会更大。你可以使用css响应式的设置基准单位大小,而不必改变rem值,这样既简单,适用性也不错。
同时也要了解一下逻辑像素和物理像素的区别

关注 6 回答 5

波罗丁的菠萝 发布了文章 · 2020-07-31

JavaScript执行机制

【视频资源已上架哔哩哔哩,关注up主波罗丁的菠萝】

hello大家好,本次分享一下关于JavaScript执行机制的知识点。那么废话不多说,直接上结论,首先我们知道JavaScript是一门单线程语言,决定JavaScript执行顺序的并不是代码顺序,而是event loop顺序。

我们先来讲解一下什么是同步任务,什么是异步任务。同步任务就是按照代码写的顺序一步一步执行下去,而异步代码呢,会先将要执行的代码放入异步队列里,然后执行同步代码,等同步代码全部执行完毕之后,再去异步队列里去查看是否有待执行的代码,如果有的话,就会执行。

用setTimeout演示一下

setTimeout(()=>{
    console.log('timeout');
},0);

console.log('11111');

我们先不看执行结果是什么,先把这段代码的event loop顺序安排一下

// 首先进入整体代码
// 接着遇到了setTimout,执行它,把它对应的方法放到异步队列里去,等0ms之后再来执行它
// 接着走,遇到了console.log('11111');执行它,输出1111
// ok同步的执行完了,我去异步队列瞅瞅还有啥

// 异步队列
// 发现了console.log('timeout');,ok执行它就完了
console.log('timeout');

注意一下setTimeout第二个参数,等0ms之后再执行它,0ms之后需要看同步任务是否已经执行完毕,如果同步任务还在执行,那么只好继续等下去直到同步任务执行完毕

比如

// 1000ms后执行
setTimeout(()=>{
    console.log('timeout');
},1000);

alert('同步阻塞');

拿着去浏览器里执行一下,会发现只要我不点按钮一直让同步任务阻塞住它就不输出timeout

接下来我们再说一下Promise

let p = new Promise((resolve,reject)=>{
  console.log('promise');
  resolve();
});
p.then(()=>{
  console.log('resolve');
});
console.log('同步');

我们先不看执行结果是什么,先把这段代码的event loop顺序安排一下

// 首先进入整体代码
// 接着遇到了new Promise,执行它,输出console.log('promise')
// 接着走,遇到了promise的then;执行它,把它对应的代码放到异步队列里
// 接着走,遇到了console.log('同步');执行它,输出同步
// ok同步的执行完了,我去异步队列瞅瞅还有啥

// 异步队列
// 发现了console.log('resolve');,ok执行它就完了,输出resolve
console.log('resolve');

那么Promise和setTimeout有什么不同呢,看着都一样啊,咱们也不磨叽直接上结论,在JavaScript除了同步任务和异步任务外,也可以按照宏任务和微任务来区分。宏任务包括整体代码,setTimeout,setInterval,而微任务包括Promise,process.nextTick。process.nextTick是node环境下的我们暂且不说它。宏任务产生的异步代码会放到下次event loop中,而微任务产生的代码会放到本次event loop的末尾处。我们来用一段代码来演示

// 异步-宏任务
setTimeout(()=>{console.log('timeout')},0);
// 同步
let p = new Promise((resolve,reject)=>{
  console.log('promise');
  resolve();
});
// 异步-微任务
p.then(()=>{
  console.log('resolve');
});
// 同步-宏任务
console.log('同步');

那么这个输出的结果是怎样的的呢,我们再来分析一下,这次已经是第三次手把手分析代码了,明白什么意思吗?

// 首先进入整体代码
// 接着遇到了setTimout,执行它,把它对应的方法放到异步队列【宏任务】里去,等0ms之后再来执行它
// 接着遇到了new Promise,执行它,输出console.log('promise')
// 接着走,遇到了promise的then;执行它,把它对应的代码放到异步队列【微任务】里
// 接着走,遇到了console.log('同步');执行它,输出同步
// ok同步的执行完了,我去异步队列瞅瞅还有啥

// 异步队列

// 【Promise微任务】本次event loop
console.log('resolve');

// 【setTimeout宏任务】下一次event loop
console.log('timeout')
查看原文

赞 2 收藏 0 评论 0

波罗丁的菠萝 发布了文章 · 2020-07-31

hash路由原理

hello大家好,今天我们来分享一下hash路由的原理。我们不管什么vue还是react的框架,不要太在意框架,直接来看hash路由是怎么实现的。

原理:onhashchange

hash路由是使用了onhashchange事件来实现的。我们先新建一个页面,hashchange.html,快速创建一个页面。然后启动一个静态服务,输入http-server,执行,然后访问,这个可以看到我们的页面了,目前是一片空白。

先说一下hash值是什么,hash值就是浏览器地址#后面的东西。

我们看一下如何获取hash值,在地址后面追加#/hash然后F12打开控制台然后输入

window.location.hash;

这时候输出的就是hash值了,#/hash

好,下一步写JavaScript监听一下onhashchange事件。

先写两个a标签

<div>
    <a href="#/">首页</a>
    <a href="#/detail">详情</a>
</div>

一个跳到首页,一个调到详情页面。

再写上监听事件,看一下到底是个什么情况啊

window.onhashchange = (e) => {
        // 分析一下e
        console.log('e:', e);

        // 重要属性oldURL和newURL
        console.log('oldURL', e.oldURL);
        console.log('newRUL', e.newURL);
    };

这里有两个比较重要的属性oldURL和newURL,oldURL就是上一个URL地址,newURL就是新的URL地址。

接下来我们来实现一个最简单的hash路由,先引用一下jQuery

<script data-original="<http://libs.baidu.com/jquery/2.0.0/jquery.min.js>"></script>

写上代码

<style>
    .router{
        display: none;
    }
</style>
<div class="router" id="index">首页</div>
    <div class="router" id="detail">详情页面</div>
    function showRouter() {
        // 第一步获取hash值
        let hash = window.location.hash;
        console.log('hash', window.location.hash);
        let hashValue = hash.replace('#/', '');
        // 隐藏所有router
        $(".router").hide();

        // 显示对应的router
        let target = $("#" + hashValue);
        if(target.length > 0){
            $("#" + hashValue).show();
        }else{
            $("#index").show();
        }       
    }

我们刷新一下看看,点击首页、详情可以看到正常的显示对应的页面了。这个时候注意看一下输出。

连续点击的时候并不会连续触发onhashchange事件,这是因为只有当hash变化之后才会触发这个事件。

我们再点击一下刷新页面看看,会发现首页和详情页面都不见了,这是因为.router默认隐藏,而且hash值也没有变化,自然不会显示对应的div了。

只需要添加

$(function () {
        showRouter();
    });

这样在页面打开的时候检查一下hash就可以了

查看原文

赞 0 收藏 0 评论 0

波罗丁的菠萝 赞了回答 · 2020-06-16

解决求指导这段代码什么意思?

Login应该是使用该函数时要传入的值,看代码应该是一个对象。
{login,loading}是es6的解构语法。就是从Login对象里取出这两个键多对应的值。

关注 3 回答 2

认证与成就

  • 获得 91 次点赞
  • 获得 16 枚徽章 获得 2 枚金徽章, 获得 2 枚银徽章, 获得 12 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2014-01-14
个人主页被 1.2k 人浏览