JavaScript数组方法使用与数组常用处理

ManiacM

已于 2023-04-02 11:52:28 修改

阅读量542

点赞数

文章标签： javascript html

于 2022-10-02 00:07:42 首次发布

本文链接：https://blog.csdn.net/Hjdjdhg/article/details/127135978

版权

代码直接粘贴就可以运行，效果可以更直观的了解方法对数组的处理

一.数组方法

pop()删除

方法从数组中删除最后一个元素并返回删除的值

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayPop"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayPop = testArray.pop();
      document.getElementById("testArray").innerHTML="pop后原数组："+testArray;
      document.getElementById("testArrayPop").innerHTML="pop返回值："+testArrayPop;
    }
<script/>

delete运算符，数组属于对象，其中的元素就可以使用delete运算符删除，但是delete是将元素值改为undefined，这会在数组留下未定义的空洞，不建议使用

//html
<body>
 <button @click="test">test</button>
 <div id="testArrayPop"></div>
 <div id="testArrayDelete"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      testArray.pop();
      document.getElementById("testArrayPop").innerHTML="pop后原数组："+testArray;
      testArray = ["o", "1", "2", "3"];
      delete testArray[testArray.length-1];
      document.getElementById("testArrayDelete").innerHTML="delete数组最后一个元素后的原数组："+testArray;
    }
</script>

push()添加

方法向数组结尾后添加新的元素并返回新数组的长度

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayPush"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayPush=testArray.push("test","test1");
      document.getElementById("testArray").innerHTML="push后原数组："+testArray;
      document.getElementById("testArrayPush").innerHTML="push返回值："+testArrayPush;
    }
<script/>

shift()删除

方法会删除首个数组元素并返回被删除的字符串

//html
<body>
 <button @click="test">test</button>
 <div id="testArray"></div>
 <div id="testArrayShift"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayShift=testArray.shift();
      document.getElementById("testArray").innerHTML="shift后原数组："+testArray;
      document.getElementById("testArrayShift").innerHTML="shift返回值："+testArrayShift;
    }
<script/>

unshitf()添加

方法向数组开头前添加新元素并返回新数组的长度

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayUnshift"></div>
</body>

//js
<script>
function test(){
      let t=[1,2,3]
      let testArray = ["o", "1", "2", "3"];
      let testArrayUnshift=testArray.unshift(t);
      document.getElementById("testArray").innerHTML="unshift后原数组："+testArray;
      document.getElementById("testArrayUnshift").innerHTML="unshift返回值："+testArrayUnshift;
    }
<script/>

splice()拼接

splice(x,y,z)方法可用于拼接数组并返回包含已删除项的数组，第一个参数x定义了应添加新元素的位置下标，第二个参数y定义应删除多少元素。第三个参数z可选，定义添加的新元素，如果第二个结束参数y被省略，splice会切出数组的剩余部分

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArraySplice"></div>
</body>

//js
<script>
function test(){
      let t=["a","b","c"]
      let testArray = ["o", "1", "2", "3"];
      //从下标2开始，删除2个，并拼接数组t
      let testArraySplice=testArray.splice(2,2,t);
      document.getElementById("testArray").innerHTML="splice后原数组："+testArray;
      document.getElementById("testArraySplice").innerHTML="splice返回值："+testArraySplice;
    }
</script>

slice()复制

slice(start,end)复制某个数组片段元素并返回一个新数组，start开始下标，end可选结束参数，省略，则从start开始复制到结尾。

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArraySlice"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArraySlice=testArray.slice(2);
      document.getElementById("testArray").innerHTML="slice后原数组："+testArraySlice;
      document.getElementById("testArraySlice").innerHTML="slice后数组长度："+testArraySlice.length;
    }
</script>

concat()合并

方法合并连接现有数组并返回新数组

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayConcat"></div>
</body>

//js
<script>
function test(){
      let t=["a","b","c"];
      let t1=[0]
      let testArray = ["o", "1", "2", "3"];
      let testArrayConcat=testArray.concat(t,t1);
      document.getElementById("testArray").innerHTML="concat后原数组："+testArrayConcat;
      document.getElementById("testArrayConcat").innerHTML="concat后数组长度："+testArrayConcat.length;
    }
</script>

sort()排序

方法以字母顺序对数组进行排序，数字按照小到大，注意元素必须为字符串而不是纯数字

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArraySort"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "3", "2"];
      let testArraySort=testArray.sort();
      document.getElementById("testArray").innerHTML="sort后原数组："+testArray;
      document.getElementById("testArraySort").innerHTML="sort返回值："+testArraySort;
    }
</script>

reverse()反转

方法反转数组中的元素

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayReverse"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayReverse=testArray.reverse();
      document.getElementById("testArray").innerHTML="reverse后原数组："+testArray;
      document.getElementById("testArrayReverse").innerHTML="reverse返回值："+testArrayReverse;
    }
</script>

forEach()循环

forEach(value,index,array)方法为每一个存在数组元素调用一次函数，接受三个可选参数value元素值，index元素下标，array数组本身，不会更改原始数组

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayEach"></div>
</body>

//js
<script>
function test(){
      let accept=[];
      let testArray = ["o", "1", "2", "3"];
      //对数组每一个元素执行加1操作，将新值存入accept接收数组
      testArray.forEach((value,index)=>{accept[index]=value+1});
      document.getElementById("testArray").innerHTML="forEach后原数组："+testArray;
      document.getElementById("testArrayEach").innerHTML="forEach后数组："+accept;
    }
</script>

map()循环

map(value,index,array)方法对每一个数组元素调用一次函数来创建新数组，不会更改原始数组，map不会对没有值的数组元素执行函数，如null，undefined

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayMap"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayMap=testArray.map((value)=>{return  value+1});
      document.getElementById("testArray").innerHTML="map后原数组："+testArray;
      document.getElementById("testArrayMap").innerHTML="map返回值："+testArrayMap;
    }
</script>

filter()过滤

filter(value,index,array)方法创建一个包含符合条件的数组元素的新数组并返回

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayFilter"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayFilter=testArray.filter((value)=>{return value !== "o"});
      document.getElementById("testArray").innerHTML="filter后原数组："+testArray;
      document.getElementById("testArrayFilter").innerHTML="filter返回值："+testArrayFilter;
    }
</script>

reduce()total

reduce(total,value,index,array)方法从左到右在每个数组元素上运行函数，最后返回结果，不会减少原始数组，其中total总和是函数执行的初始值或先前返回的结果，可以在执行之前就定义一个total初始值。与之对应的有一个reduceRight()方法，这个方法和reduce区别从右到左在每个数组元素上运行函数

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayReduce"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayReduce=testArray.reduce((total,value)=>{ return total + value;});
      document.getElementById("testArray").innerHTML="reduce后原数组："+testArray;
      document.getElementById("testArrayReduce").innerHTML="reduce返回值："+testArrayReduce;
    }
</script>

every()验证

every(value,index,array)方法检查所有数组元素值是否符合条件并返回true或false

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayEvery"></div>
</body>

//js
<script>
function test(){
      let l=Object.prototype.toString;
      let testArray = ["o", "1", "2", "3"];
      //检测每个数组元素是否为字符串
      let testArrayEvery=testArray.every((value)=>{ return l.call(value)===l.call("test")});
      document.getElementById("testArray").innerHTML="every后原数组："+testArray;
      document.getElementById("testArrayEvery").innerHTML="every返回值："+testArrayEvery;
    }
</script>

some()验证

some(value,index,array)方法检查存在数组元素值是否符合条件并返回true或false

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArraySome"></div>
</body>

//js
<script>
function test(){
      let l=Object.prototype.toString;
      let testArray = ["o", "1", "2", "3"];
      //检测是否存在数组元素是否为数字
      let testArraySome=testArray.some((value)=>{ return l.call(value)===l.call(0)});
      document.getElementById("testArray").innerHTML="some后原数组："+testArray;
      document.getElementById("testArraySome").innerHTML="some返回值："+testArraySome;
    }
</script>

indexOf()检索

indexOf(item,start)方法在数组中搜索元素值并返回其下标，item要检索的元素值，start可选定义从哪里开始到结尾，可以是负值，如果未找到，方法返回 -1，如果有多个，返回第一个下标。lastIndexOf()与之对应，但是检索顺序相反。

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayOf"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "2", "3"];
      let testArrayOf=testArray.indexOf("o");
      document.getElementById("testArray").innerHTML="indexOf后原数组："+testArray;
      document.getElementById("testArrayOf").innerHTML="indexOf返回值："+testArrayOf;
    }
</script>

find()检索

find(value,index,array)方法返回符合条件的第一个数组元素的值。

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayFind"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "1", "1", "3"];
      let testArrayFind=testArray.find((value)=>{return value==="1"});
      document.getElementById("testArray").innerHTML="find后原数组："+testArray;
      document.getElementById("testArrayFind").innerHTML="find返回值："+testArrayFind;
    }
</script>

findIndex()检索

findIndex(value,index,array)方法返回符合条件的第一个数组元素的索引下标。

//html
<body>
<button @click="test">test</button>
<div id="testArray"></div>
<div id="testArrayFindIndex"></div>
</body>

//js
<script>
function test(){
      let testArray = ["o", "2", "2", "3"];
      let testArrayFindIndex=testArray.findIndex((value)=>{return value==="2"});
      document.getElementById("testArray").innerHTML="findIndex后原数组："+testArray;
      document.getElementById("testArrayFindIndex").innerHTML="findIndex返回值："+testArrayFindIndex;
    }
</script>

二.数组常用处理

1.数组中纯数字的排序

我们知道数组中sort方法可以对数组中元素字符串排序，但是sort对纯数字元素是无法排序的，如何用sort来排序纯数字，可以用比较函数来控制排序纯数字元素，当sort()函数比较两个值时，会将值发送到比较函数，并根据所返回的值为负、零或正值对这些值进行排序

//比较函数，a-b为正，顺序为a，b；a-b为负，顺序为b，a，若为零，顺序为a，b
数组名.sort(function(a, b){return a-b})


以随机顺序排序数组
数组名.sort(function(a, b){return 0.5 - Math.random()});

2.数组中纯数字的最大最小值

Math.max.apply(null, 数组名);//查询并返回数组中最大值
Math.min.apply(null, 数组名);//查询并返回数组中最小值

3.数组中对象的排序

解决方法是通过比较函数来对比对象的某一个属性值来进项排序

对象名.sort(function(a, b){return a.属性值- b.属性值})

代码直接粘贴就可以运行，效果可以更直观的了解方法对数组的处理

有疑问评论区留言，Finish！

ManiacM

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript数组方法使用与数组常用处理

indexOf(item,start)方法在数组中搜索元素值并返回其下标，item要检索的元素值，start可选定义从哪里开始到结尾，可以是负值，如果未找到，方法返回 -1，如果有多个，返回第一个下标。我们知道数组中sort方法可以对数组中元素字符串排序，但是sort对纯数字元素是无法排序的，如何用sort来排序纯数字，可以用比较函数来控制排序纯数字元素，当sort()函数比较两个值时，会将值发送到比较函数，并根据所返回的值为负、零或正值对这些值进行排序。方法向数组结尾后添加新的元素并返回新数组的长度。
复制链接

扫一扫