时间:2021-05-02
本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下:
前言
相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。
一、性质
JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。
二、操作
1 判断数组类型
复制代码 代码如下: var array0 = []; // 字面量2 数组与字符串
非常简单:由数组转换为字符串,使用join;由字符串转换为数组,使用split。
复制代码 代码如下: // join - 由数组转换为字符串,使用join3 查找元素
相信大家都常用字符串类型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];
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)
③ 想要添加进数组的元素
7 排序
主要介绍reverse和sort两个方法。数组反转使用reverse,sort方法不仅可以用于简单排序,也可以用于复杂排序。
复制代码 代码如下: // 反转数组
我们对数字元素的数组进行排序
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) {
filter方法和every方法很类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。
三、总结
以上还存在某些方法在低级浏览器不支持的问题,还需要再采用其他方法进行兼容实现。
这些都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。
希望本文所述对大家的javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
javascript数组去重方法汇总Array.prototype.unique1=function(){varn=[];//一个新的临时数组for(vari=
本文实例汇总了JavaScript表格常用操作方法。分享给大家供大家参考。具体如下:无标题页varmytable=null;window.onload=func
昨天出去前端面试又失败,期间问了个有关于数组对象的问题,下面就这类问题总结下JavaScript常用的数组操作方法。一、何为数组(Array)对象数组对象是使用
javascript数组排序汇总//排序算法window.onload=function(){vararray=[0,1,2,44,4,324,5,65,6,6
本文实例讲述了javascript数组去重常用方法。分享给大家供大家参考,具体如下:数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法