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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
广告切换效果(缓动切换)
May 27 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
javascript实现表单验证
Jan 29 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 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 生成微信红包代码简单
2016/03/25 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python中pika模块问题的深入探究
2018/10/13 Python
python对象与json相互转换的方法
2019/05/07 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Keras搭建自编码器操作
2020/07/03 Python
基于python实现删除指定文件类型
2020/07/21 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
公司培训心得体会
2014/01/03 职场文书
大四学生个人总结
2015/02/15 职场文书
团员个人年度总结
2015/02/26 职场文书
产品调价通知函
2015/04/20 职场文书