javascript框架设计读书笔记之数组的扩展与修复


Posted in Javascript onDecember 02, 2014

1.indexOf和lastIndexOf方法:

因为IE7在数组对象上使用indexOf会报错,所以需要重写一个兼容性的。

Array.prototype.lastIndexOf(item,index){
var n = this.length,i = (index==null||index>n-1)?n-1:index;

if(i < 0) i = n+i;

for(;i>=0;i--)


if(this[i] === item)   //全等判断,indexOf,lastIndexOf



return i;

return -1;

}

2.shuffle方法:对数组进行洗牌。

function shuffle(target){
var i = target.length, j ,temp;

for(;i>0;j=parseInt(Math.random() * i), x = target[--i],target[i] = target[j],target[j]=x){}    


 //假设length=10,那么Math.random()*10->[0,10),parseInt后,[0,9],随机的选择一个与数组最后一项交换。第二次循环,[0,8],与数组的倒数第二项交换。

return target;

}

3.数组的平坦化处理:flatten,返回一个一维数组

function flatten(arr){
var result = [];

arr.forEach(function(item){


if(Array.isArray(item))   result.concat(flatten(item));


else
result.push(item);

});

return result;

}

4.unique方法:对数组去重操作

此方法,面试官最喜欢问了,因为它有多种实现方法,最普通的是两个for循环。一般知道的最多的是使用一个对象a,然后一个for循环数组arr,每次if(a[arr[i]])是否存在,不存在则push到你新定义的数组result中。存在就证明,重复,因此不用push到result中。这种方案,针对"123",123,会认为相同的,其实一个是字符串,一个是数字,不应该认为是相同的。

所以就出现了以下方法:[1,"1","1"]

 if ((typeof obj[array[i]]) != (typeof array[i]) || obj[array[i]] != array[i]) {
a.push(array[i]);

obj[array[i]] = array[i];

}

//首先判断类型是否相同,如果相同,就判断他们的值是否相等,不相等就存进去,相等就证明之前已经存在这个值了。

如果类型不相同,这里存在两种情况,

第一种情况,obj之前已经存了此数据了,比如:obj[123] = 123,现在array[i] = "123",这时,typeof obj[array[i]])是数字,而typeof array[i]是字符串,因此存入数组中。

第二种情况是obj还没存此数据,比如:array[i] = "123",obj["123"] = undefind,这时typeof obj[array[i]])就是typeof undefined = undefined,不等于typeof array[i],存入数组中。

此种方法,可以解决字符串和数字相同的情况,但是无法解决对象相同的情况。比如:a = {1:2}, b ={2:1};

第一次循环时,typeof obj[a] = undefined,typeof a = Object。存入obj[a] =a.其实就是obj[Object] = a;

第二次循环时,typeof obj[b] 等于typeof obj[Object]其实就是typeof a = object,typeof b = object.因此进入到obj[array[i]] != array[i]|,也就是obj[b]->obj[Object]->a != b,因此存入

obj[b] = b;也就是obj[Object] = b;覆盖了之前的obj[Object] = a;

这种情况下,就会出现所有的对象,都只会存最后一个对象值。

当考虑对象时,我就会使用以下这种方法:

for(var i = 0; i < temp.length; i++){

                for(var j = i + 1; j < temp.length; j++){

                        if(temp[i] === temp[j]){

                                temp.splice( j, 1 );

                                j--;

                        }

                }

        }

 return temp;

5.数组排序:sort方法,如果要排序的是对象,可以自己写一个compare(a,b){if(a.age>b.age) return 1;else return -1;},A.sort(compare).

6.min返回数组最小值:return Math.min.apply(0,array);

7.unshift在ie6,7下不返回数组长度。

if([].unshift(1)!==1)   //往空数组中从前面添加一项,其他浏览器会返回1,而IE6,7不会返回数组长度。这时就执行if语句

{
var _unshift = Array.prototype.unshift;      //函数劫持。

Array.prototype.unshift = function(){


_unshift.apply(this,arguments);


return this.length;

}

}

8.splice在一个参数的情况下,IE8以及以下版本默认第二个参数为0,而其他浏览器是数组长度。

if([1,2,3].splice(1).length == 0)   //IE8以及以下版本会等于0,其他版本会等于3,进入if里面

{
var _splice = Array.prototype.splice;

Array.prototype.splice = function(a){


if(arguments.length == 1)   //如果只有一个参数时


{



return _splice.call(this,a,this.length);


}else{



return _splice.apply(this,arguments);


}

}

}

这个方法会改变数组的选项,因此数组的push,pop,shift,unshift(这几个方法也会修改数组的选项)都会调用这个方法来实现。

这里有一个地方需要注意:

var color = new Array('red','blue','yellow','black');

var color2 = color.splice(2,0,'brown','pink');

alert(color); // red,blue,brown,pink,yellow,black,在yellow选项上,开始操作,如果删除为0,则添加的选项是在yellow之前插入。切记。

 
这里请大家去看下splice和slice的区别,返回值,以及对原数组的影响。

以上就是本节的内容的精简版了,虽然精简,但重点都在,希望对大家阅读本节的时候能有所帮助

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
RequireJS用法简单示例
Aug 20 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
javascript框架设计读书笔记之种子模块
Dec 02 #Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 #Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 #Javascript
JavaScript和CSS交互的方法汇总
Dec 02 #Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 #Javascript
You might like
php多文件上传功能实现原理及代码
2013/04/18 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
React快速入门教程
2017/01/17 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
Python中__init__.py文件的作用详解
2016/09/18 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
linux面试题参考答案(11)
2016/11/26 面试题
学期评语大全
2014/04/30 职场文书
文明寝室申报材料
2014/05/12 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
倡议书怎么写?
2019/04/11 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
Python中for后接else的语法使用
2021/05/18 Python
Django migrate报错的解决方案
2021/05/20 Python