JavaScript数组常用操作技巧汇总
本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下：
前言
相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作，如$.isArray，_.some，_.find等等方法。这里无非是对原生js的数组操作多了一些包装。
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。
一、性质
JavaScript中的数组是一种特殊的对象，用来表示偏移量的索引是该对象的属性，索引可能是整数。然而，这些数字索引在内部被转换为字符串类型，这是因为JavaScript对象中的属性名必须是字符串。
二、操作
1 判断数组类型
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。
console.log(['Hello', 'World'].join(',')); // Hello,World
// split - 由字符串转换为数组，使用split
console.log('Hello World'.split(' ')); // ["Hello", "World"]
3 查找元素
相信大家都常用字符串类型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 array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后，会创建出新的数组
console.log(array3);
5 类列表操作
用于添加元素，可分别使用push和unshift，移除元素可分别使用pop和shift。
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）
③ 想要添加进数组的元素
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"]
我们对数字元素的数组进行排序
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]
sort方法是按照字典顺序对元素进行排序的，因此它假定元素都是字符串类型，因此，即使元素是数字类型，也被认为是字符串类型。这时，可以在调用方法时传入一个大小比较函数，排序时，sort()方法将会根据该函数比较数组中两个元素的大小，从而决定整个数组的顺序。
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 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返回的新数组是对原有元素应用某个函数得到的结果。如：
return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma
filter方法和every方法很类似，传入一个返回值为布尔类型的函数。和every()方法不同的是，当对数组中的所有元素应用该函数，结果均为true时，该方法并不返回true，而是返回一个新数组，该数组包含应用该函数后结果为true的元素。
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如何使用bind指定接收者,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了关于微信小程序bug记录与解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
用了一年时间的TypeScript了,下面这篇文章主要给大家介绍了关于TypeScript中互斥类型实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的实用技巧指南,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了JS实现数组去重复值的方法,结合实例形式分析了JS通过数组遍历、运算等方法实现去重复值的操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了关于小程序优化的一些建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
下面小编就为大家带来一篇gulp教程_从入门到项目中快速上手使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了JavaScript动态修改背景颜色的方法,涉及javascript操作鼠标事件及样式的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论