Array原型之迭代方法

Array

Array对象是用于构造数组的全局对象.

概述

数组对象是一个有序的数据(原始类型或对象类型)集合, 是一种类列表对象,它的原型提供了数组操作的方法.
数组只能用整数作为数组元素的索引,而不是字符串,且从0开始,第一个元素的索引为0.使用非整数并通过[].来访问数组或设置数组元素时,所操作的并不是数组列表的元素,而是数组对象属性集合上的变量.数组对象的属性和数组元素列表是分开存储的,并且数组的遍历和修改操作也不能作用于这些命名属性.

1
2
3
4
5
6
var arr = [];
arr['zero'] = 'zero';
arr[0] = 0;
arr.forEach(item => console.log(item))

// 0

原型方法

迭代方法

Array.prototype.forEach()

语法 :

array.forEach(callback(currentValue[, index[, array]]){ // do something }[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

thisArg : 执行回调函数时this对应的对象. 如果省略了 thisArg 参数, 或者赋值为 nullundefined, 则 this 指向全局对象.
返回值 :

1
2
3
4
5
6
7
8
9
10
11
12
let obj = {name: 'obj'};
let arr0 = [3, 2, 1];
let arr00 = arr0.forEach(function(currentValue, index, array){
console.log('arr0:', arr0,'currentValue:', currentValue, 'index:', index, 'array:', array, 'thisArg:', this);
}, obj);
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] thisArg: {name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] thisArg: {name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 1 index: 2 array: [ 3, 2, 1 ] thisArg: {name: 'obj' };

// arr00: undefined;

Array.prototype.map()

语法 :

array.map(callback(currentValue[, index[, array]]){ // do something }[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

thisArg : 执行回调函数时this对应的对象. 如果省略了 thisArg 参数, 或者赋值为 nullundefined, 则 this 指向全局对象.
返回值 : 由每个数组元素调用callback后的返回值组成的新数组.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {name: 'obj'};
let arr0 = [3, 2, 1];
let arr00 = arr0.map(function(currentValue, index, array){
let newVal = currentValue * 2;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'newVal:', newVal, 'thisArg:', this);
return newVal;
}, obj);
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] newVal: 6 thisArg: { name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] newVal: 4 thisArg: { name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 1 index: 2 array: [ 3, 2, 1 ] newVal: 2 thisArg: { name: 'obj' };

// arr00: [ 6, 4, 2 ]

Array.prototype.every()

语法 :

array.every(callback(currentValue[, index[, array]]){ // do something }[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

thisArg : 执行回调函数时this对应的对象. 如果省略了 thisArg 参数, 或者赋值为 nullundefined, 则 this 指向全局对象.
返回值 : 布尔值. 由数组中每个元素调用callback后, 当所有的元素都符合条件(真值)才返回true. 否则, 返回false. 另外, 对于放在空数组上的任何条件, 此方法返回 true.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.every(function(currentValue, index, array){
let newVal = currentValue * 3;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'newVal:', newVal, 'thisArg:', this);
return newVal > 2;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] newVal: 9 thisArg: { name: 'obj' }
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] newVal: 6 thisArg: { name: 'obj' }
// arr0: [ 3, 2, 1 ] currentValue: 1 index: 2 array: [ 3, 2, 1 ] newVal: 3 thisArg: { name: 'obj' }

// arr00: true;

let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.every(function(currentValue, index, array){
let newVal = currentValue * 3;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'newVal:', newVal, 'thisArg:', this);
return newVal > 6;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] newVal: 9 thisArg: { name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] newVal: 6 thisArg: { name: 'obj' };

// arr00: false;

Array.prototype.some()

语法 :

array.some(callback(currentValue[, index[, array]]){ // do something }[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

返回值 : 布尔值. 由数组中每个元素调用callback后, 当有元素符合条件(真值)就返回true. 否则, 返回false. 另外, 对于放在空数组上的任何条件, 此方法返回 false.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.some(function(currentValue, index, array){
let newVal = currentValue * 3;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'newVal:', newVal, 'thisArg:', this);
return newVal > 6;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] newVal: 9 thisArg: { name: 'obj' };

// arr00: true;

let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.some(function(currentValue, index, array){
let newVal = currentValue * 3;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'newVal:', newVal, 'thisArg:', this);
return newVal > 9;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] newVal: 9 thisArg: { name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] newVal: 6 thisArg: { name: 'obj' };
// arr0: [ 3, 2, 1 ] currentValue: 1 index: 2 array: [ 3, 2, 1 ] newVal: 3 thisArg: { name: 'obj' };

// arr00: false;

Array.prototype.filter()

语法 :

arr.filter(callback(currentValue[, index[, array]])[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

返回值 : 数组中每个元素调用callback后, 由符合条件的数组元素组成的新数组.如果没有符合条件的元素, 则返回空数组.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.filter(function(currentValue, index, array){
let boolean = currentValue > 1 ? true : false;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'thisArg:', this);
return boolean;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] thisArg: { name: 'obj' }
// arr0: [ 3, 2, 1 ] currentValue: 2 index: 1 array: [ 3, 2, 1 ] thisArg: { name: 'obj' }
//arr0: [ 3, 2, 1 ] currentValue: 1 index: 2 array: [ 3, 2, 1 ] thisArg: { name: 'obj' }

// arr00: [ 3, 2 ];

Array.prototype.find()

语法 :

arr.find(callback(currentValue[, index[, array]])[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

返回值 : 数组中每个元素调用callback后, 返回第一个符合条件的元素. 否则返回 undefined.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.find(function(currentValue, index, array){
let boolean = currentValue > 1 ? true : false;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'thisArg:', this);
return boolean;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] thisArg: { name: 'obj' };

// arr00: 3;

Array.prototype.findIndex()

语法 :

arr.findIndex(callback(currentValue[, index[, array]])[, thisArg])

callback : 数组中每个元素都会执行的回调函数.

currentValue : 数组中正在被处理的当前元素.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

返回值 : 数组中每个元素调用callback后, 返回第一个符合条件的元素索引. 否则返回 -1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {
name: 'obj'
}
let arr0 = [3, 2, 1];
let arr00 = arr0.findIndex(function(currentValue, index, array){
let boolean = currentValue > 1 ? true : false;
console.log('arr0:', arr0, 'currentValue:', currentValue, 'index:', index, 'array:', array, 'thisArg:', this);
return boolean;
}, obj)
console.log('arr00:', arr00);

// arr0: [ 3, 2, 1 ] currentValue: 3 index: 0 array: [ 3, 2, 1 ] thisArg: { name: 'obj' };

// arr00: 0;

Array.prototype.reduce()

语法 :

arr.reduce(callback(accumulator[, currentValue[, index[, array]]])[, initialValue])

callback : 数组中每个元素都会执行的回调函数.

accumulator : 上一个元素调用回调函数后的返回值. 回调函数第一次执行时, 若提供了initialValue,则accumulator取值为initialValue. 若没有提供initialValue, 则accumulator取值为数组中第一个元素.
currentValue : 数组中正在被处理的当前元素. 回调函数第一次执行时, 若提供了initialValue, 则currentValue取值为数组中第一个元素. 若没有提供initialValue, 则currentValue取值为数组中第二值.
index : 数组中正在被处理的当前元素的索引.
array : 调用该方法的数组.

返回值 : 数组中每个元素调用callback后, 将上一次回调函数执行结果作为下一次回调函数参数, 并最终返回单个结果值.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
let arr0 = [3, 2, 1];
let arr00 = arr0.reduce(function(accumulator, currentValue, index, array) {
console.log('arr0', arr0, 'accumulator:', accumulator, 'currentValue:', currentValue, 'index:', index, 'array:', array);
return accumulator + currentValue;
}, 0);
console.log('arr00:', arr00);

// arr0 [ 3, 2, 1 ] accumulator: 0 currentValue: 3 index: 0 array: [ 3, 2, 1 ];
// arr0 [ 3, 2, 1 ] accumulator: 3 currentValue: 2 index: 1 array: [ 3, 2, 1 ];
// arr0 [ 3, 2, 1 ] accumulator: 5 currentValue: 1 index: 2 array: [ 3, 2, 1 ];

// arr00: 6;

let arr0 = [3, 2, 1];
let arr00 = arr0.reduce(function(accumulator, currentValue, index, array) {
console.log('arr0', arr0, 'accumulator:', accumulator, 'currentValue:', currentValue, 'index:', index, 'array:', array);
return accumulator + currentValue;
});
console.log('arr00:', arr00);

// arr0 [ 3, 2, 1 ] accumulator: 3 currentValue: 2 index: 1 array: [ 3, 2, 1 ];
// arr0 [ 3, 2, 1 ] accumulator: 5 currentValue: 1 index: 2 array: [ 3, 2, 1 ];

// arr00: 6;

let arr0 = [1, 2, 3, 44, 5, 3, 2, 53, 1, 2, 3, 5, 44, 53, 55];
const reducer = (accumulator, currentValue) => {
console.log('arr0', arr0, 'accumulator', accumulator, 'currentValue', currentValue);
if (accumulator.length === 0 || accumulator[accumulator.length - 1] !== currentValue) {
accumulator.push(currentValue);
}
return accumulator;
};
let arr00 = arr0.sort((a, b) => {return a - b}).reduce(reducer, []);
console.log('arr00:', arr00);

// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [] currentValue 1;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1 ] currentValue 1;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1 ] currentValue 2;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2 ] currentValue 2;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2 ] currentValue 2;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2 ] currentValue 3;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3 ] currentValue 3;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3 ] currentValue 3;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3 ] currentValue 5;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5 ] currentValue 5;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5 ] currentValue 44;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5, 44 ] currentValue 44;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5, 44 ] currentValue 53;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5, 44, 53 ] currentValue 53;
// arr0 [ 1, 1, 2, 2, 2, 3, 3, 3, 5, 5, 44, 44, 53, 53, 55 ] accumulator [ 1, 2, 3, 5, 44, 53 ] currentValue 55;

// arr00: [ 1, 2, 3, 5, 44, 53, 55 ];

Array.prototype.reduceRight()

语法(从右向左遍历,见reduce) :

arr.reduceRight(callback(accumulator[, currentValue[, index[, array]]])[, initialValue])

Array.prototype.entries()

语法 :

arr.entries()

返回值 : 一个新的包含数组中每个索引的键/值对的Array Iterator对象.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
let arr0 = [3, 2, 1];
let arr00 = arr0.entries();
let arr000 = arr00.next();
let arr0000 = arr000.value;
console.log('arr00:', arr00);
console.log('arr000:', arr000);
console.log('arr0000:', arr0000);

// arr00;
// Array Iterator {}
// __proto__: Array Iterator
// next: ƒ next()
// Symbol(Symbol.toStringTag): "Array Iterator"

// arr000;
// {value: Array(2), done: false}j;

// arr0000;
// [0, 3];

let arr0 = [3, 2, 1];
let arr00 = arr0.entries();
for(let item of arr00) {
console.log(item);
}

// [ 0, 3 ];
// [ 1, 2 ];
// [ 2, 1 ];

let arr0 = [3, 2, 1];
let arr00 = [...arr0.entries()];
console.log('arr00:', arr00);

// arr00: [ [ 0, 3 ], [ 1, 2 ], [ 2, 1 ] ]

Array.prototype.keys()

语法 :

arr.keys()

返回值 : 一个新的包含数组中每个索引键的Array Iterator对象.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let arr0 = [3, 2, 1];
let arr00 = arr0.keys();
for(let item of arr00) {
console.log(item);
}

// 0
// 1
// 2

let arr0 = [3, 2, 1];
let arr00 = [...arr0.keys()];
console.log('arr00:', arr00);

// arr00: [ 0, 1, 2 ];

Array.prototype.values()

语法 :

arr.values()

返回值 : 一个新的包含数组每个索引对应值的 Array Iterator 对象.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr0 = [3, 2, 1];
let arr00 = arr0.keys();
for(let item of arr00) {
console.log(item);
}

// 0
// 1
// 2

let arr0 = [3, 2, 1];
let arr00 = [...arr0.keys()];
console.log('arr00:', arr00);
// arr00: [ 0, 1, 2 ];

Array.prototype[@@iterator]()

语法 :

arr[Symbol.iterator]()

返回值 : 数组的 iterator 方法,默认情况下与 values() 返回值相同.


------------- The End -------------
显示评论