JavaScript数组常用操作技巧汇总

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

前言

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

一、性质

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

二、操作

1 判断数组类型

代码如下:

2 数组与字符串

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

代码如下:

3 查找元素

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

代码如下:

// 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之后会生成一个新的数组。

代码如下:
5 类列表操作

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

代码如下:

// 添加到数组尾部 array.push(6); console.log(array); // [2,6]

// 添加到数组头部 array.unshift(1); console.log(array); // [1,6]

// 移除最后一个元素 var elementOfPop = array.pop(); console.log(elementOfPop); // 6 console.log(array); // [1,5]

// 移除第一个元素 var elementOfShift = array.shift(); console.log(elementOfShift); // 1 console.log(array); // [2,5]

6 splice方法

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

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

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

代码如下:

7 排序

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

代码如下:
我们对数字元素的数组进行排序
代码如下:
sort方法是按照字典顺序对元素进行排序的,因此它假定元素都是字符串类型,因此,即使元素是数字类型,也被认为是字符串类型。这时,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。
代码如下:
num2; }; nums.sort(compare); console.log(nums); // [1,200]

var objInArray = [ { name: 'king', pass: '123', index: 2 }, 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。

代码如下:

some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。 var isEven = function(num) { return num % 2 === 0; }; var nums1 = [1,4]; console.log(nums1.some(isEven)); // true

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

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

三、总结

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)