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脚本特性
Sep 13 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 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
ip签名探针
2006/10/09 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php经典算法集锦
2015/11/14 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
工地食品安全责任书
2015/05/09 职场文书
音乐之声观后感
2015/06/04 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
MySQL添加索引特点及优化问题
2022/07/23 MySQL