效果图如下：

Tip:右键单击以在新选项卡中打开，查看清晰的大图像

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

创建数组

通常，数组文字[]用于创建新数组，除非您想要创建具有指定长度的数组

//good var arr=[]；var arr=['红色'，'绿色'，'蓝色']；var arr=[[北京'，90]，[上海'，50]，[广州'，50]]；//错误var arr=新对象()；使用push()动态创建2d阵列实例ul id=' source '北京空气质量：90/li/ul

var source list=document . queryselector(' # source ')；//获取ul标记下的所有li元素var lis=source list . queryselectorall(' Li ')；//获取ul标记下的所有元素varbs=source list . queryselectorall(' Li b ')；var数据=[]；for (var i=0，len=lis.length我透镜；I) {//方法1:先给数据添加一个一维空数组，使其成为二维数组，然后继续赋值data . push([])；//划分文本节点，提取城市名称var new nod=lis [I]。first child . split text(2)；data[I][0]=lis[I]. first child . node value；//使用转换号数据[i][1]=bs[i]。innerHTML//方法2:给一维数组赋值，然后添加到数据数组中，使其成为二维数组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('空气质量：')-这个split数组是一个['Beijing '，' 90']的数组，然后取这个数组

的第一项，即城市价值。

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

querySelector()方法接收CSS选择器，返回与架构更改匹配的第一个元素，如果找不到，则返回null。

方法接受一个CSS选择器并返回一个节点列表对象。如果没有找到，它就是空的

阅读和设置

访问数组元素

一维阵列

Arr[下标索引]

多维数组

Arr[外部数组下标][内部元素下标]

长度属性

添加新项目

arr[array.length]=[]

空数组或清除

Arr.length=0 ||(数值小于项目数)

确定数组不是空的

if(arr.length) {}

数组遍历

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

建议使用forEach()方法

使用传统的for循环

for(var i=0，len=arr.length我透镜；我){ }为.infor(Arrayobj中的var索引){ var obj=Arrayobj[index]；} forEach()arr.forEach(函数回调(currentValue，index，array){//你的迭代器}[，this arg])；app应用

data.forEach(函数(项，索引){ Li=document . create element(' Li ')；fragment . appendchild(Li)；Li . innerhtml=' no . ' Digitozhdigit(索引1)'名称：'项目[0]'空气质量：''项目[1]' '；});const numbers=[1，2，3，4]；设sum=0；numbers . foreach(function(number){ sum=number；});console . log(sum)；扩展1:在ES6中，所有的局部变量都可以用let或者const来声明，不使用var关键字。默认情况下使用Const，除非您需要重新分配变量。Const用来声明常量，let是一种新的声明变量的方式。如果有块级作用域，则用花括号封闭，不需要考虑各种嵌套变量的访问问题。

var foo=trueif(foo){ let bar=foo * 2；bar=某物(bar)；console . log(bar)；} console . log(bar)；//详情请参考https://github.com/getify/You-Dont-Know-JS/blob/master/scope & closes/CH3 . MD

扩展2:你可以使用箭头函数来写一个更短的函数

箭头函数

numbers . foreach(number={ })；数组排序

Sort()方法

默认情况下，调用数组项toString()方法进行转换，然后比较字符串顺序(ASCII代码)。阵列从小到大排列。为了避免类似的数字字符串比较，“10”将排列在“5”之前，sort()接受一个比较函数compare()参数，并根据数值进行比较。

函数compare(a，b) { if (a，b){ return-1；} else if(a b){ return 1；} else { return 0；}}如果该函数的返回值小于0，A将排在B之前；如果返回值大于0，B排在A之前；如果返回值等于0，A和B的相对位置不会改变。最后，返回升序数组，我们还可以交换比较函数返回的值来产生降序排序结果。此外，如果比较数字，可以将compare()函数简化如下(其中a-b是升序，b-a是降序)

函数比较(a，b) {返回a-b；}应用示例

您可以特别像属性一样排序

var object list=[]；function Persion(姓名、年龄){ this.name=namethis.age=年龄；} object list . push(new Persion(' jack '，20))；object list . push(new Persion(' Tony '，25))；object list . push(new Persion(' stone '，26))；object list . push(new Persion(' Mandy '，23))；//排序对象列表。根据年龄排序(函数(a，b){返回a . age-b . age })；您可以对多维数组的列进行排序

Var aqiData=[['北京'，90]，['上海'，50]，['福州'，10]，['广州'，50]，['成都'，90]，['Xi '安'，100]]；aqiData.sort(函数(a，b) {返回a[1]-b[1]；});console . table(AqiData)；//输出到控制台的一个表中，用于调试直观的reverse()方法

以相反的顺序返回数组

var值=[1，2，3，4，5]；values . reverse()；警报(值)；//5，4，3，2，1其他数组操作方法的功能分类

添加数组元素

arrayObj。push([item 1[item 2]。[ItemN]]])；//在数组末尾添加一个或多个新元素，并返回数组arrayobj.unshift的新长度([item1 [item2 [.[itemn]])；//向数组中添加一个或多个新元素，数组中的元素自动向后移动，返回数组arrayobj.split的新长度(insert pos，0，[item1 [，item2 [，[，itemn]]])；//在数组的指定位置插入一个或多个新元素，插入位置的元素会自动向后移动，返回' '。如果第二个参数不是0(要删除的项目数)，则可以实现替换效果。Arr[array.length]=[] //使用length属性在数组末尾添加一个新项并删除数组元素

arrayobj . pop()；//去掉最后一个元素，返回arrayObj.shift()的值；//去掉前面的元素，返回元素值，数组中的元素会自动向前移动arrayobj。拼接(删除pos，删除计数)；//从指定位置deletePos开始删除指定个数deleteCount的元素，并返回由被删除元素组成的新数组元素的截取和合并

arrayObj.slice(startPos，[end pos])；//以数组的形式返回数组的一部分。请注意，不包括对应于端点的元素。如果省略endPos，将复制startPos之后的所有元素。arrayobj.concat ([item1 [，item2 [，[，itemn]])；//将多个数组(也可以是字符串，或者数组和字符串的混合)连接成一个数组，并返回连接的新数组的副本

arrayobj . slice(0)；//返回数组的副本，注意它是一个新数组，而不是指向arrayobj . concat()；//返回数组的副本数组，注意它是一个新数组，而不是指向数组中指定元素的索引(它可以与splice()一起使用)

由…改编index of (searchelement [，from index=0])//返回数组中第一个找到的元素(使用同余比较器===)的索引位置；如果没有找到，则返回-1。fromIndex决定从哪里开始搜索，可以省略。LastindexOff()//与indexof()相同，只是从末尾开始寻找数组的串列

arrayObj.join(分隔符)；//返回一个字符串，该字符串通过中间的分隔符连接数组中每个元素的值。可以认为是split()的反向操作

数组值的总和

数组。Reduce (Function(累加器，当前值，当前索引，数组)，初始值)//对累加器和数组中的每个元素应用一个函数(从左到右)，将其缩减为单个值，并返回函数累加处理的结果var total=[0。1, 2, 3].reduce(函数(sum，value) {返回sum值；}, 0);//总计为6摘要

以上是边肖介绍的JavaScript中数组的常用操作技巧。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！