也谈JavaScript数组去重,前端HTML5几种存储方式的总结

也谈JavaScript数组去重

2017/01/07 · JavaScript
· 数组

原文出处:
TooBug(@TooBug)   

JavaScript的数组去重是一个老生常谈的话题了。随便搜一搜就能找到非常多不同版本的解法。

昨天在微博上看到一篇文章,也写数组去重,主要推崇的方法是将利用数组元素当作对象key来去重。我在微博转发了“用对象key去重不是个好办法…”然后作者问什么才是推荐的方法。

细想一下,这样一个看似简单的需求,如果要做到完备,涉及的知识和需要注意的地方着实不少,于是诞生此文。

浅谈javascript函数节流

2016/03/14 · JavaScript
· 函数

原文出处:
涂根华   

什么是函数节流?

    
函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作。大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如在IE下,过多的DOM操作会影响浏览器性能,甚至严重的情况下,会引起浏览器崩溃的发生。这个时候我们就可以使用函数节流来优化代码了~

函数节流的基本原理:

    
使用一个定时器,先延时该函数的执行,比如使用setTomeout()这个函数延迟一段时间后执行函数,如果在该时间段内还触发了其他事件,我们可以使用清除方法
clearTimeout()来清除该定时器,再setTimeout()一个新的定时器延迟一会儿执行。

我们先来看一个简单的window.resize的demo例子,比如我先定义一个全局变量count=0;当我触发一次window.resize的时候,该全局变量count++;
我们来看看在控制台中打印出count的效果;JS代码如下:

var count = 0; window.onresize = function(){ count++;
console.log(count); }

1
2
3
4
5
var count = 0;
window.onresize = function(){
    count++;
    console.log(count);
}

执行截图效果如下:

图片 1

如上resize的代码,简单的缩放一次就打印出多次,这并不是我们想要的效果,这是简单的测试,那如果我们换成ajax请求的话,那么就会缩放一次窗口会连续触发多次ajax请求,下面我们试着使用函数节流的操作试试一下;

函数节流的第一种方案封装如下:

function throttleFunc(method,context){ clearTimeout(method.tId);
method.tId = setTimeout(function(){ method.call(context); },100); }

1
2
3
4
5
6
function throttleFunc(method,context){
     clearTimeout(method.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     },100);
}

我们再来封装一下窗口缩放的demo

var count = 0; function myFunc() { count++; console.log(count); }
window.onresize = function(){ throttleFunc(myFunc); } function
throttleFunc(method,context){ clearTimeout(method.tId); method.tId =
setTimeout(function(){ method.call(context); },100); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var count = 0;
function myFunc() {
   count++;
   console.log(count);
}
window.onresize = function(){
    throttleFunc(myFunc);
}
function throttleFunc(method,context){
     clearTimeout(method.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     },100);
}

如上代码,我们再来看看效果,窗口缩放和放大效果会看到,只执行了一次;打印了一次。

上面的代码使用一个定时器每隔100毫秒执行一次;

我们也可以使用闭包的方法对上面的函数进行再封装一下;

函数节流的第二种封装方法如下:

function throttle(fn, delay){ var timer = null; return function(){ var
context = this, args = arguments; clearTimeout(timer); timer =
setTimeout(function(){ fn.apply(context, args); }, delay); }; };

1
2
3
4
5
6
7
8
9
10
11
function throttle(fn, delay){
     var timer = null;
     return function(){
         var context = this,
             args = arguments;
         clearTimeout(timer);
         timer = setTimeout(function(){
             fn.apply(context, args);
         }, delay);
     };
};

上面第二种方案是使用闭包的方式形成一个私有的作用域来存放定时器timer,第二种方案的timer是通过传参数的形式引入的。

调用demo代码如下:

var count = 0; function myFunc() { count++; console.log(count); } var
func = throttle(myFunc,100); window.onresize = function(){ func(); }
function throttle(fn, delay){ var timer = null; return function(){ var
context = this, args = arguments; clearTimeout(timer); timer =
setTimeout(function(){ fn.apply(context, args); }, delay); }; };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var count = 0;
function myFunc() {
    count++;
    console.log(count);
}
var func = throttle(myFunc,100);
window.onresize = function(){
   func();
}        
function throttle(fn, delay){
     var timer = null;
     return function(){
         var context = this,
             args = arguments;
         clearTimeout(timer);
         timer = setTimeout(function(){
             fn.apply(context, args);
         }, delay);
     };
};

函数节流的基本思想是:就是想让一个函数不要执行的太频繁,减少一些过快的来节流函数,比如当我们改变窗口缩放的时候,浏览器的间隔有可能是16ms,这是浏览器自带的时间间隔,我们无法改变,而我们通过节流的方式可以试着改变一下这个间隔,尽量稍微延长下这个调用时间,因此我们可以封装如下函数:

函数节流的第三种封装方法

function throttle3(fn,delay,runDelay){ var timer = null; var t_start;
return function(){ var context = this, args = arguments, t_cur = new
Date(); timer & clearTimeout(timer); if(!t_start) { t_start = t_cur;
} if(t_cur – t_start >= runDelay) { fn.apply(context,args);
t_start = t_cur; }else { timer = setTimeout(function(){
fn.apply(context,args); },delay); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function throttle3(fn,delay,runDelay){
      var timer = null;
      var t_start;
      return function(){
         var context = this,
             args = arguments,
             t_cur = new Date();
         timer & clearTimeout(timer);
         if(!t_start) {
             t_start = t_cur;
         }
         if(t_cur – t_start >= runDelay) {
              fn.apply(context,args);
              t_start = t_cur;
         }else {
              timer = setTimeout(function(){
                  fn.apply(context,args);
               },delay);
         }
    }
}

调用demo如下:

var count = 0; function myFunc() { count++; console.log(count); } var
func = throttle3(myFunc,50,100); window.onresize = function(){ func();}
function throttle3(fn,delay,runDelay){ var timer = null; var t_start;
return function(){ var context = this, args = arguments, t_cur = new
Date(); timer & clearTimeout(timer); if(!t_start) { t_start = t_cur;
} if(t_cur – t_start >= runDelay) { fn.apply(context,args);
t_start = t_cur; }else { timer = setTimeout(function(){
fn.apply(context,args); },delay); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var count = 0;
function myFunc() {
   count++;
   console.log(count);
}
var func = throttle3(myFunc,50,100);
window.onresize = function(){
   func();}
function throttle3(fn,delay,runDelay){
      var timer = null;
      var t_start;
      return function(){
          var context = this,
              args = arguments,
              t_cur = new Date();
          timer & clearTimeout(timer);
          if(!t_start) {
              t_start = t_cur;
          }
          if(t_cur – t_start >= runDelay) {
                fn.apply(context,args);
                t_start = t_cur;
          }else {
                timer = setTimeout(function(){
                     fn.apply(context,args);
                },delay);
          }
      }
}

上面的第三个函数是封装后的函数,有三个参数,我们可以自己设置触发事件的时间间隔,则意味着,如上代码50ms连续调用函数,后一个调用会把前一个调用的等待处理掉,但每隔100ms会至少执行一次,具体使用哪一种方式只要看自己的权衡,但是我个人觉得第二种封装函数的方式够我们使用的,当然据说第三种方式性能更好~

1 赞 3 收藏
评论

图片 2

前端HTML5几种存储方式的总结

2016/09/01 · HTML5 ·
存储

原文出处: 小蚊   

接下来要好好总结一些知识,秋招来啦。。。虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~

定义重复(相等)

要去重,首先得定义,什么叫作“重复”,即具体到代码而言,两个数据在什么情况下可以算是相等的。这并不是一个很容易的问题。

对于原始值而言,我们很容易想到11是相等的,'1''1'也是相等的。那么,1'1'是相等的么?

如果这个问题还好说,只要回答“是”或者“不是”即可。那么下面这些情况就没那么容易了。

总体情况

h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。

主要应用:购物车、客户登录

对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。

NaN

初看NaN时,很容易把它当成和nullundefined一样的独立数据类型。但其实,它是数字类型。

JavaScript

// number console.log(typeof NaN);

1
2
// number
console.log(typeof NaN);

根据规范,比较运算中只要有一个值为NaN,则比较结果为false,所以会有下面这些看起来略蛋疼的结论:

JavaScript

// 全都是false 0 < NaN; 0 > NaN; 0 == NaN; 0 === NaN;

1
2
3
4
5
// 全都是false
0 < NaN;
0 > NaN;
0 == NaN;
0 === NaN;

以最后一个表达式0 === NaN为例,在规范中有明确规定():

  1. If Type(x) is Number, then
    a. If x is NaN, return false.
    b. If y is NaN, return false.
    c. If x is the same Number value as y, return true.
    d. If x is +0 and y is −0, return true.
    e. If x is −0 and y is +0, return true.
    f. Return false.

这意味着任何涉及到NaN的情况都不能简单地使用比较运算来判定是否相等。比较科学的方法只能是使用isNaN()

JavaScript

var a = NaN; var b = NaN;   // true console.log(isNaN(a) && isNaN(b));

1
2
3
4
5
var a = NaN;
var b = NaN;
 
// true
console.log(isNaN(a) && isNaN(b));

目标

解决4k的大小问题

解决请求头常带存储信息的问题

解决关系型存储的问题

跨浏览器

原始值和包装对象

看完NaN是不是头都大了。好了,我们来轻松一下,看一看原始值和包装对象这一对冤家。

如果你研究过'a'.trim()这样的代码的话,不知道是否产生过这样的疑问:'a'明明是一个原始值(字符串),它为什么可以直接调用.trim()方法呢?当然,很可能你已经知道答案:因为JS在执行这样的代码的时候会对原始值做一次包装,让'a'变成一个字符串对象,然后执行这个对象的方法,执行完之后再把这个包装对象脱掉。可以用下面的代码来理解:

JavaScript

// ‘a’.trim(); var tmp = new String(‘a’); tmp.trim();

1
2
3
// ‘a’.trim();
var tmp = new String(‘a’);
tmp.trim();

这段代码只是辅助我们理解的。但包装对象这个概念在JS中却是真实存在的。

JavaScript

var a = new String(‘a’); var b = ‘b’;

1
2
var a = new String(‘a’);
var b = ‘b’;

a即是一个包装对象,它和b一样,代表一个字符串。它们都可以使用字符串的各种方法(比如trim()),也可以参与字符串运算(+号连接等)。

但他们有一个关键的区别:类型不同!

JavaScript

typeof a; // object typeof b; // string

1
2
typeof a; // object
typeof b; // string

在做字符串比较的时候,类型的不同会导致结果有一些出乎意料:

JavaScript

var a1 = ‘a’; var a2 = new String(‘a’); var a3 = new String(‘a’); a1 ==
a2; // true a1 == a3; // true a2 == a3; // true a1 === a2; // false a1
=== a3; // false a2 === a3; // false

1
2
3
4
5
6
7
8
9
var a1 = ‘a’;
var a2 = new String(‘a’);
var a3 = new String(‘a’);
a1 == a2; // true
a1 == a3; // true
a2 == a3; // true
a1 === a2; // false
a1 === a3; // false
a2 === a3; // false

同样是表示字符串a的变量,在使用严格比较时竟然不是相等的,在直觉上这是一件比较难接受的事情,在各种开发场景下,也非常容易忽略这些细节。

1.本地存储localstorage

存储方式:

以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。

大小:

每个域名5M

支持情况:

图片 3

注意:IE9 localStorage不支持本地文件,需要将项目署到服务器,才可以支持!

检测方法:

JavaScript

if(window.localStorage){ alert(‘This browser supports localStorage’);
}else{ alert(‘This browser does NOT support localStorage’); }

1
2
3
4
5
if(window.localStorage){
alert(‘This browser supports localStorage’);
}else{
alert(‘This browser does NOT support localStorage’);
}

常用的API:

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

图片 4

存储的内容:

数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)

对象和对象

在涉及比较的时候,还会碰到对象。具体而言,大致可以分为三种情况:纯对象、实例对象、其它类型的对象。

纯对象

纯对象(plain
object)具体指什么并不是非常明确,为减少不必要的争议,下文中使用纯对象指代由字面量生成的、成员中不含函数和日期、正则表达式等类型的对象。

如果直接拿两个对象进行比较,不管是==还是===,毫无疑问都是不相等的。但是在实际使用时,这样的规则是否一定满足我们的需求?举个例子,我们的应用中有两个配置项:

JavaScript

// 原来有两个属性 // var prop1 = 1; // var prop2 = 2; //
重构代码时两个属性被放到同一个对象中 var config = { prop1: 1, prop2: 2
};

1
2
3
4
5
6
7
8
// 原来有两个属性
// var prop1 = 1;
// var prop2 = 2;
// 重构代码时两个属性被放到同一个对象中
var config = {
    prop1: 1,
    prop2: 2
};

假设在某些场景下,我们需要比较两次运行的配置项是否相同。在重构前,我们分别比较两次运行的prop1prop2即可。而在重构后,我们可能需要比较config对象所代表的配置项是否一致。在这样的场景下,直接用==或者===来比较对象,得到的并不是我们期望的结果。

在这样的场景下,我们可能需要自定义一些方法来处理对象的比较。常见的可能是通过JSON.stringify()对对象进行序列化之后再比较字符串,当然这个过程并非完全可靠,只是一个思路。

如果你觉得这个场景是无中生有的话,可以再回想一下断言库,同样是基于对象成员,判断结果是否和预期相符。

实例对象

实例对象主要指通过构造函数(类)生成的对象。这样的对象和纯对象一样,直接比较都是不等的,但也会碰到需要判断是否是同一对象的情况。一般而言,因为这种对象有比较复杂的内部结构(甚至有一部分数据在原型上),无法直接从外部比较是否相等。比较靠谱的判断方法是由构造函数(类)来提供静态方法或者实例方法来判断是否相等。

JavaScript

var a = Klass(); var b = Klass(); Klass.isEqual(a, b);

1
2
3
var a = Klass();
var b = Klass();
Klass.isEqual(a, b);

其它对象

其它对象主要指数组、日期、正则表达式等这类在Object基础上派生出来的对象。这类对象各有各的特殊性,一般需要根据场景来构造判断方法,决定两个对象是否相等。

比如,日期对象,可能需要通过Date.prototype.getTime()方法获取时间戳来判断是否表示同一时刻。正则表达式可能需要通过toString()方法获取到原始字面量来判断是否是相同的正则表达式。

2.本地存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage
在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而
localStorage 则会一直保存。

发表评论

电子邮件地址不会被公开。 必填项已用*标注