JS 遍歷彙總

常用遍歷方法
- for 迴圈
- for... in
  - 語法
- for...of
  - 語法
  - 引數
  - 返回值
陣列遍歷方法
- .every()
  - 語法
  - 引數
  - 返回值
- .filter()
  - 語法
  - 引數
  - 返回值
- .flat()
  - 語法
  - 引數
  - 返回值
- .forEach()
  - 語法
  - 引數
  - 返回值
- .from()
  - 語法
  - 引數
  - 返回值
- .map()
  - 語法
  - 引數
  - 返回值
  - 注意
- .reduce()
  - 語法
  - 引數
  - 返回值
- .some()
  - 語法
  - 引數
  - 返回值

常用遍歷方法

for 迴圈

for(j = 0,len=arr.length; j < len; j++) {
    ...
}

for... in

for...in語句以任意順序遍歷一個物件的除Symbol以外的可列舉屬性，包括繼承的可列舉屬性。

缺點：遍歷物件的原型屬性，用hasOwnProperty判斷一個屬性是不是物件自身上的屬性。

語法

for (variable in object)
  statement

variable

在每次迭代時，variable會被賦值為不同的屬性名。
object

非Symbol型別的可列舉屬性被迭代的物件。

for...of

for...of語句在可迭代物件（包括 Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

語法

for (variable of iterable) {
    //statements
}

引數

variable

在每次迭代中，將不同屬性的值分配給變數。
iterable

被迭代列舉其屬性的物件。

返回值

...

陣列遍歷方法

.every()

every()

方法測試一個數組內的所有元素是否都能通過某個指定函式的測試。它返回一個布林值。

注意：若收到一個空陣列，此方法在一切情況下都會返回 true。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [401, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

語法

arr.every(callback(element[, index[, array]])[, thisArg])

引數

callback

用來測試每個元素的函式，它可以接收三個引數：

element

用於測試的當前值。
index可選

用於測試的當前值的索引。
array可選

呼叫 every 的當前陣列。

thisArg

執行 callback 時使用的 this 值。

返回值

如果回撥函式的每一次返回都為 truthy 值，返回 true ，否則返回 false。

.filter()

filter() 方法建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

語法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

引數

callback

用來測試陣列的每個元素的函式。返回 true 表示該元素通過測試，保留該元素，false 則不保留。它接受以下三個引數：

element

陣列中當前正在處理的元素。
index可選

正在處理的元素在陣列中的索引。
array可選

呼叫了 filter 的陣列本身。

thisArg可選

執行 callback 時，用於 this 的值。

返回值

一個新的、由通過測試的元素組成的陣列，如果沒有任何陣列元素通過測試，則返回空陣列。

.flat()

flat() 方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。

const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());// expected output: [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]], [5, 6]];console.log(arr2.flat(3));// expected output: [0, 1, 2, [3, 4]]

語法

var newArray = arr.flat([depth])

引數

depth 可選

指定要提取巢狀陣列的結構深度，預設值為 1。

返回值

一個包含將陣列與子陣列中所有元素的新陣列。

.forEach()

forEach() 方法對陣列的每個元素執行一次給定的函式。

const array1 = ['a', 'b', 'c'];array1.forEach(element => console.log(element));// expected output: "a"// expected output: "b"// expected output: "c"

語法

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

引數

callback

為陣列中每個元素執行的函式，該函式接收一至三個引數：

currentValue

陣列中正在處理的當前元素。
index 可選

陣列中正在處理的當前元素的索引。
array 可選

forEach() 方法正在操作的陣列。

thisArg 可選

可選引數。當執行回撥函式 callback 時，用作 this 的值。

返回值

undefined。

.from()

ES6

Array.from() 方法對一個類似陣列或可迭代物件建立一個新的，淺拷貝的陣列例項。

console.log(Array.from('foo'));// expected output: Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], x => x + x));// expected output: Array [2, 4, 6]

語法

Array.from(arrayLike[, mapFn[, thisArg]])

引數

arrayLike

想要轉換成陣列的偽陣列物件或可迭代物件。

mapFn 可選

如果指定了該引數，新陣列中的每個元素會執行該回調函式。

thisArg 可選

可選引數，執行回撥函式 mapFn 時 this 物件。

返回值

一個新的陣列例項

.map()

map() 方法建立一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函式後的返回值。

const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32]

語法

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

引數

callback

生成新陣列元素的函式，使用三個引數：

currentValue

callback 陣列中正在處理的當前元素。
index可選

callback 陣列中正在處理的當前元素的索引。
array可選

map 方法呼叫的陣列。

thisArg可選

執行 callback 函式時值被用作this。

返回值

一個由原陣列每個元素執行回撥函式的結果組成的新陣列。

注意

new Array(10).map( () => { ... } )這樣宣告的陣列，存在預設的空陣列專案時，不可以map()

.reduce()

reduce() 方法對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果彙總為單個返回值。

const array1 = [1, 2, 3, 4];const reducer = (previousValue, currentValue) => previousValue + currentValue;// 1 + 2 + 3 + 4console.log(array1.reduce(reducer));// expected output: 10// 5 + 1 + 2 + 3 + 4console.log(array1.reduce(reducer, 5));// expected output: 15

語法

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

引數

Accumulator (acc) (累計器)
Current Value (cur) (當前值)
Current Index (idx) (當前索引)
Source Array (src) (源陣列)

返回值

您的 reducer 函式的返回值分配給累計器，該返回值在陣列的每個迭代中被記住，並最後成為最終的單個結果值。

.some()

some() 方法測試陣列中是不是至少有1個元素通過了被提供的函式測試。它返回的是一個Boolean型別的值。

注意：如果用一個空陣列進行測試，在任何情況下它返回的都是false。

const array = [1, 2, 3, 4, 5];// checks whether an element is evenconst even = (element) => element % 2 === 0;console.log(array.some(even));// expected output: true

語法

arr.some(callback(element[, index[, array]])[, thisArg])

引數

callback

用來測試每個元素的函式，接受三個引數：

element

陣列中正在處理的元素。
index 可選

陣列中正在處理的元素的索引值。
array可選

some()被呼叫的陣列。

thisArg可選

執行 callback 時使用的 this 值。

返回值

陣列中有至少一個元素通過回撥函式的測試就會返回true；所有元素都沒有通過回撥函式的測試返回值才會為false。

常用遍歷方法

for 迴圈

for... in

語法

for...of

語法

引數

返回值

陣列遍歷方法

.every()

語法

引數

返回值

.filter()

語法

引數

返回值

.flat()

語法

引數

返回值

.forEach()

語法

引數

返回值

.from()

語法

引數

返回值

.map()

語法

引數

返回值

注意

.reduce()

語法

引數

返回值

.some()

語法

引數

返回值

相關推薦