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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
axios基本入门用法教程
Mar 25 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
详解Vue中过度动画效果应用
May 25 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 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获取音频文件的相关信息
2015/06/22 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
详解vue-router基本使用
2017/04/18 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python实现的概率分布运算操作示例
2017/08/14 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
详解python UDP 编程
2020/08/24 Python
Python jieba库分词模式实例用法
2021/01/13 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
英语师范专业毕业生自荐信
2013/09/21 职场文书
法制演讲稿
2014/09/10 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
单位委托书格式范本
2014/09/29 职场文书
瘦西湖导游词
2015/02/03 职场文书
仓管员岗位职责
2015/02/03 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书