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);
结果
5262
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);
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined”
定义和用法
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