Entdecken Sie 9 häufig verwendete JavaScript-Funktionen anhand von Beispielen

Funktionen sind einer der wichtigsten Aspekte von JavaScript. Ohne JavaScript-Funktionen wäre es sehr eingeschränkt. Funktionen in Javascript werden verwendet, um bestimmte Vorgänge oder Aufgaben auszuführen.

Sie können im Code geschrieben oder mit dem Funktionskonstruktor erstellt werden. Funktionen können innerhalb anderer Funktionen definiert werden, sogenannte verschachtelte Funktionen. Verschachtelte Funktionen können auf die Variablen und Parameter der äußeren Funktion zugreifen.

Dies ermöglicht einige interessante und leistungsstarke Programmiertechniken.

In diesem Artikel werden wir 9 häufig verwendete Javascript-Funktionen anhand von Beispielen untersuchen.

1.filter

Die Filterfunktion in JavaScript wird verwendet, um Elemente aus einem Array basierend auf bestimmten Bedingungen herauszufiltern. Mit anderen Worten: Die Filterfunktion gibt ein neues Array zurück, das nur die Elemente enthält, die die Bedingung erfüllen.

Wenn wir beispielsweise ein Array von Zahlen haben und nur gerade Zahlen erhalten möchten, können wir eine Filterfunktion mit einer Bedingung verwenden, die nach geraden Zahlen prüft.

Ähnlich können wir, wenn wir ein Array von Objekten haben und nur Objekte mit einem bestimmten Eigenschaftswert erhalten möchten, eine Filterfunktion mit einer Bedingung verwenden, um diesen Eigenschaftswert zu überprüfen. Es gibt viele weitere Verwendungsmöglichkeiten für die Filterfunktion.

Filterbeispielfilter示例

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

Javascript foreach-Schleife ist ein praktisches Tool zum Iterieren von Arrays in JavaScript. Es ermöglicht Ihnen, für jedes Element im Array einen bestimmten Codesatz auszuführen, ohne eine for-Schleife schreiben zu müssen. Wir schauen uns an, wie die foreach-Schleife funktioniert und wie Sie sie in Ihrem eigenen Code verwenden können.

Wir werden besprechen, welche Art von Operationen wir mit forEach in JavaScript ausführen können. JavaScript forEach ist ein Schleifenkonstrukt, das in vielen Programmiersprachen, einschließlich JavaScript, verwendet werden kann.

Der Hauptzweck von forEach besteht darin, Programmierern die Iteration über eine Datensammlung, beispielsweise ein Array oder eine Liste, zu ermöglichen.

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🎜🎜🎜Die Javascript-Map-Funktion ist eine integrierte Methode in JavaScript, mit der Sie Elemente in verarbeiten können ein Array für jedes Element. 🎜🎜Die Methode map() in JavaScript wird verwendet, um Elemente in einem Array basierend auf einer Funktion zu transformieren. Die Funktion wird für jedes Element des Arrays ausgeführt, wobei das Element als Argument übergeben wird. 🎜🎜Die JavaScript-Methode „map()“ gibt ein neues Array zurück, das die transformierten Elemente enthält. 🎜🎜Wenn Sie ein Array von Zahlen haben und diese verdoppeln möchten, können Sie die Methode map() und eine Funktion verwenden, die jede Zahl mit 2 multipliziert. 🎜🎜In diesem Fall wird das ursprüngliche Array nicht geändert. Erstellen Sie stattdessen ein neues Array mit dem verdoppelten Wert: 🎜

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

Nach dem Login kopieren

Nach dem Login kopieren

🎜 Schauen wir uns ein weiteres JavaScript-map()-Beispiel an🎜

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

Nach dem Login kopieren

Nach dem Login kopieren

🎜4.concat🎜🎜🎜Javascript String Concatenation Ist der Prozess der Verkettung von zwei oder mehr Zeichenfolgen. Die gebräuchlichste Methode zum Verketten von Zeichenfolgen in Javascript ist die Verwendung des +-Operators. Es gibt jedoch auch andere Möglichkeiten, dies zu tun. 🎜🎜Eine Möglichkeit, Zeichenfolgen in Javascript zu verketten, ist die Verwendung des Operators +=. Dieser Operator fügt die Zeichenfolge auf der rechten Seite des Operators zur Zeichenfolge auf der linken Seite des Operators hinzu. Zum Beispiel: 🎜

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

Nach dem Login kopieren

Nach dem Login kopieren

🎜Eine andere Möglichkeit, Zeichenfolgen in Javascript zu verketten, ist die Verwendung der Methode .concat(). Die Concat-Methode von 🎜🎜js wird verwendet, um zwei oder mehr Zeichenfolgen zusammenzuführen. Dies ist nützlich, wenn Sie eine einzelne Zeichenfolge aus mehreren kleineren Zeichenfolgen erstellen möchten. 🎜🎜Die JavaScript-Methode concat() ändert nicht die vorhandene Zeichenfolge, sondern gibt eine neue Zeichenfolge zurück, die den kombinierten Zeichenfolgentext enthält. 🎜🎜concat-Beispiel🎜

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

// Hey!, this is Akashminds, have

Nach dem Login kopieren

Nach dem Login kopieren

🎜Drei Arrays verketten:🎜rrreee

🎜5.find🎜🎜🎜Bei der Verwendung von Arrays , Die Suchfunktion kann ein nützliches Werkzeug sein. Diese Funktion gibt das erste Element im Array zurück, das die angegebene Bedingung erfüllt. 🎜🎜Zum Beispiel: 🎜🎜Wenn wir ein Array von Zahlen haben und die erste Zahl größer als 5 finden möchten, können wir die Suchfunktion verwenden. Die JavaScript-Suchfunktion verwendet einen Rückruf als erstes Argument. 🎜🎜Diesem Rückruf werden drei Parameter übergeben: das aktuell verarbeitete Element, der Index des Elements und das Array selbst. 🎜🎜Wenn das Element die Bedingung erfüllt, sollte der Callback true zurückgeben, andernfalls gibt er false zurück. In unserem Beispiel geben wir true zurück, wenn das aktuelle Element größer als 5 ist. 🎜🎜Die Javascript-Suchfunktion ist nicht auf Zahlen beschränkt. Es kann auch mit Saiten verwendet werden. 🎜🎜Beispiel finden🎜rrreee🎜weiteres Beispiel finden🎜rrreee🎜🎜6.findIndex🎜🎜🎜Bei der Arbeit mit Arrays müssen Sie manchmal den Index eines bestimmten Elements finden Element. Dies kann mit der JavaScript-Methode findIndex() erfolgen. 🎜🎜Die JavaScript-Methode findIndex gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt. Andernfalls wird -1 zurückgegeben. 🎜

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视频教程、编程基础视频】

Das obige ist der detaillierte Inhalt vonEntdecken Sie 9 häufig verwendete JavaScript-Funktionen anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!