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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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 正则表达式小结
2009/08/31 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP中的session安全吗?
2016/01/22 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python每天必学之bytes字节
2016/01/28 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
大学生两会精神学习心得体会
2014/03/10 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
远程教育学习心得体会
2016/01/23 职场文书