GGbond : GG详解JavaScript中的循环和高阶函数

GGBond今天继续上班
VIP.5 如鱼得水
212 阅读9分钟

JavaScript中的循环和高阶函数详解

GGbond 将介绍JavaScript中的各种循环语句和高阶函数，包括while循环、for循环、forEach、map、filter、reduce等。通过本文的学习，你将掌握JavaScript中循环和高阶函数的用法，并能够在实际开发中灵活运用它们。

While

while循环

while循环会在指定条件为true时重复执行代码块。常见的while循环格式如下：

while (条件) {
  // 循环体
}

其中，当条件为true时，循环体会一直执行。

以下是一个计算1到5的和的例子：

let sum = 0;
let i = 1;
while (i <= 5) {
  sum += i;
  i++;
}
console.log(sum); // 打印结果为15

do...while循环

do...while循环和while循环类似，不同的是它会先执行一次循环体，再判断条件是否满足，如果满足则继续执行，否则退出循环。常见的do...while循环格式如下：

do {
  // 循环体
} while (条件);

以下是一个计算1到5的和的例子：

let sum = 0;
let i = 1;
do {
  sum += i;
  i++;
} while (i <= 5);
console.log(sum); // 打印结果为15

循环高阶函数

JavaScript中常见的循环高阶函数有：map、filter、reduce、forEach、some、every、find、findIndex、flatMap。下面将分别举例说明。

map函数

map函数是一个数组方法，它对数组中的每个元素执行一个函数，并返回一个新数组。**

const array = [1, 2, 3];
const newArray = array.map((currentValue, index, array) => {
  // 返回一个新的元素
});
console.log(newArray); // 打印结果为一个新的数组

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。map函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个新的元素，这个新的元素将会被加入到新数组中。

以下是一个使用map函数将数组中的元素加倍的例子：

const arr = [1, 2, 3];
const newArr = arr.map((num) => {
  return num * 2;
});
console.log(newArr); // 打印结果为[2, 4, 6]

filter函数

filter函数用于过滤数组中的元素，并返回一个新的数组。**

const array = [1, 2, 3];
const newArray = array.filter((currentValue, index, array) => {
  // 返回一个boolean值，决定当前元素是否加入新数组
});
console.log(newArray); // 打印结果为一个新的数组

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。filter函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个boolean值，如果为true，当前元素将会被加入新数组中，否则不会。

以下是一个使用filter函数过滤数组中偶数的例子：

const arr = [1, 2, 3, 4, 5, 6];
const evenArr = arr.filter((num) => {
  return num % 2 === 0;
});
console.log(evenArr); // 打印结果为[2, 4, 6]

reduce函数

reduce函数用于将数组中的元素归纳为一个值。**

const array = [1, 2, 3];
const result = array.reduce((accumulator, currentValue, index, array) => {
  // 返回一个新的累加值
}, initialValue);
console.log(result); // 打印结果为一个值

其中，accumulator为累加器，currentValue为当前元素的值，index为当前元素的索引，array为原数组。reduce函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个新的累加值，这个新的累加值将会被传递给下一个回调函数。初始值可以通过initialValue参数指定，如果没有指定，初始值将为数组的第一个元素。

以下是一个使用reduce函数计算数组中所有元素的和的例子：

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log(sum); // 打印结果为15

forEach函数

forEach函数用于遍历数组中的每个元素，对每个元素执行指定的操作。**

const array = [1, 2, 3];
array.forEach((currentValue, index, array) => {
  // 对每个元素执行指定的操作
});

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。forEach函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。

以下是一个使用forEach函数遍历数组并打印每个元素的例子：

const arr = [1, 2, 3];
arr.forEach((num) => {
  console.log(num);
});

some函数

some函数用于判断数组中是否有至少一个元素满足指定的条件。**

const array = [1, 2, 3];
const result = array.some((currentValue, index, array) => {
  // 返回一个boolean值，判断当前元素是否满足条件
});
console.log(result); // 打印结果为true或false

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。some函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个boolean值，如果有至少一个元素满足条件，some函数返回true，否则返回false。

以下是一个使用some函数判断数组中是否有偶数的例子：

const arr = [1, 3, 5, 6, 7];
const hasEven = arr.some((num) => {
  return num % 2 === 0;
});
console.log(hasEven); // 打印结果为true

every函数

every函数用于判断数组中的所有元素是否都满足指定的条件。**

const array = [1, 2, 3];
const result = array.every((currentValue, index, array) => {
  // 返回一个boolean值，判断当前元素是否满足条件
});
console.log(result); // 打印结果为true或false

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。every函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个boolean值，如果所有元素都满足条件，every函数返回true，否则返回false。

以下是一个使用every函数判断数组中是否所有元素都是正整数的例子：

const arr = [1, 2, 3];
const allPositiveIntegers = arr.every((num) => {
  return Number.isInteger(num) && num > 0;
});
console.log(allPositiveIntegers); // 打印结果为true

find函数

find函数用于查找数组中第一个满足指定条件的元素，返回其值。**

const array = [1, 2, 3];
const result = array.find((currentValue, index, array) => {
  // 返回一个boolean值，判断当前元素是否满足条件
});
console.log(result); // 打印结果为满足条件的第一个元素的值，如果没有找到，返回undefined

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。find函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个boolean值，如果当前元素满足条件，find函数返回该元素的值，否则继续查找。如果没有找到满足条件的元素，find函数返回undefined。

以下是一个使用find函数查找数组中第一个偶数的例子：

const arr = [1, 3, 4, 5, 7];
const firstEven = arr.find((num) => {
  return num % 2 === 0;
});
console.log(firstEven); // 打印结果为4

findIndex函数

findIndex函数用于查找数组中第一个满足指定条件的元素的索引，返回其索引值。**

const array = [1, 2, 3];
const result = array.findIndex((currentValue, index, array) => {
  // 返回一个boolean值，判断当前元素是否满足条件
});
console.log(result); // 打印结果为满足条件的第一个元素的索引，如果没有找到，返回-1

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。findIndex函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个boolean值，如果当前元素满足条件，findIndex函数返回该元素的索引，否则继续查找。如果没有找到满足条件的元素，findIndex函数返回-1。

以下是一个使用findIndex函数查找数组中第一个偶数的索引的例子：

const arr = [1, 3, 4, 5, 7];
const firstEvenIndex = arr.findIndex((num) => {
  return num % 2 === 0;
});
console.log(firstEvenIndex); // 打印结果为2

flatMap函数

flatMap函数用于将数组中的每个元素执行指定操作后，将结果扁平化成一个新数组。**

const array = [1, 2, 3];
const newArray = array.flatMap((currentValue, index, array) => {
  // 对每个元素执行指定的操作，返回一个新数组
});
console.log(newArray); // 打印结果为一个新的数组

其中，currentValue为当前元素的值，index为当前元素的索引，array为原数组。flatMap函数会遍历原数组的每一个元素，并将其传入回调函数中进行处理。回调函数需要返回一个数组，flatMap函数会将所有数组压缩成一个新数组。

以下是一个使用flatMap函数将数组中的元素加倍并扁平化成一个新数组的例子：

const arr = [1, 2, 3];
const newArr = arr.flatMap((num) => {
  return [num * 2];
});
console.log(newArr); // 打印结果为[2, 4, 6]

for循环

JavaScript中有三种for循环：for循环、for...in循环和for...of循环。下面将分别介绍每一种循环并举例说明。

for循环

for循环是最常见的循环类型，它可以按照指定次数重复执行一段代码。常见的for循环格式如下：

for (初始化; 条件判断; 操作) {
  // 循环体
}

其中，初始化语句会在循环开始前执行一次，条件判断语句会在每次循环开始前执行，如果结果为true，循环会继续执行，否则循环会停止。操作语句会在每次循环结束后执行。

以下是一个计算1到5的和的例子：

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;
}
console.log(sum); // 打印结果为15

for...in循环

for...in循环用于遍历对象的属性。常见的for...in循环格式如下：

for (let 变量 in 对象) {
  // 循环体
}

其中，变量是一个字符串，代表对象的属性名，对象是要遍历的对象。

以下是一个遍历对象属性的例子：

const obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}
// 打印结果为：
// a: 1
// b: 2
// c: 3

for...of循环

for...of循环用于遍历可迭代对象（如数组、字符串、Map、Set等） 。常见的for...of循环格式如下：

for (let 变量 of 可迭代对象) {
  // 循环体
}

其中，变量是用来存储可迭代对象中的每个元素的。

以下是一个遍历数组元素的例子：

const arr = [1, 2, 3];
for (let num of arr) {
  console.log(num);
}
// 打印结果为：
// 1
// 2
// 3

JavaScript中，可以通过for...in循环遍历Object对象的属性，也可以通过Object.keys()、

Object.values()和Object.entries()等方法获取Object对象的属性键、属性值和属性键值对等信息。

下面将分别介绍这些方法的使用方法和示例。

Object.keys()方法

Object.keys()方法可以返回一个包含Object对象所有属性键的数组。以下是一个获取Object对象属性键的例子：

const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
console.log(keys); // 打印结果为['a', 'b', 'c']

Object.values()方法

Object.values()方法可以返回一个包含Object对象所有属性值的数组。以下是一个获取Object对象属性值的例子：

const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
console.log(values); // 打印结果为[1, 2, 3]

Object.entries()方法

Object.entries()方法可以返回一个包含Object对象所有属性键值对的二维数组。以下是一个获取Object对象属性键值对的例子：

const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);
console.log(entries); // 打印结果为[['a', 1], ['b', 2], ['c', 3]]

Object.getOwnPropertyNames () 方法

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。

以下是一个获取对象自身属性名的例子：

const obj = {a: 1, b: 2, c: 3};
const keys = Object.getOwnPropertyNames(obj);
console.log(keys); // 打印结果为['a', 'b', 'c']

注意，这个方法只返回对象自身的属性名，不包括继承来的属性名。

avatar
文章
阅读
粉丝