分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

JavaScript数组常用操作技巧汇总

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript数组常用操作技巧汇总，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

前言

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

一、性质

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

二、操作

1 判断数组类型

title"> 代码如下:
); // 构造器 // 注意：在IE6/7/8下是不支持Array.isArray方法的 alert(Array.isArray(array0)); // 考虑兼容性，可使用 alert(array1 instanceof Array); // 或者 alert(Object.prototype.toString.call(array1) === '[object Array]');

2 数组与字符串

非常简单：由数组转换为字符串，使用join；由字符串转换为数组，使用split。

title"> 代码如下:
Hello','World'].join(',')); // Hello,World // split - 由字符串转换为数组，使用split console.log('Hello World'.split(' ')); // ["Hello","World"]

3 查找元素

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

title"> 代码如下:
); // 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 数组连接

@R_197_10499@ncat，要注意，@R_197_10499@ncat之后会生成一个新的数组。

title"> 代码如下:
6]; var array3 = array1.concat(array2); // 实现数组连接之后，会创建出新的数组 console.log(array3);
5 类列表操作

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

title"> 代码如下:
5];

// 添加到数组尾部 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） ③ 想要添加进数组的元素

title"> 代码如下:
s.splice(3,6); console.log(nums); // [1,6,9] // 紧接着做删除操作或者提取新的数组 var newnums = nums.splice(3,4); console.log(nums); // [1,9] console.log(newnums); // [4,7]

7 排序

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

title"> 代码如下:
5]; array.reverse(); console.log(array); // [5,1] 我们先对字符串元素的数组进行排序 var arrayOfNames = ["David","Mike","Cynthia","Clayton","Bryan","Raymond"]; arrayOfNames.sort(); console.log(arrayOfNames); // ["Bryan","David","Raymond"]
我们对数字元素的数组进行排序
title"> 代码如下:
[3,1,100,200]; nums.sort(); console.log(nums); // [1,200,4]
sort方法是按照字典顺序对元素进行排序的，因此它假定元素都是字符串类型，因此，即使元素是数字类型，也被认为是字符串类型。这时，可以在调用方法时传入一个@R_197_9832@函数，排序时，sort()方法将会根据该函数比较数组中两个元素的大小，从而决定整个数组的顺序。
title"> 代码如下:
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。

title"> 代码如下:
{ 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,4]; console.log(nums1.some(isEven)); // true

@H_931_0@map和filter这两个方法都可以产生新数组，map返回的新数组是对原有元素应用某个函数得到的结果。如：
title"> 代码如下:
E) { return grade += 5; } var grades = [72,65,81,92,85]; var newGrades = grades.ma
filter方法和every方法很类似，传入一个返回值为布尔类型的函数。和every()方法不同的是，当对数组中的所有元素应用该函数，结果均为true时，该方法并不返回true，而是返回一个新数组，该数组包含应用该函数后结果为true的元素。
title"> 代码如下:
{ 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,10,12,14,16,18,20] var odds = nums.filter(isOdd); console.log(odds); // [1,9,11,13,15,17,19]

三、总结

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

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

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

大佬总结

以上是大佬教程为你收集整理的JavaScript数组常用操作技巧汇总全部内容，希望文章能够帮你解决JavaScript数组常用操作技巧汇总所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：常用技巧操作数组
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap