JavaScript中数组常见操作技巧

效果图如下所示：

标签中打开查看清晰大图

下面介绍JavaScript中的数组对象遍历、读写、排序等操作以及与数组相关的字符串处理操作

创建数组

一般使用数组字面量[]创建新数组，除非想要创建指定长度的数组

使用push()动态创建二维数组实例

90

标签下所有

元素 var lis = sourceList.querySelectorAll('li'); // 取得

标签

元素 var bs = sourceList.querySelectorAll('li b'); var data = []; for (var i = 0,len = lis.length; i < len; i++) { // 法一：先对data添加一维空数组，使其成为二维数组后继续赋值 data.push([]); // 分割文本节点，提取城市名字 var newNod = lis[i].firstChild.splitText(2); data[i][0] = lis[i].firstChild.nodeValue; // 使用+转换数字 data[i][1] = +bs[i].innerHTML; // 法二：先对一维数组赋值，再添加到data数组中，使其成为二维数组 var li = lis[i]; var city = li.innerHTML.split("空气质量：")[0]; var num = +li.innerText.split("空气质量：")[1]; data.push([city,num]); }

String.prototype.split() 方法用于把一个字符串分割成字符串数组。 split() 方法不改变原始字符串。

li.innerHTML.split("空气质量：")-----这个拆成的数组为["北京"，"90"]的数组，再取数组

的第一项，即城市值。

Text.splitText()方法会将一个文本节点分成两个文本节点，原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点

querySelector()方法接收一个CSS选择符，返回与改模式匹配的第一个元素，如果没有找到，则返回null

querySelectorAll()方法接受一个CSS选择符，返回一个NodeList对象，如果没有找到，则为空

读取和设置

存取数组元素

一维数组

arr[下标索引]

多维数组

arr[外层数组下标][内层元素下标]

length属性

添加新项

arr[array.length] = []

清空数组或清除

arr.length = 0 || (少于项数的数值)

判断数组非空

if(arr.length) {}

数组遍历

遍历数组不使用for in，因为数组对象可能存在数字以外的属性，这种情况下for in不会得到正确结果

推荐使用forEach()方法

使用传统的for循环

应用

' + item[1] + ''; }); const numbers = [1,2,3,4]; let sum = 0; numbers.forEach(function(numer) { sum += number; }); console.log(sum);

引申1：在ES6中，可以使用let或const声明所有局部变量，不使用var关键字。默认使用const，除非需要重新分配变量。const用于声明常量，let是新的声明变量方式，具有块级作用域即由花括号封闭起来，这样就不用考虑各种嵌套下变量的访问问题了。

详情见

引申2：可以使用箭头函数=>写出更简短的函数

{ });

数组排序

sort()方法

默认情况下通过调用数组项toString()方法转型，然后比较字符串顺序（ASCII码）从小到大排列数组为了避免类似数值字符串比较时，"10"会排在"5"的前面，sort()接受一个比较函数compare()参数，按数值大小比较

b) { return 1; } else { return 0; } }

该函数返回值小于0，则 a 排在 b前面；如果返回值大于0，则 b 排在 a 前面；如果返回值等于0，则 a 和 b 的相对位置不变。最后返回的是升序数组，我们也可以通过交换比较函数返回的值产生降序排序的结果。另外如果比较的是数，则可以简化compare()函数如下(其中a-b升序，b-a降序)

运用实例

可以特定对像某个属性进行排序

可以对多维数组某一列进行排序

输出到控制台，用于调试直观了然

reverse()方法

返回一个逆向排序的数组

其他数组操作方法功能分类

数组元素的添加

添加到数组结尾，并返回数组新长度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]); // 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 arrayObj.splice(insertPos,[item1[,item2[,. . . [,itemN]]]]); // 将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。第二个参数不为0（要删除的项数）时则可以实现替换的效果。 arr[array.length] = [] // 使用length属性在数组末尾添加新项

数组元素的删除

自动前移 arrayObj.splice(deletePos,deleteCount); // 删除从指定位置deletePos开始的指定数量deleteCount的元素，返回所移除的元素组成的新数组

数组元素的截取和合并

包括 endPos 对应的元素，如果省略 endPos 将复制 startPos 之后的所有元素 arrayObj.concat([item1[,itemN]]]]); // 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

数组的拷贝

数组指定元素的索引（可以配合splice()使用）

数组的字符串化

可以看做split()的逆向操作

数组值求和

函数，将其减少为单个值，返回函数累计处理的结果 var total = [0,1,3].reduce(function(sum,value) { return sum + value; },0); // total is 6

总结

以上所述是小编给大家介绍的JavaScript中数组常见操作技巧。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。