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 控制非法字符的输入代码
Dec 04 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JS常用函数使用指南
Nov 23 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
小程序自定义弹框效果
Nov 16 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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执行sql语句的写法
2009/03/10 PHP
PHP基础学习小结
2011/04/17 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
2014年元旦促销活动方案
2014/02/22 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
创业计划书之家教中心
2019/09/25 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript