JS基础总结 - 遍历与查找汇总

目录

• 常用遍历方法
  • for 循环
  • for... in
    • 语法
  • for...of
    • 语法
    • 参数
    • 返回值
• 数组遍历方法
  • .every()
    • 语法
    • 参数
    • 返回值
  • .filter()
    • 语法
    • 参数
    • 返回值
  • .flat()
    • 语法
    • 参数
    • 返回值
  • .forEach()
    • 语法
    • 参数
    • 返回值
  • .from()
    • 语法
    • 参数
    • 返回值
  • .map()
    • 语法
    • 参数
    • 返回值
    • 注意
  • .reduce()
    • 语法
    • 参数
    • 返回值
  • .some()
    • 语法
    • 参数
    • 返回值
• 数组查找方法
  • .includes()
    • 语法
    • 参数
    • 返回值
  • .find()
    • 语法
    • 参数
    • 返回值
  • .findIndex()
    • 语法
    • 参数
    • 返回值
  • indexOf()

常用遍历方法

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])

参数

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. 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。

数组查找方法

.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true

语法

includes(searchElement)
includes(searchElement, fromIndex)

参数

searchElement

需要查找的元素值。

备注： 使用 includes() 比较字符串和字符时是区分大小写的。

• fromIndex 可选

  从fromIndex 索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

返回值

返回一个布尔值 Boolean 。 如果在数组中（或 fromIndex 指定的范围中）找到了 searchElement，则返回 true，否则返回 false。

.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found); // 12

语法

// 箭头函数
find((element) => { /* … */ } )
find((element, index) => { /* … */ } )
find((element, index, array) => { /* … */ } )

// 回调函数
find(callbackFn)
find(callbackFn, thisArg)

// 内联回调函数
find(function(element) { /* … */ })
find(function(element, index) { /* … */ })
find(function(element, index, array){ /* … */ })
find(function(element, index, array) { /* … */ }, thisArg)

参数

callback

在数组每一项上执行的函数，接受3个参数：

• element

  当前遍历到的元素。

• index

  当前遍历到的索引。

• array

  数组本身。

thisArg可选

执行回调时用作 this 的对象。

返回值

数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // 3

语法

// 箭头函数
findIndex((element) => { /* … */ } )
findIndex((element, index) => { /* … */ } )
findIndex((element, index, array) => { /* … */ } )

// 回调函数
findIndex(callbackFn)
findIndex(callbackFn, thisArg)

// 内联回调函数
findIndex(function(element) { /* … */ })
findIndex(function(element, index) { /* … */ })
findIndex(function(element, index, array){ /* … */ })
findIndex(function(element, index, array) { /* … */ }, thisArg)

参数

callback

用来测试每个元素的函数，接受三个参数：

• element

  正在处理的元素。

• index 可选

  正在处理的元素的索引值。

• array可选

  调用findIndex的数组。

thisArg可选

执行 callback 时使用的 this 值。

返回值

数组中通过提供测试函数的第一个元素的索引。否则，返回 -1

indexOf()

indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。