前言

相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。

这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。

1、性质

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

2、操作

2.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.2 数组与字符串

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

// join - 由数组转换为字符串,使用join
console.log(['Hello', 'World'].join(',')); // Hello,World
// split - 由字符串转换为数组,使用split
console.log('Hello World'.split(' ')); // ["Hello", "World"]

2.3 查找元素

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

// indexOf - 查找元素
console.log(['abc', 'bcd', 'cde'].indexOf('bcd')); // //
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)); //

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

2.4 数组连接

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

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后,会创建出新的数组
console.log(array3);

2.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); //
console.log(array); // [1, 2, 3, 4, 5] // 移除第一个元素
var elementOfShift = array.shift();
console.log(elementOfShift); //
console.log(array); // [2, 3, 4, 5]

2.6 splice方法

主要两个用途:

1> 从数组中间位置添加和删除元素

2> 从原有数组中,获取一个新数组

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

从数组中间位置添加和删除元素,splice方法为数组添加元素,需提供如下参数

1> 起始索引(也就是你希望开始添加元素的地方)

2> 需要删除的元素的个数或者是提取的元素的个数(添加元素时该参数设置为0)

3> 想要添加进数组的元素

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]

2.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

2.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]

3. 总结

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

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

参考:

《数据结构与算法JavaScript描述》

JavaScript数组常用操作的更多相关文章

  1. JavaScript数组常用操作总结

    我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一下,方便日后工作的时候查找使用! 一. ...

  2. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  3. Linux Shell数组常用操作详解

    Linux Shell数组常用操作详解 1数组定义: declare -a 数组名 数组名=(元素1 元素2 元素3 ) declare -a array array=( ) 数组用小括号括起,数组元 ...

  4. 数组toString()方法,数组常用操作

    int[] arr ={1,2,3,4,5}; String arrString = Arrays.toString(arr); //输出[I@7150bd4d System.out.println( ...

  5. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...

  6. javascript数组常用的遍历方法

    本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 本文主要介绍数组常见遍历方法:forEach.m ...

  7. 快学Scala 第三课 (定长数组,变长数组, 数组循环, 数组转换, 数组常用操作)

    定长数组定义: val ar = new Array[Int](10) val arr = Array("aa", "bb") 定长数组赋值: arr(0) = ...

  8. java基础之数组常用操作

    常用的对数组进行的操作 1.求数组中最大值,最小值 思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大,则把这个值赋给max.最小值同样 public cla ...

  9. JavaScript循环和数组常用操作

    while循环 语法: do while循环 语法:do{循环体}while(条件表达式); 特点:do while循环不管条件是否成立,无论如何循环体都会执行一次. 使用场合:用户输入密码,如果密码 ...

随机推荐

  1. git使用记录

    唔,git有本地版本管理功能,所以,这个完全是可以拿来自己做版本管理的.所以有必要学习一下,另外,在oschina上开了个账户,用来管理自己一些代码,也是增加自己学习git的动力. 1. 使用clon ...

  2. PHP实现Restful风格的API

    Restful是一种设计风格而不是标准,比如一个接口原本是这样的: http://www1.qixoo.com/user/view/id/1表示获取id为1的用户信息,如果使用Restful风格,可以 ...

  3. 深入浅出Redis04使用Redis数据库(lists类型)

    一  lists类型及操作 List是一个链表结构,主要功能是push,pop,获取一个范围的所有值等等,操作中key理解为链表的名字. Redis的list类型其实就是一个每个子元素都是sring类 ...

  4. jquery------.resizable()的使用

    index.jsp //加上这两行代码,右下角会有样式效果<link rel="stylesheet" href="//code.jquery.com/ui/1.1 ...

  5. Jsonp简单认识(后端使用的是asp.net mvc)

    一.Jsonp简介:由于浏览器基于安全有同源策略(同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)机制,所以前端无法使用Ajax来获取来获取其他域名下返回的数据,而Jsonp可 ...

  6. Hbase Shell常用命令

    hbase shell常用的操作命令有create,describe,disable,drop,list,scan,put,get,delete,deleteall,count,status等,通过h ...

  7. ASP+ACCESS手工注入详解

    SQL注入这么长时间,看见有的朋友还是不会手工注入,那么我来演示一下.高手略过. 我们大家知道,一般注入产生在没经过虑的变量上,像ID?=XX这样的. 下面以这个网址为例: http://zsb.xx ...

  8. MySQL 高效分页

    create PROCEDURE USP_GetByPager( _pageindex int, _pagesize int ) BEGIN )*_pagesize; select * from A ...

  9. 转 XenServer、XenCenter安装测试

    本文转自:http://blog.sina.com.cn/s/blog_5611597901014ze4.html 系统环境:win7 64bit  vmware-8.0.1 镜像文件:XenServ ...

  10. 杭赛.Triangle(数学推导)

    Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...