数组的几个常见方法

最新推荐文章于 2024-02-28 19:04:02 发布

辛大人

最新推荐文章于 2024-02-28 19:04:02 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/qq_41786954/article/details/88564039

版权

1、array.forEach(function(currentValue, index, arr), thisValue)；//es5 方法，循环遍历数组，没有返回值。
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>

index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

forEach对数组每个值操作，但是没有返回值，对数组没有改变。可以对比map操作。

2、
array.map(function(currentValue,index,arr), thisValue)；
必须。函数，数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

返回值：返回一个新数组，数组中的元素为原数组元素经过函数处理的值。
映射
例如：

let arr =[1,2,3,4,5,6,3];
var a = {start:'i`m',end:'years old'};
var arr1 = [];
arr1 = arr.map(function (item,index,arr) {
    return `${this.start} ${item*index} ${this.end}`;//反引号为es6中的字符串模板 用${}来去变量。
},a);
console.log(arr1);

结果：

[ 'i`m 0 years old',
  'i`m 2 years old',
  'i`m 6 years old',
  'i`m 12 years old',
  'i`m 20 years old',
  'i`m 30 years old',
  'i`m 18 years old' ]

map与forEach对比，均对数组元素操作，map返回一个新数组，forEach不返回任何值。

3、
array.find(function(currentValue, index, arr),thisValue)；
function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。
函数参数:
参数描述
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
thisValue 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值。

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。

例如：找到数组中存在6的数字

let arr =[1,2,345,45,5262,33634,3];
var arr1 = [];
arr1 = arr.find(function (item,index,arr) {
    return item.toString().indexOf(6)>-1;
});
console.log(arr1);

结果

4、array.filter(function(currentValue,index,arr), thisValue);
filter() 方法创建一个新的数组，新数组中的元素由function中返回true的值组成。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
必须。函数，数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”
例如：

var arr =[1,2,3,4,5,6,3];
var a = {name:'rick',age:12};
var arr1 = [];
arr1 = arr.filter(function (item,index,arr) {
    console.log(this);
    return (3<item)&&(index>3);
},a);
console.log(arr);
console.log(arr1);

结果

{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
{ name: 'rick', age: 12 }
[ 1, 2, 3, 4, 5, 6, 3 ]
[ 5, 6 ]

5、arr.includes(valueToFind[, fromIndex])；
实验中方法，不建议开发中使用。
valueToFind ：需要查找的元素值。
fromIndex 可选：从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0。

> [1, 2, 3].includes(2);     // true [1, 2, 3].includes(4);     // false
> [1, 2, 3].includes(3, 3);  // false [1, 2, 3].includes(3, -1); // true
> [1, 2, NaN].includes(NaN); // true

includes() 方法有意设计为通用方法。它不要求this值是数组对象，所以它可以被用于其他类型的对象 (比如类数组对象)。下面的例子展示了在函数的arguments对象上调用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

filter和find对比，find找到第一个满足条件值并返回元素值，filter找到所有满足条件值组成新数组返回。includes和find对比，inculdes的参数是元素，找到数组中是否包含元素，返回true或者false。

6、array.reduce(function(total, currentValue, currentIndex, arr), initialValue)；

function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
参数描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值。

返回值: 返回计算结果。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

let arr =[1,2,345,45,5262,33634,3];
var a = 3;
var arr1 = [];
arr1 = arr.reduce(function (total,cur,index,arr) {
    console.log(arguments);
});

结果：

[Arguments] {
 '0': 1, 
 '1': 2, 
 '2': 1, 
 '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
[Arguments] {
  '0': undefined,
  '1': 345,
  '2': 2,
  '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
[Arguments] {
  '0': undefined,
  '1': 45,
  '2': 3,
  '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
[Arguments] {
  '0': undefined,
  '1': 5262,
  '2': 4,
  '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
[Arguments] {
  '0': undefined,
  '1': 33634,
  '2': 5,
  '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
[Arguments] {
  '0': undefined,
  '1': 3,
  '2': 6,
  '3': [ 1, 2, 345, 45, 5262, 33634, 3 ] }
undefined

可见其参数变化情况。设置initialValue会在第一次替代第一个参数值。数组有七位，共六次循环，index从1到6，第一次取了数组前两位。返回的是一个数值。

let arr =[1,2,3,4,5,6,7];
var a = 3;
var arr1 = [];
arr1 = arr.reduce(function (total,cur,index,arr) {
    console.log(arguments);
    return cur;
});
console.log(arr1);
结果：
[Arguments] { '0': 1, '1': 2, '2': 1, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
[Arguments] { '0': 2, '1': 3, '2': 2, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
[Arguments] { '0': 3, '1': 4, '2': 3, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
[Arguments] { '0': 4, '1': 5, '2': 4, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
[Arguments] { '0': 5, '1': 6, '2': 5, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
[Arguments] { '0': 6, '1': 7, '2': 6, '3': [ 1, 2, 3, 4, 5, 6, 7 ] }
7

可见每次的返回值会作为下一次循环的第一参数。由此可以做累加（return total + cur；）。

7、
array.some(function(currentValue,index,arr),thisValue)；

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

arr =[1,2,2,,4];
obj = {a:2,b:5};
arr1 = arr.some(function (cur,index,arr) {
  console.log(arguments);
  return cur>this.a;
  },obj);
console.log(arr1);
打印：
[Arguments] { '0': 1, '1': 0, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 2, '1': 1, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 2, '1': 2, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 4, '1': 4, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
true
可见只要有一个满足值则返回true。而且不对空位进行检测。

8、
array.every(function(currentValue,index,arr), thisValue)；

定义和用法
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

arr =[1,2,2,,4];
obj = {a:2,b:5};
arr1 = arr.every(function (cur,index,arr) {
  console.log(arguments);
  return cur<this.b;
  },obj);
console.log(arr1);
打印：
[Arguments] { '0': 1, '1': 0, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 2, '1': 1, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 2, '1': 2, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
[Arguments] { '0': 4, '1': 4, '2': [ 1, 2, 2, <1 empty item>, 4 ] }
true
 当数组全部满足时返回true。

arr =[1,2,2,,4];
obj = {a:2,b:4};
arr1 = arr.every(function (cur,index,arr) {
  return cur<this.b;
  },obj);
console.log(arr1);
打印：
false

辛大人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数组的几个常见方法

1、array.forEach(function(currentValue, index, arr), thisValue)；//es5 方法，循环遍历数组，没有返回值。currentValue 必需。当前元素index 可选。当前元素的索引值。arr 可选。当前元素所属的数组对象。thisValue 可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined...
复制链接

扫一扫