ホームページ > ウェブフロントエンド > jsチュートリアル > 一般的に使用される 9 つの JavaScript 関数を例とともに見てみましょう

一般的に使用される 9 つの JavaScript 関数を例とともに見てみましょう

青灯夜游
リリース: 2022-10-09 19:23:57
転載
2231 人が閲覧しました

一般的に使用される 9 つの JavaScript 関数を例とともに見てみましょう

関数は JavaScript の最も重要な側面の 1 つです。 JavaScript 関数がないと、機能が非常に制限されてしまいます。 JavaScript の関数は、特定の操作やタスクを実行するために使用されます。

これらはコードで記述することも、関数コンストラクターを使用して作成することもできます。 関数は、ネストされた関数と呼ばれる、他の関数の内部で定義できます。ネストされた関数は、外部関数の変数とパラメーターにアクセスできます。

これにより、興味深く強力なプログラミング手法が可能になります。

この記事では、一般的に使用される 9 つの JavaScript 関数を例を挙げて説明します。

1.filter

JavaScript のフィルター関数は、特定の条件に基づいて配列から要素をフィルターで除外するために使用されます。つまり、フィルター関数は、条件を満たす要素のみを含む新しい配列を返します。

たとえば、数値の配列があり、偶数のみを取得したい場合は、偶数をチェックする条件を指定したフィルター関数を使用できます。

同様に、オブジェクトの配列があり、特定のプロパティ値を持つオブジェクトのみを取得したい場合は、条件を指定してフィルター関数を使用して、そのプロパティ値をチェックできます。フィルター関数には他にも多くの用途があります。

フィルターの例

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 サンプル Iterate を使用してループを開始できます。 。

各例

    let text = "";
    const fruits = ["Apple", "Orange", "Cherry", "Banana"];
    fruits.forEach((item,index)=>{
        text += item +  ',' ; 
    });
    console.log(text)
    // Apple,Orange,Cherry,Banana,
ログイン後にコピー

3.map

Javascript マップ関数は JavaScript の組み込みメソッドであり、次のことを可能にします。配列内の各要素を処理します。

JavaScript の map() メソッドは、関数に基づいて配列内の要素を変換するために使用されます。この関数は、引数として渡された要素を使用して、配列の各要素に対して実行されます。

JavaScript の map() メソッドは、変換された要素を含む新しい配列を返します。

数値の配列があり、それを 2 倍にしたい場合は、map() メソッドと各数値を 2 で乗算する関数を使用できます。

この場合、元の配列は変更されません。代わりに、値を 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文字列の連結は、2 つ以上の文字列を結合するプロセスです。 JavaScript で文字列を連結する最も一般的な方法は、演算子を使用することです。ただし、これを行う方法は他にもあります。

JavaScript で文字列を連結する 1 つの方法は、= 演算子を使用することです。この演算子は、演算子の右側の文字列を演算子の左側の文字列に追加します。例:

    let str1 = "Hello";
    let str2 = "World";
    str1 += str2; 
    console.log(str1) //Hello World
ログイン後にコピー
JavaScript で文字列を連結するもう 1 つの方法は、.concat() メソッドを使用することです。

js concat メソッドは、2 つ以上の文字列を結合するために使用されます。これは、複数の小さな文字列から 1 つの文字列を作成する場合に便利です。

JavaScript concat() メソッドは、既存の文字列を変更しませんが、結合された文字列のテキストを含む新しい文字列を返します。

連結例

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

const allUsers = arr1.concat(arr2);
//  Abhishek, rupal, divya, rahul, harsh
ログイン後にコピー

3 つの配列を連結します:

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 関数は、最初の引数としてコールバックを受け取ります。

このコールバックには、処理されている現在の要素、要素のインデックス、配列自体の 3 つのパラメータが渡されます。

要素が条件を満たしている場合、コールバックは true を返し、それ以外の場合は false を返します。この例では、現在の要素が 5 より大きい場合に true を返します。

JavaScript の検索機能は数値に限定されません。文字列でも使用できます。

例を見つける

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

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

function checkMarks(mark) {
  return mark > 90;
}
//  98
ログイン後にコピー

別の例を見つける

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}
ログイン後にコピー

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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート