您的位置 首页 php

全面图文解说JavaScript 数组方法 map foreach reduce filter各种数组

智云科技 发布于 2022年6月19日 评论关闭 阅读(296)

数组 (array)

JavaScript 数组用于在单一变量中存储多个值。

功能

类型

属性

名称

说明

length

长度

方法

名称

说明

concat()

连接两个或多个数组，并返回已连接数组的副本。

copyWithin

将数组中的数组元素复制到指定位置或从指定位置复制。

findIndex

返回数组中通过测试的第一个元素的索引。

forEach

为每个数组元素调用函数。

from

从对象创建数组。

includes

检查数组是否包含指定的元素。

indexOf

在数组中搜索元素并返回其位置。

isArray

检查对象是否为数组。

join

将数组的所有元素连接成一个字符串。

keys

返回 Array Iteration 对象，包含原始数组的键.

lastIndexOf

在数组中搜索元素，从末尾开始，并返回其位置。

map

使用为每个数组元素调用函数的结果创建新数组。

pop

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

push

将新元素添加到数组的末尾，并返回新的长度。

reduce

将数组的值减为单个值（从左到右）。

reduceRight

将数组的值减为单个值（从右到左）。

reverse

反转数组中元素的顺序。

shift

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

slice

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

some

检查数组中的任何元素是否通过测试。

sort

对数组的元素进行排序。

splice

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

toString

将数组转换为字符串，并返回结果。

unshift

将新元素添加到数组的开头，并返回新的长度。

常用功能

功能用法都一样，就是基于数组做相应的事，前端会有全部代码演示，后面只是简单地列出使用方法。

map

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值得数组元素执行函数。

map() 方法不会更改原始数组。 

 <!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.map()</h1>
​
<p>通过对每个数组元素执行函数来创建新数组。</p>
​
<p id="demo"></p>
​
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>
​
</body>
</html>
​

结果 

 通过对每个数组元素执行函数来创建新数组。
​
90,8,18,32,50

filter

filter() 方法创建一个包含通过测试的数组元素的新数组。

这个例子用值大于 18 的元素创建一个新数组： 

 <!DOCTYPE html>
<html>
<body>
​
<h1>JavaScript Array.filter()</h1>
​
<p>使用通过测试的所有数组元素创建一个新数组。</p>
​
<p id="demo"></p>
​
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>
​
</body>
</html>
​

结果 

 使用通过测试的所有数组元素创建一个新数组。
​
45,25

请注意此函数接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身 在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：

join

join() 方法将数组作为字符串返回。

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。 

 <!DOCTYPE html>
<html>
<body>
​
<h1>JavaScript 数组方法</h1> 
​
<h2>join()</h2>
​
<p>join() 方法将数组元素连接成一个字符串。</p>
​
<p>在这个例子中我们使用“*”作为元素之间的分隔符：</p>
​
<p id="demo"></p>
​
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
​
</body>
</html>
​

join() 方法将数组元素连接成一个字符串。

在这个例子中我们使用“*”作为元素之间的分隔符：

Banana * Orange * Apple * Mango

push和pop

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意： 新元素将添加在数组的末尾。

注意： 此方法改变数组的长度。 

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
​
<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.push("Kiwi")
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
​
</body>
</html>

reducer

定义和用法

  • reduce() 方法将数组缩减为单个值。
  • reduce() 方法为数组的每个值（从左到右）执行提供的函数。

函数的返回值存储在累加器中（结果/总计）。 

 arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中 arr 表示原数组； prev 表示上一次调用回调时的返回值，或者初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~ 

 <!DOCTYPE html>
<html>
<body>
​
<h1>JavaScript 数组</h1>
​
<p>从左边开始减去数组中的数字：</p>
​
<p id="demo"></p>
​
<script>
const numbers = [175, 50, 25];
// 100
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}
</script>
​
</body>
</html>
​

1. 求数组项之和 

 var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项最大值 

 var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

forEach

forEach() 方法按顺序为数组中的每个元素调用一次函数。

列出数组中的每一项： 

 <!DOCTYPE html>
<html>
<body>
​
<h1>JavaScript 数组</h1>
​
<p>forEach() 方法按顺序为数组中的每个元素调用一次函数。</p>
​
<p id="demo"></p>
​
<script>
let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

document.getElementById("demo").innerHTML = text;
 
function myFunction(item, index) {
  text += index + ": " + item + "<br>"; 
}
</script>
​
</body>
</html>
​

forEach() 方法按顺序为数组中的每个元素调用一次函数。 

 0: apple
1: orange
2: cherry

如何跳出循环？ Js 此种状况的forEach 不能使用continue, break; 可以使用如下两种方式：

  1. if 语句控制
  2. return . (return true, false) ， return –> 类似continue

entries

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。 

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
​
<h1>Array entries()</h1>
​
<p>从数组中创建一个可迭代的对象。</p>
​
<p>迭代对象的每个实体来自数组对应的元素。</p>
​
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 entries 方法。</p>
​
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();

document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>
​
</body>
</html>

Array entries() 从数组中创建一个可迭代的对象。

迭代对象的每个实体来自数组对应的元素。

0,Banana

1,Orange

2,Apple

注意: IE11 及其更早的浏览器版本不支持 entries 方法。

其它方法基本一样这里简单写一下

toString

把数组转换为字符串 toString() 把数组转换为数组值（逗号分隔）的字符串。

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

结果 

 Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

实例 

 var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

结果 

 Banana * Orange * Apple * Mango

Popping 和 Pushing

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：

从数组 弹出 项目，或向数组 推入 项目。

Popping

pop() 方法从数组中删除最后一个元素：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

shift 位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

更改元素

通过使用它们的 索引号 来访问数组元素：

数组 索引（下标） 以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

length 属性提供了向数组追加新元素的简易方法：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

delete 删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来 删除 ：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

splice 拼接数组

splice() 方法可用于向数组添加新项：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被 添加 （接入）的位置。

第二个参数（1）定义应该 删除多个 元素。

其余参数被省略。没有新元素将被添加。

concat 合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

实例（合并两个数组） 

 var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

实例（合并三个数组） 

 var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

实例（将数组与值合并） 

 var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

slice 裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （”Orange”）开始切出一段数组：

实例 

 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （”Apple”）开始切出一段数组：

实例 

 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

实例 

 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

实例 

 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

自动 toString()

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

实例 

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

所有 JavaScript 对象都拥有 toString() 方法。

标签:
打赏 点赞(1)

文章来源：智云一二三科技

文章标题：全面图文解说JavaScript 数组方法 map foreach reduce filter各种数组

文章地址：https://www.zhihuclub.com/79309.shtml

关于作者: 智云科技

相关文章

热门文章

1分享新浪图床上传接口源码

点赞(940) 阅读(61,122)

2PHP简单实现路由Route功能

点赞(1.15K) 阅读(35,967)

3Tideways、xhprof 和 xhgui 打造 PHP 非侵入式监控平台

点赞(369) 阅读(4,291)

4centos系统如何查看是否安装了mysql

点赞(540) 阅读(3,789)

5curl 工具简述

点赞(518) 阅读(2,980)
网站地图