Explorez 9 fonctions JavaScript couramment utilisées avec des exemples

Les fonctions sont l'un des aspects les plus importants de JavaScript. Sans les fonctions JavaScript, ce serait très limité. Les fonctions en javascript sont utilisées pour effectuer des opérations ou des tâches spécifiques.

Ils peuvent être écrits en code ou créés à l'aide du constructeur Function. Les fonctions peuvent être définies à l'intérieur d'autres fonctions, appelées fonctions imbriquées. Les fonctions imbriquées peuvent accéder aux variables et paramètres de la fonction externe.

Cela permet des techniques de programmation intéressantes et puissantes.

Dans cet article, nous explorerons 9 fonctions javascript couramment utilisées avec des exemples.

1.filter

La fonction de filtre en JavaScript est utilisée pour filtrer les éléments d'un tableau en fonction de conditions spécifiques. En d’autres termes, la fonction de filtre renverra un nouveau tableau contenant uniquement les éléments qui satisfont à la condition.

Par exemple, si nous avons un tableau de nombres et que nous voulons uniquement obtenir des nombres pairs, nous pouvons utiliser une fonction de filtre avec une condition qui vérifie les nombres pairs.

De même, si nous avons un tableau d'objets et que nous voulons uniquement obtenir des objets avec une certaine valeur de propriété, nous pouvons utiliser une fonction de filtre avec une condition pour vérifier cette valeur de propriété. Il existe de nombreuses autres utilisations de la fonction de filtre.

exemple de filtrefilter示例

let numbers = [15, 2, 50, 55, 90, 5, 4, 9, 10];
console.log(numbers.filter(number => number % 2 == 1));  // [15, 55, 5, 9]

2.forEach

Javascript foreach 循环是在 JavaScript 中迭代数组的便捷工具。它允许您为数组中的每个元素执行一组特定的代码，而无需编写 for 循环。我们将看看 foreach 循环是如何工作的，以及如何在自己的代码中使用它。

我们将讨论我们可以在 JavaScript 中使用 forEach 执行什么样的操作。JavaScript forEach 是一种循环结构，可用于多种编程语言，包括 JavaScript。

forEach 的主要目的是允许程序员迭代数据集合，例如数组或列表。

要使用 JavaScript forEach，您首先需要一个数组。这可以使用 Array() 构造函数创建，或者只需将逗号分隔的值列表分配给变量：

let myArray = [1,2,3];

一旦你有了你的数组，你就可以开始使用 javaScript forEach示例 循环对其进行迭代。

forEach示例

    let text = "";
    const fruits = ["Apple", "Orange", "Cherry", "Banana"];
    fruits.forEach((item,index)=>{
        text += item +  ',' ; 
    });
    console.log(text)
    // Apple,Orange,Cherry,Banana,

3.map

Javascript map 函数是 JavaScript 中的一个内置方法，它允许您处理数组中的每个元素。

JavaScript 中的 map() 方法用于根据函数转换数组中的元素。该函数在数组的每个元素上执行，元素作为参数传递。

JavaScript map() 方法返回一个包含转换后元素的新数组。

如果您有一个数字数组并且想要将它们加倍，您可以使用 map() 方法和一个将每个数字乘以 2 的函数。

在这种情况下，原始数组不会被修改。相反，使用双倍值创建一个新数组：

let arr = [1, 2, 3];
let newArr = arr.map(num => num * 2);
console.log(newArr)
//   1, 4, 9

我们来看另一个 JavaScript map()的例子

const users = [
  {firstname : "Abhishek", lastname: "kumar"},
  {firstname : "jay", lastname: "sharma"},
  {firstname : "rupal", lastname: "sharma"}
];

users.map(getFullName);

function getFullName(item) {
  return [item.firstname,item.lastname].join(", ");
}

//  ['Abhishek, kumar', 'jay, sharma', 'rupal, sharma']

4.concat

Javascript 字符串连接是将两个或多个字符串连接在一起的过程。在 javascript 中连接字符串的最常见方法是使用 + 运算符。但是，还有其他方法可以做到这一点。

在 javascript 中连接字符串的一种方法是使用 += 运算符。该运算符将运算符右侧的字符串添加到运算符左侧的字符串中。例如：

    let str1 = "Hello";
    let str2 = "World";
    str1 += str2; 
    console.log(str1) //Hello World

在 javascript 中连接字符串的另一种方法是使用 .concat() 方法。

js concat 方法用于将两个或多个字符串合并在一起。如果您想用多个较小的字符串构建单个字符串，这很有用。

JavaScript concat() 方法不会更改现有字符串，而是返回一个包含合并字符串文本的新字符串。

concat示例

const arr1 = ["Abhishek", "rupal"];
const arr2 = ["divya", "rahul", "harsh"];

const allUsers = arr1.concat(arr2);
//  Abhishek, rupal, divya, rahul, harsh

连接三个数组：

const arr1 = ["Abhishek", "rupal"];
const arr2 = ["divya", "rahul", "harsh"];
const arr3 = ["kamal", "rohit"];

const allUsers = arr1.concat(arr2, arr3);
 
// Abhishek, rupal, divya, rahul, harsh, kamal, rohit

5.find

使用数组时，find 函数可能是一个有用的工具。此函数将返回数组中满足给定条件的第一个元素。

例如，

如果我们有一个数字数组并且我们想找到第一个大于 5 的数字，我们可以使用 find 函数。JavaScript find 函数将回调作为其第一个参数。

此回调传递三个参数：正在处理的当前元素、该元素的索引和数组本身。

如果元素满足条件，回调应该返回 true，否则返回 false。在我们的示例中，如果当前元素大于 5，我们将返回 true。

Javascript 查找功能不仅限于数字。它也可以用于字符串。

find示例

const marks = [30, 70, 98, 77];

console.log(marks.find(checkMarks));

function checkMarks(mark) {
  return mark > 90;
}
//  98

find另一个例子

const fruits = [
  { name: "apple", count: 10 },
  { name: "banana", count: 18 },
  { name: "mango", count: 3 }
];

const findMango = fruits.find(fruit =>fruit.name === "mango");

// { name: "mango", count: 3}

2.forEach

La boucle foreach Javascript est un outil pratique pour itérer des tableaux en JavaScript. Il vous permet d'exécuter un ensemble de code spécifique pour chaque élément du tableau sans écrire de boucle for. Nous verrons comment fonctionne la boucle foreach et comment vous pouvez l'utiliser dans votre propre code.

Nous discuterons du type d'opérations que nous pouvons effectuer en utilisant forEach en JavaScript. JavaScript forEach est une construction en boucle qui peut être utilisée dans de nombreux langages de programmation, notamment JavaScript.

L'objectif principal de forEach est de permettre aux programmeurs de parcourir une collection de données, telle qu'un tableau ou une liste.

const marks = [30, 70, 98, 77];

console.log(marks.findIndex(checkMarks));

function checkMarks(mark) {
  return mark > 90;
}
//  2

const fruits = [
  { name: "apple", count: 10 },
  { name: "banana", count: 18 },
  { name: "mango", count: 3 }
];

const findMango = fruits.findIndex(fruit =>fruit.name === "mango");
// 2

🎜3.map🎜🎜🎜La fonction de carte Javascript est une méthode intégrée en JavaScript qui vous permet de traiter des éléments dans un tableau pour chaque élément. 🎜🎜La méthode map() en JavaScript est utilisée pour transformer des éléments dans un tableau basé sur une fonction. La fonction est exécutée sur chaque élément du tableau, avec l'élément passé en argument. 🎜🎜La méthode JavaScript map() renvoie un nouveau tableau contenant les éléments transformés. 🎜🎜Si vous disposez d'un tableau de nombres et que vous souhaitez les doubler, vous pouvez utiliser la méthode map() et une fonction qui multiplie chaque nombre par 2. 🎜🎜Dans ce cas, le tableau d'origine n'est pas modifié. Au lieu de cela, créez un nouveau tableau avec la valeur doublée : 🎜

const birds = ["Birds", "peacock", "Dove", "Sparrow"];
console.log(birds.includes("Dove"));
// true

Copier après la connexion

Copier après la connexion

🎜 Regardons un autre exemple de map() JavaScript🎜

  let text = "Hello this is akashminds";
  console.log(text.split(" "));
  // ["Hello", "this", "is", "akashminds"];

Copier après la connexion

Copier après la connexion

🎜4.concat🎜🎜🎜Concaténation de chaînes Javascript Est-ce le processus de concaténer deux ou plusieurs chaînes ensemble. La manière la plus courante de concaténer des chaînes en javascript consiste à utiliser l’opérateur +. Cependant, il existe d'autres moyens de procéder. 🎜🎜Une façon de concaténer des chaînes en javascript consiste à utiliser l'opérateur +=. Cet opérateur ajoute la chaîne du côté droit de l'opérateur à la chaîne du côté gauche de l'opérateur. Par exemple : 🎜

  let text = "Hello this is akashminds";
  console.log(text.split(" ", 3));
  // ["akashminds"];

Copier après la connexion

Copier après la connexion

🎜Une autre façon de concaténer des chaînes en javascript consiste à utiliser la méthode .concat(). La méthode 🎜🎜js concat est utilisée pour fusionner deux ou plusieurs chaînes ensemble. Ceci est utile si vous souhaitez créer une seule chaîne à partir de plusieurs chaînes plus petites. 🎜🎜La méthode JavaScript concat() ne modifie pas la chaîne existante, mais renvoie une nouvelle chaîne contenant le texte de la chaîne combinée. 🎜🎜exemple de concaténation🎜

const test = "Hey!, this is Akashminds, have a nice day ahead.";
console.log(test.substr(0, 30));

// Hey!, this is Akashminds, have

Copier après la connexion

Copier après la connexion

🎜Concaténer trois tableaux :🎜rrreee

🎜5.find🎜🎜🎜Lors de l'utilisation de tableaux, la fonction find peut être un outil utile. Cette fonction renverra le premier élément du tableau qui satisfait à la condition donnée. 🎜🎜Par exemple, 🎜🎜Si nous avons un tableau de nombres et que nous voulons trouver le premier nombre supérieur à 5, nous pouvons utiliser la fonction find. La fonction de recherche JavaScript prend un rappel comme premier argument. 🎜🎜Ce rappel reçoit trois paramètres : l'élément en cours de traitement, l'index de l'élément et le tableau lui-même. 🎜🎜Si l'élément remplit la condition, le rappel doit renvoyer vrai, sinon il renvoie faux. Dans notre exemple, nous retournerons true si l'élément actuel est supérieur à 5. 🎜🎜La fonctionnalité de recherche Javascript ne se limite pas aux chiffres. Il peut également être utilisé avec des cordes. 🎜🎜trouver un exemple🎜rrreee🎜trouver un autre exemple🎜rrreee🎜🎜6.findIndex🎜🎜🎜Lorsque vous travaillez avec des tableaux, vous devrez parfois trouver l'index d'un élément spécifique élément. Cela peut être fait en utilisant la méthode JavaScript findIndex(). 🎜🎜La méthode JavaScript findIndex renvoie l'index du premier élément du tableau qui satisfait à la fonction de test fournie. Sinon, il renvoie -1. 🎜

findindex JavaScript 方法类似于 JavaScript find 函数，但它返回索引而不是值。

findIndex() 函数有两个参数，一个回调函数和一个可选对象，该对象可用作回调函数中的 this 关键字。

findIndex示例

const marks = [30, 70, 98, 77];

console.log(marks.findIndex(checkMarks));

function checkMarks(mark) {
  return mark > 90;
}
//  2

findIndex 另一个例子

const fruits = [
  { name: "apple", count: 10 },
  { name: "banana", count: 18 },
  { name: "mango", count: 3 }
];

const findMango = fruits.findIndex(fruit =>fruit.name === "mango");
// 2

7.includes

JavaScript includes() 是一个内置函数，用于检查一个字符串是否包含另一个字符串。如果找到指定的字符串，则返回true，否则返回false。

JavaScript包含函数区分大小写，这意味着它将区分大小写字母，这意味着它将“Java”和“java”视为两个不同的字符串。

要检查 js 字符串是否包含另一个字符串，只需将要检查的字符串作为第一个参数传入，将要检查的字符串作为第二个参数传入。

例如，让我们检查字符串“Hello World”是否包含单词“world”。由于搜索区分大小写，因此将返回 false。

const birds = ["Birds", "peacock", "Dove", "Sparrow"];
console.log(birds.includes("Dove"));
// true

8.split

JavaScript中的split函数是一个String函数，用于将一个字符串拆分成一个子字符串数组，并返回新的数组。

原始字符串没有被修改。split 函数的语法是： split(str, separator, limit)

str - 要拆分的字符串。

separator – 用作分隔符的字符。如果省略，则使用单个空格 (' ') 作为分隔符。

limit -- 一个整数，指定要进行的拆分次数。如果省略，字符串将被拆分为一个没有限制的子字符串数组。

分隔符是一个字符串，它定义了应该在哪里拆分字符串。限制是一个整数，指定最大拆分数。

如果没有指定分隔符，字符串将被空白字符分割。如果未指定限制，则默认为 0，即没有限制。

Javascript split 函数的返回值是一个子字符串数组。如果字符串不能被拆分，它将返回一个空数组。

split示例

  let text = "Hello this is akashminds";
  console.log(text.split(" "));
  // ["Hello", "this", "is", "akashminds"];

另一个使用限制参数的 split示例

  let text = "Hello this is akashminds";
  console.log(text.split(" ", 3));
  // ["akashminds"];

9. substr

JavaScript substr 函数用于提取字符串的一部分。它有两个参数：开始位置和子字符串的长度。该函数返回一个新字符串，其中包含原始字符串的提取部分。

如果起始位置为负数，则从字符串的末尾开始计数。如果省略长度参数，JavaScript substr 会提取从字符串开始位置到结尾的所有字符。

javascript substr 函数可用于提取字符串的一部分或通过连接两个子字符串来创建新字符串。它还可以用于找出给定字符串中是否存在某个字符或子字符串。

const test = "Hey!, this is Akashminds, have a nice day ahead.";
console.log(test.substr(0, 30));

// Hey!, this is Akashminds, have

最后

您可以在日常使用中找到许多其他重要功能，但这些是我最常用的 9 个 JavaScript 功能。

作为用途最广泛、用途最广泛的编程语言之一，JavaScript 有着悠久的历史和光明的未来。在本文中，我们将通过示例探讨最常用的 9 个 JavaScript 函数。

在 JavaScript 中使用函数有很多优点。 首先，如果你有很多代码需要重用，把它放在一个函数中可以很容易地在你需要的时候再次调用它。

其次，使用函数可以通过将代码分解成更小的部分来帮助您提高代码的可读性。

这些是最常用的 9 个 JavaScript 函数以及示例。掌握这些功能将帮助你编写更好的代码，成为更精通的程序员。

【相关推荐：javascript视频教程、编程基础视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!