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 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
JS字符串处理实例代码
Aug 05 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP小教程之实现链表
2014/06/09 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python文件操作整理汇总
2014/10/21 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
婚礼父母答谢词
2015/01/04 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS