JavaScript数组方法整理

最新推荐文章于 2024-07-11 20:55:36 发布

m0_60609792

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量80

点赞数

分类专栏： javascript对象方法文章标签： javascript html

原文链接：https://www.runoob.com/jsref/jsref-obj-array.html

版权

javascript对象方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

数组内部

增

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

<p id="demo">单击按钮给数组添加新的元素:</p>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction(){

fruits.push("Kiwi","Lemon","Pineapple")

var x=document.getElementById("demo");

//返回值是10

var length=fruits.push("Kiwi","Lemon","Pineapple")

x.innerHTML=length;

}

</script>

输出返回值为：length=10

删

pop()

删除数组的最后一个元素并返回删除的元素。

shift()

删除并返回数组的第一个元素。

<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction(){

var delell = fruits.shift();

var x=document.getElementById("demo");

x.innerHTML= '删除后数组为：' + fruits;

document.getElementById("demo2").innerHTML= '删除的元素是：' + delell;

}

//输出

删除后数组为：Orange,Apple,Mango

删除的元素是：Banana

改

splice()

从数组中添加或删除元素。

<body>

<p id="demo">点击按钮向数组添加元素。</p>

<p id="demo1">delitem</p>

function myFunction(){

var fruits = ["Banana", "Orange", "Apple", "Mango"];

参数：删除的起始坐标，删除的个数，替换删除元素的新元素

返回值：被删除的元素数组，当删除元素个数为0时，返回空数组

var delitem=fruits.splice(1,2,"Lemon","Kiwi");

var x=document.getElementById("demo");

x.innerHTML=fruits;

var y=document.getElementById("demo1")

y.innerHTML=delitem.toString()

}

</script>

</body>

输出结果

原数组：[Banana,Lemon,Kiwi,Mango]

被删除的元素：[Orange,Apple]

sort()

对数组的元素进行排序。

<p id="demo">单击按钮升序排列数组。</p>

function myFunction(){

var points = [40,100,1,5,25,10];

points.sort(function(a,b){return a-b}).reverse();

var x=document.getElementById("demo");

x.innerHTML=points;

}

输出

100,40,25,10,5,1

注意：当排序数字时，必须要参数sortfunction，规定排序顺序

function(a,b){return a-b}表示升序

function(a,b){return b-a}表示降序

sortfunction

可选。规定排序顺序（升序还是降序）。必须是函数。

https://www.runoob.com/jsref/jsref-sort.html

reverse()

反转数组的元素顺序。

总结：增、删、改都是对原数组进行的

查

includes()

判断一个数组是否包含一个指定的值。

arr.includes(searchElement, fromIndex)

返回值：布尔值

indexOf()	搜索数组中的元素，并返回它所在的位置。
	ndexOf() 方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。 array.indexOf(item,start) 来自 <https://www.runoob.com/jsref/jsref-indexof-array.html>
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
	<p id="demo">单击按钮显示“苹果”的位置：</p> <button οnclick="myFunction()">点我</button> <script> function myFunction(){ var fruits = ["香蕉", "橙子", "苹果", "甜瓜", "苹果"]; var a = fruits.lastIndexOf("苹果")//输出4 var a = fruits.indexOf("苹果")//输出2 var x=document.getElementById("demo"); x.innerHTML=a; } </script>

取（按条件取）

slice()

选取数组的一部分，并返回一个新数组。

不包含end元素

array.slice(start, end)

使用负值从数组中读取元素

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var myBest = fruits.slice(-3,-1); // 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素

myBest 结果输出:

Lemon,Apple

总结：find只返回第一个符合条件的元素

find()

返回符合传入测试（函数）条件的数组元素。

定义和用法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。

findIndex()

返回符合传入测试（函数）条件的数组元素索引。

定义和用法

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

注意: findIndex() 对于空数组，函数是不会执行的。

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

filter()

检测数值元素，并返回符合条件所有元素的数组。

var ages = [3, 10, 18, 20];

function checkAdult(age)

{ return age >= 18; }

function myFunction() {

document.getElementById("demo").innerHTML = ages.find(checkAdult);

document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);

document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

输出结果分别为：

第一个符合条件的元素 18

第一个符合条件的元素的索引 2

所有符合条件的元素组成的数组 [18,20]

数组元素遍历操作

forEach()

数组每个元素都执行一次回调函数(无返回值）

map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

语法：array.map(function(currentValue,index,arr))

回调函数接收三个参数：当前被遍历的元素，当前元素的索引值，当前数组

例子

var ages = [3, 10, 18, 20];

function checkAdult(age)

{ return age =+ 1; }

Var newages=ages.map(checkAdult)

输出：

原来数组的每一个元素都+1，并返回新数组

[4,11,18,20]

some()

检测数组元素中是否有元素符合指定条件。返回1个布尔值

every()

检测数值元素的每个元素是否都符合条件。返回1个布尔值

filter()

检测数值元素，并返回符合条件所有元素的数组。

var ages = [3, 10, 18, 20];

function checkAdult(age)

{ return age >= 18; }

function myFunction() {

Let a = ages.filter(checkAdult);

Let B=ages.every(checkAdult)

Let C=ages.some(checkAdult)

}

输出分别为

a所有符合条件的元素的数组：[18,20]

b是否所有元素都满足 >= 18：false

c是否有元素满足 >= 18：true

reduce()

将数组元素计算为一个值（从左到右）。

语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

其中total, currentValue为必选

参数	描述
total	必需。初始值（默认初始值为0）, 或者计算结束后的返回值。
currentValue	必需。当前元素

例子

四舍五入后计算数组元素的总和

<p>数组元素之和: <span id="demo"></span></p>

var numbers = [15.5, 2.3, 1.1, 4.7];

function getSum(total, num) {

let a=Math.round(num)

return total + a;

}

function myFunction(item) {

document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);

}

</script>

输出值为：24

数组间

concat()

连接两个或更多的数组，并返回结果

语法：array1.concat(array2,array3,...,arrayX)

合并三个数组的值：

var hege = ["Cecilie", "Lone"]

var stale = ["Emil", "Tobias", "Linus"];

var kai = ["Robin"];

var children = hege.concat(stale,kai);

children 输出结果：

Cecilie,Lone,Emil,Tobias,Linus,Robin

数组与字符串

join()

把数组的所有元素放入一个字符串。

语法

array.join(separator)

参数值

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

例子

把数组中的所有元素转换为一个字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var energy = fruits.join();

Var a=fruits.join("-")

energy输出结果：

Banana,Orange,Apple,Mango

a输出结果：

Banana-Orange-Apple-Mango

来自 <https://www.runoob.com/jsref/jsref-join.html>

toString()

把数组转换为字符串，并返回结果，它还可以把其它类型的数据都转成字符串

定义和用法

toString() 方法可把数组转换为字符串，并返回结果。

注意： 数组中的元素之间用逗号分隔。与join()类似，但是不能指定分隔符

<p id="demo">点击按钮将数组转为字符串并返回。</p>

function myFunction(){

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var str1 = fruits.toString();

var str2 = fruits.join(",");

var x=document.getElementById("demo");

if(str1===str2){

x.innerHTML="效果等同";}

else{x.innerHTML="效果不等同";

}

</script>

输出结果：效果等同

数组与字符串共用的方法

concat、indexOf、lastIndexOf、slice、includes

m0_60609792

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数组方法整理

数组内部增 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 <p id="demo">单击按钮给数组添加新的元素:</p> <button onclick="myFunction()">点我</button> <script>
复制链接

扫一扫