일반적으로 사용되는 9가지 JavaScript 함수를 예제와 함께 살펴보세요

함수는 JavaScript의 가장 중요한 측면 중 하나입니다. JavaScript 기능이 없으면 매우 제한적입니다. 자바스크립트의 함수는 특정 작업이나 작업을 수행하는 데 사용됩니다.

코드로 작성하거나 함수 생성자를 사용하여 만들 수 있습니다. 함수는 중첩 함수라고 불리는 다른 함수 내부에서 정의될 수 있습니다. 중첩 함수는 외부 함수의 변수 및 매개변수에 액세스할 수 있습니다.

이를 통해 흥미롭고 강력한 프로그래밍 기술을 사용할 수 있습니다.

이 글에서는 일반적으로 사용되는 9가지 자바스크립트 함수를 예제와 함께 살펴보겠습니다.

1.filter

JavaScript의 필터 기능은 특정 조건에 따라 배열에서 요소를 필터링하는 데 사용됩니다. 즉, 필터 함수는 조건을 만족하는 요소만 포함하는 새 배열을 반환합니다.

예를 들어, 숫자 배열이 있고 짝수만 얻으려는 경우 짝수를 확인하는 조건과 함께 필터 기능을 사용할 수 있습니다.

마찬가지로 객체 배열이 있고 특정 속성 값을 가진 객체만 가져오려는 경우 조건과 함께 필터 기능을 사용하여 해당 속성 값을 확인할 수 있습니다. 필터 기능에는 다른 용도가 많이 있습니다.

필터 예filter示例

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 루프는 JavaScript에서 배열을 반복하는 데 편리한 도구입니다. for 루프를 작성하지 않고도 배열의 각 요소에 대해 특정 코드 세트를 실행할 수 있습니다. foreach 루프가 작동하는 방식과 이를 사용자 코드에서 사용할 수 있는 방법을 살펴보겠습니다.

JavaScript에서 forEach를 사용하여 어떤 작업을 수행할 수 있는지 논의하겠습니다. JavaScript forEach는 JavaScript를 포함한 다양한 프로그래밍 언어에서 사용할 수 있는 반복 구문입니다.

forEach의 주요 목적은 프로그래머가 배열이나 목록과 같은 데이터 컬렉션을 반복할 수 있도록 하는 것입니다.

🎜JavaScript forEach를 사용하려면 먼저 배열이 필요합니다. 이는 Array() 생성자를 사용하거나 간단히 쉼표로 구분된 값 목록을 변수에 할당하여 생성할 수 있습니다. 🎜

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

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

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

🎜 배열이 있으면 javaScript forEach 예제 루프를 사용하여 반복을 시작할 수 있습니다. 🎜🎜forEach example🎜

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🎜🎜🎜Javascript 맵 함수는 JavaScript에 내장된 메소드로, 모든 요소를 ​​배열로 만듭니다. 🎜🎜JavaScript의 map() 메서드는 함수를 기반으로 배열의 요소를 변환하는 데 사용됩니다. 함수는 배열의 각 요소에 대해 실행되며 해당 요소는 인수로 전달됩니다. 🎜🎜JavaScript map() 메서드는 변환된 요소가 포함된 새 배열을 반환합니다. 🎜🎜숫자 배열이 있고 이를 두 배로 늘리고 싶다면 map() 메서드와 각 숫자에 2를 곱하는 함수를 사용할 수 있습니다. 🎜🎜이 경우 원본 배열은 수정되지 않습니다. 대신, 두 배의 값으로 새 배열을 만듭니다. 🎜

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

🎜 다른 JavaScript map() 예제를 살펴보겠습니다.🎜

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

🎜4.concat🎜🎜🎜Javascript 문자열 연결은 프로세스입니다. 두 개 이상의 문자열을 함께 연결하는 것입니다. 자바스크립트에서 문자열을 연결하는 가장 일반적인 방법은 + 연산자를 사용하는 것입니다. 그러나 이를 수행하는 다른 방법이 있습니다. 🎜🎜자바스크립트에서 문자열을 연결하는 한 가지 방법은 += 연산자를 사용하는 것입니다. 이 연산자는 연산자 오른쪽의 문자열을 연산자 왼쪽의 문자열에 추가합니다. 예: 🎜

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

🎜Javascript에서 문자열을 연결하는 또 다른 방법은 .concat() 메서드를 사용하는 것입니다. 🎜🎜js concat 메소드는 두 개 이상의 문자열을 병합하는 데 사용됩니다. 이는 여러 개의 작은 문자열로 단일 문자열을 만들려는 경우에 유용합니다. 🎜🎜JavaScript concat() 메서드는 기존 문자열을 변경하지 않지만 결합된 문자열 텍스트가 포함된 새 문자열을 반환합니다. 🎜🎜연결 예🎜

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

// Hey!, this is Akashminds, have

🎜3개의 배열 연결:🎜rrreee

🎜5.find🎜🎜🎜배열을 사용하는 경우, 찾기 기능은 유용한 도구가 될 수 있습니다. 이 함수는 주어진 조건을 만족하는 배열의 첫 번째 요소를 반환합니다. 🎜🎜예를 들어, 🎜🎜숫자 배열이 있고 5보다 큰 첫 번째 숫자를 찾으려면 찾기 기능을 사용할 수 있습니다. JavaScript find 함수는 콜백을 첫 번째 인수로 사용합니다. 🎜🎜이 콜백에는 처리 중인 현재 요소, 요소의 인덱스, 배열 자체라는 세 가지 매개변수가 전달됩니다. 🎜🎜요소가 조건을 충족하면 콜백은 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다. 이 예에서는 현재 요소가 5보다 크면 true를 반환합니다. 🎜🎜Javascript 조회 기능은 숫자에만 국한되지 않습니다. 문자열과 함께 사용할 수도 있습니다. 🎜🎜예제 찾기🎜rrreee🎜다른 예 찾기🎜rrreee🎜🎜6.findIndex🎜🎜🎜배열로 작업할 때 때로는 특정 항목의 인덱스를 찾아야 할 수도 있습니다. 요소. 이는 JavaScript findIndex() 메소드를 사용하여 수행할 수 있습니다. 🎜🎜JavaScript findIndex 메소드는 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소 인덱스를 반환합니다. 그렇지 않으면 -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视频教程、编程基础视频】

위 내용은 일반적으로 사용되는 9가지 JavaScript 함수를 예제와 함께 살펴보세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!