透過範例探索 9 個常用的 javascript 函數

函數是 JavaScript 最重要的面向之一。如果沒有 JavaScript 函數，它將非常有限。 javascript 中的函數用於執行特定的操作或任務。

它們可以寫入程式碼中，也可以使用 Function 建構函式建立。 函數可以定義在其他函數內部，稱為巢​​狀函數。巢狀函數可以存取外部函數的變數和參數。

這允許一些有趣且強大的程式設計技術。

在本文中，我們將透過範例探索 9 個常用的 javascript 函數。

1.filter

JavaScript 中的 filter 函數用於根據特定條件從陣列中過濾掉元素。換句話說，過濾器函數將傳回一個新數組，其中僅包含那些滿足條件的元素。

例如，如果我們有一個數字數組並且我們只想獲得偶數，我們可以使用帶有檢查偶數條件的過濾器函數。

類似地，如果我們有一個對象數組並且我們只想獲取具有某個屬性值的對象，我們可以使用帶有條件的過濾器函數來檢查該屬性值。過濾器功能還有許多其他用途。

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}

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中文網其他相關文章！