JavaScript数组常用操作技巧汇总

2014-03-29  来源:本站原创  分类:javascript技巧  人气:1 

这篇文章主要介绍了JavaScript数组常用操作技巧,以实例形式汇总了针对数组的查找、连接、排序及迭代等各种常见操作技巧,非常具有实用价值,需要的朋友可以参考下

本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下:

前言

相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。

一、性质
JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。

二、操作

1 判断数组类型

var array0 = [];    // 字面量

var array1 = new Array();   // 构造器

// 注意:在IE6/7/8下是不支持Array.isArray方法的

alert(Array.isArray(array0));

// 考虑兼容性,可使用

alert(array1 instanceof Array);

// 或者

alert(Object.prototype.toString.call(array1) === '[object Array]');

2 数组与字符串

非常简单:由数组转换为字符串,使用join;由字符串转换为数组,使用split。

复制代码 代码如下:

// join - 由数组转换为字符串,使用join

console.log(['Hello', 'World'].join(','));    // Hello,World

// split - 由字符串转换为数组,使用split

console.log('Hello World'.split(' '));    // ["Hello", "World"]

3 查找元素

相信大家都常用字符串类型indexOf,却很少知道数组的indexOf同样可以用于查找元素。

复制代码 代码如下:

// indexOf - 查找元素

console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1
// 

var objInArray = [

    {

        name: 'king',

        pass: '123'

    },

    {

        name: 'king1',

        pass: '234'

    }

];
console.log(objInArray.indexOf({

    name: 'king',

    pass: '123'

}));    // -1
var elementOfArray = objInArray[0];

console.log(objInArray.indexOf(elementOfArray));    // 0

从以上可以看出,对于数组包含对象的这种数组,indexOf方法并非是经过深度比较来得到对应的查找结果,仅仅是比较对应元素的引用。

4 数组连接

使用concat,要注意,使用concat之后会生成一个新的数组。

复制代码 代码如下:

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

var array3 = array1.concat(array2); // 实现数组连接之后,会创建出新的数组

console.log(array3);

5 类列表操作

用于添加元素,可分别使用push和unshift,移除元素可分别使用pop和shift。

复制代码 代码如下:

// push/pop/shift/unshift

var array = [2, 3, 4, 5];
// 添加到数组尾部

array.push(6);

console.log(array); // [2, 3, 4, 5, 6]
// 添加到数组头部

array.unshift(1);

console.log(array); // [1, 2, 3, 4, 5, 6]
// 移除最后一个元素

var elementOfPop = array.pop();

console.log(elementOfPop);   // 6

console.log(array); // [1, 2, 3, 4, 5]
// 移除第一个元素

var elementOfShift = array.shift();

console.log(elementOfShift);   // 1

console.log(array); // [2, 3, 4, 5]

6 splice方法

主要两个用途:
① 从数组中间位置添加和删除元素
② 从原有数组中,获取一个新数组

当然,两个用途是一气合成的,有些场景注重用途一,有些则注重用途二。

从数组中间位置添加和删除元素,splice方法为数组添加元素,需提供如下参数
① 起始索引(也就是你希望开始添加元素的地方)
② 需要删除的元素的个数或者是提取的元素的个数(添加元素时该参数设置为0)
③ 想要添加进数组的元素

复制代码 代码如下:

var nums = [1, 2, 3, 7, 8, 9];

nums.splice(3, 0, 4, 5, 6);

console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9] 

// 紧接着做删除操作或者提取新的数组

var newnums = nums.splice(3, 4);

console.log(nums);  // [1, 2, 3, 8, 9]

console.log(newnums);   // [4, 5, 6, 7]

7 排序

主要介绍reverse和sort两个方法。数组反转使用reverse,sort方法不仅可以用于简单排序,也可以用于复杂排序。

复制代码 代码如下:

// 反转数组

var array = [1, 2, 3, 4, 5];

array.reverse();

console.log(array); // [5, 4, 3, 2, 1]

我们先对字符串元素的数组进行排序

var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];

arrayOfNames.sort();

console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

我们对数字元素的数组进行排序

复制代码 代码如下:

// 如果数组元素时数字类型,sort()方法的排序结果就不能让人满意了

var nums = [3, 1, 2, 100, 4, 200];

nums.sort();

console.log(nums);  // [1, 100, 2, 200, 3, 4]

sort方法是按照字典顺序对元素进行排序的,因此它假定元素都是字符串类型,因此,即使元素是数字类型,也被认为是字符串类型。这时,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。

复制代码 代码如下:

var compare = function(num1, num2) {

    return num1 > num2;

};

nums.sort(compare);

console.log(nums);  // [1, 2, 3, 4, 100, 200]
var objInArray = [

    {

        name: 'king',

        pass: '123',

        index: 2

    },

    {

        name: 'king1',

        pass: '234',

        index: 1

    }

];

// 对数组中的对象元素,根据index进行升序

var compare = function(o1, o2) {

    return o1.index > o2.index;

};

objInArray.sort(compare);

console.log(objInArray[0].index < objInArray[1].index); // true

8 迭代器方法

主要包含forEach和every、some和map、filter
forEach相信大家都会,主要介绍一下其他四种方法。
every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法返回true。

复制代码 代码如下:

var nums = [2, 4, 6, 8];

// 不生成新数组的迭代器方法

var isEven = function(num) {

    return num % 2 === 0;

};

// 如果都是偶数,才返回true

console.log(nums.every(isEven)); // true
some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。

var isEven = function(num) {

    return num % 2 === 0;

};

var nums1 = [1, 2, 3, 4];

console.log(nums1.some(isEven)); // true

map和filter这两个方法都可以产生新数组,map返回的新数组是对原有元素应用某个函数得到的结果。如:

复制代码 代码如下:

var up = function(grade) {

    return grade += 5;

}

var grades = [72, 65, 81, 92, 85];

var newGrades = grades.ma

filter方法和every方法很类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。

复制代码 代码如下:

var isEven = function(num) {

    return num % 2 === 0;

};

var isOdd = function(num) {

    return num % 2 !== 0;

};

var nums = [];

for (var i = 0; i < 20; i++) {

    nums[i] = i + 1;

}

var evens = nums.filter(isEven);

console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

var odds = nums.filter(isOdd);

console.log(odds);  // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

三、总结

以上还存在某些方法在低级浏览器不支持的问题,还需要再采用其他方法进行兼容实现。

这些都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。

希望本文所述对大家的javascript程序设计有所帮助。

相关文章
  • JavaScript数组常用操作技巧汇总 2014-03-29

    这篇文章主要介绍了JavaScript数组常用操作技巧,以实例形式汇总了针对数组的查找.连接.排序及迭代等各种常见操作技巧,非常具有实用价值,需要的朋友可以参考下 本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用A

  • Jquery对数组的操作技巧整理 2013-11-23

    这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循

  • 7个perl数组高级操作技巧分享 2014-06-20

    这篇文章主要介绍了7个perl数组高级操作技巧,本文讲解了数组去重.数组合并.查找最大值.列表归并等内容,需要的朋友可以参考下 1.去除一个数组中的重复元素: 使用grep函数代码片段: 代码: my @array = ( 'a', 'b', 'c', 'a', 'd', 1, 2, 5, 1, 5 ); my %count; my @uniq_times = grep { ++$count{ $_ } < 2; } @array; 使用转换hash代码片段: 代码: 复制代码 代码如下: my

  • JS 模态对话框和非模态对话框操作技巧汇总 2014-02-14

    模态窗口javascript 技巧包括传值.打开.刷新以及相关实例学习,感兴趣的朋友可以参考下哈 模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());

  • javascript数组使用调用方法汇总 2014-03-02

    JS数组方法汇总 shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值

  • javascript数组去重的方法汇总 2014-12-17

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复.主要是理清思路和考虑下性能.以下方法,网上基本都有,这里只是简单地总结一下分享给大家. 四种算法来实现这个目的: 第一种: Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里

  • Javascript & JQuery常用操作备忘 2015-03-12

    ajax_1 方式一 $.ajax({ type: 'POST', url : '/show-choose-edit', data: JSON.stringify(map), async : true, timeout : 15000, contentType : "application/json; charset=utf-8", dataType: 'json', success: function (data) { }, error: function(e){ } }) 方式二

  • JavaScript表格常用操作方法汇总 2014-12-21

    这篇文章主要介绍了JavaScript表格常用操作方法,实例汇总了javascript中表格操作的创建.添加.删除.遍历等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例汇总了JavaScript表格常用操作方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • javascript 数组操作详解 2015-04-15

    这篇文章主要介绍了javascript 数组操作详解,需要的朋友可以参考下 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有

  • 19个Android常用工具类汇总 2015-02-20

    这篇文章主要介绍了19个Android常用工具类汇总,需要的朋友可以参考下 主要介绍总结的Android开发中常用的工具类,大部分同样适用于Java. 目前包括HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils.PreferencesUtils.JSONUtils.FileUtils.ResourceUtils.StringUtils.ParcelUtils.RandomUtils.ArrayUtils.ImageUtils.ListUtil

  • JavaScript 数组运用实现代码 2014-08-07

    复习一下JS中数组的运用.学习js数组的朋友可以参考下. 截取数组:slice(startIndex,endIndex): 返回数组中指定开始位置倒结束位置的数组.不改变原数组内容. 另外还有一个重要的方法,插入.删除或替换数组元素方法: splice(startIndex,howmany,element1~elementX):会修改原数组内容.参数含义分别为:"指定开始位置","删除多少个元素个数(可以为0)","添加到数组中的新元素(从startInd

  • JavaScript 数组的常用操作(转) 2014-11-08

    本文转载 http://www.cnblogs.com/zhangzt/archive/2011/04/01/2002213.html 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

  • Javascript数组操作函数总结 2013-10-09

    这篇文章主要给大家汇总介绍了Javascript数组操作函数,需要的朋友可以参考下 其实平时用的比较多的应该是push和pop,不过还是都记下来,以便后面使用. shift :删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift :将参数添加到原数组开头,并返回数组的长度 复制代码 代码如下: var a = [1,2,3,4,5]; var

  • jQuery操作表格(table)的常用方法.技巧汇总 2013-11-20

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率 以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover') }, function()

  • php常用文件操作函数汇总 2013-11-22

    这篇文章主要介绍了php常用文件操作函数,以实例形式汇总了常用的文件操作函数,包括文件的打开.写入.读取等常用操作,是非常实用的技巧,需要的朋友可以参考下 本文实例分析了php常用文件操作函数.分享给大家供大家参考.具体方法如下: 这里搜集了大量的php中文件操作函数如有文件打开,创建,删除,更变组,读取写文件,文件上传以及打开远程文件,把内容写入文件等实例. $fp=fopen("test.txt","r"); //以只读方式打开文件,将文件指针指向文件头 $fp

  • PHP数组遍历知识汇总(包含遍历方法.数组指针操作函数.数组遍历测速) 2014-01-27

    这篇文章主要介绍了PHP数组遍历知识汇总,本文包含3种遍历方法.7个数组指针操作函数.对3种数组遍历的速度测试等内容,需要的朋友可以参考下 一.数组遍历的3个方法介绍 1. foreach() foreach()是一个用来遍历数组中数据的最简单有效的方法. #example1: <?php $colors= array('red','blue','green','yellow'); foreach ($colorsas$color){ echo "Do you like $color? &

  • javascript列表框操作函数集合汇总 2014-02-08

    这篇文章主要是对javascript列表框操作函数进行了详细的汇总介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <script language="javascript"> /* 列表框互相操作函数集 */ //描述: 添加不重复列表框元素 function selAdd( srcList, dstList ) { var selectedIndex = new Array(); var count = 0; for ( i=0; i<srcList.optio

  • C# DatagridView常用操作汇总 2014-05-01

    这篇文章主要介绍了C# DatagridView常用操作汇总,罗列了一些常用的用法与技巧,需要的朋友可以参考下 本文汇总了C#中DatagridView的常用操作,有助于读者加深对C# DatagridView用法的理解,具体如下: 1.(最基本的技巧).获取某列中的某行(某单元格)中的内容 this.currentposition = this.dataGridView1.BindingContext [this.dataGridView1.DataSource, this.dataGridV

  • javascript数组操作(创建.元素删除.数组的拷贝) 2014-12-06

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

  • 关于php操作mysql执行数据库查询的一些常用操作汇总 2014-12-13

    本篇文章是对关于php操作mysql执行数据库查询的一些常用操作进行了详细的汇总介绍,需要的朋友参考下 php操作mysql步骤:1.$connect=mysql_connect('localhost','root','123456') or die('数据库连接失败.'mysql_error());链接mysql. 2.mysql_select_db('database',$connect)选择链接的数据库. 3.mysql_query('Set names gb2312');$sql = "