脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript框架设计读书笔记之数组的扩展与修复

javascript框架设计读书笔记之数组的扩展与修复

 更新时间：2014年12月02日 17:13:57   投稿：hebedich  
本文是司徒正美的《javascript框架设计》的第三章第2节的读书笔记，本节主要介绍的是javascript数组的扩展与修复，本文则是选取了其中的重点部分展示给大家。

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的区别，返回值，以及对原数组的影响。

以上就是本节的内容的精简版了，虽然精简，但重点都在，希望对大家阅读本节的时候能有所帮助

您可能感兴趣的文章:

相关文章

  • Chrome插件开发系列一：弹窗终结者开发实战

    Chrome插件开发系列一：弹窗终结者开发实战

    从这一节开始，我们将从零开始打造我们的chrome插件工具库，第一节我们将讲一下插件开发的基础知识并构建一个简单但却很实用的插件，在构建之前，我们先简单的了解一下插件以及插件开发的基础知识
    2020-10-10
  • 微信小程序与公众号卡券/会员打通的问题

    微信小程序与公众号卡券/会员打通的问题

    这篇文章主要介绍了微信小程序与公众号卡券/会员打通的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能

    JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能

    去除字符串两端的空格，是字符串处理非常常用的方法如何trim() 、Ltrim() 、Rtrim()，可惜的是javascript中无此方法，下面有个不错的自定义教程感兴趣的朋友可以参考下
    2013-11-11
  • 微信小程序自定义组件之可清除的input组件

    微信小程序自定义组件之可清除的input组件

    最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了方便小编直接使用了可清除的input自定义组件，下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件，感兴趣的朋友一起看看吧
    2018-07-07
  • uniapp引用echarts的详细步骤(附柱状图实例)

    uniapp引用echarts的详细步骤(附柱状图实例)

    最近在uni-app搭建的微信小程序项目中使用了ECharts,下面这篇文章主要给大家介绍了关于uniapp引用echarts的详细步骤,文中还附有柱状图实例,需要的朋友可以参考下
    2022-07-07
  • 完美解决IE9浏览器出现的对象未定义问题

    完美解决IE9浏览器出现的对象未定义问题

    下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-09-09
  • javascript内存分配原理实例分析

    javascript内存分配原理实例分析

    这篇文章主要介绍了javascript内存分配原理,结合实例形式分析了javascript原始值和引用值内存分配的原理与实现技巧,需要的朋友可以参考下
    2017-04-04
  • ES6学习之变量的两种命名方法示例

    ES6学习之变量的两种命名方法示例

    最近在学习ES，所以想着将自己学习的一些经验技巧总结一下，方便学习，所以下面这篇文章主要跟大家分享介绍了关于ES6学习之变量的两种命名方法，文中通过示例代码介绍的很详细，需要的朋友们下面来一起看看吧。
    2017-07-07
  • JavaScript网格中的最小路径讲解

    JavaScript网格中的最小路径讲解

    这篇文章主要介绍了JavaScript网格中的最小路径讲解，所有路径经过的单元格的 值之和 加上 所有移动的 代价之和 。从 第一行 任意单元格出发，返回到达 最后一行 任意单元格的最小路径代价
    2022-06-06
  • 利用JavaScript在网页实现八数码启发式A*算法动画效果

    利用JavaScript在网页实现八数码启发式A*算法动画效果

    这篇文章主要介绍了利用JavaScript在网页实现八数码启发式A*算法动画效果,需要的朋友可以参考下
    2017-04-04

最新评论