Terokai 9 fungsi JavaScript yang biasa digunakan dengan contoh

青灯夜游
Lepaskan: 2022-10-09 19:23:57
ke hadapan
2195 orang telah melayarinya

Terokai 9 fungsi JavaScript yang biasa digunakan dengan contoh

Fungsi ialah salah satu aspek JavaScript yang paling penting. Tanpa fungsi JavaScript, ia akan menjadi sangat terhad. Fungsi dalam javascript digunakan untuk melaksanakan operasi atau tugas tertentu.

Ia boleh ditulis dalam kod atau dibuat menggunakan pembina Fungsi. Fungsi boleh ditakrifkan di dalam fungsi lain, dipanggil fungsi bersarang. Fungsi bersarang boleh mengakses pembolehubah dan parameter fungsi luar.

Ini membolehkan beberapa teknik pengaturcaraan yang menarik dan berkuasa.

Dalam artikel ini, kami akan meneroka 9 fungsi javascript yang biasa digunakan dengan contoh.

1.filter

Fungsi penapis dalam JavaScript digunakan untuk menapis elemen daripada tatasusunan berdasarkan syarat tertentu. Dalam erti kata lain, fungsi penapis akan mengembalikan tatasusunan baharu yang mengandungi hanya unsur-unsur yang memenuhi syarat tersebut.

Sebagai contoh, jika kita mempunyai tatasusunan nombor dan kita hanya mahu mendapatkan nombor genap, kita boleh menggunakan fungsi penapis dengan syarat yang menyemak nombor genap.

Begitu juga, jika kita mempunyai tatasusunan objek dan kita hanya mahu mendapatkan objek dengan nilai sifat tertentu, kita boleh menggunakan fungsi penapis dengan syarat untuk menyemak nilai sifat tersebut. Terdapat banyak kegunaan lain untuk fungsi penapis.

filter示例

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

2.forEach

Javascript foreach loop ialah alat yang mudah untuk mengulang tatasusunan dalam JavaScript. Ia membolehkan anda melaksanakan set kod khusus untuk setiap elemen dalam tatasusunan tanpa menulis gelung for. Kami akan melihat cara gelung foreach berfungsi dan cara anda boleh menggunakannya dalam kod anda sendiri.

Kami akan membincangkan jenis operasi yang boleh kami lakukan menggunakan forEach dalam JavaScript. JavaScript forEach ialah binaan gelung yang boleh digunakan dalam banyak bahasa pengaturcaraan, termasuk JavaScript.

Tujuan utama forEach adalah untuk membenarkan pengaturcara mengulangi koleksi data, seperti tatasusunan atau senarai.

Untuk menggunakan JavaScript forEach, anda memerlukan tatasusunan terlebih dahulu. Ini boleh dibuat menggunakan pembina Array() atau hanya memberikan senarai nilai yang dipisahkan koma kepada pembolehubah:

let myArray = [1,2,3];
Salin selepas log masuk

Sebaik sahaja anda mempunyai tatasusunan anda, anda boleh mula menggelung pada pasangan menggunakan javaScript untukSetiap contoh Ia berulang.

forEach示例

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

3.map

Fungsi peta Javascript ialah kaedah terbina dalam JavaScript yang membolehkan anda memproses elemen dalam tatasusunan setiap elemen.

Kaedah map() dalam JavaScript digunakan untuk mengubah elemen dalam tatasusunan berdasarkan fungsi. Fungsi ini dilaksanakan pada setiap elemen tatasusunan, dengan elemen diluluskan sebagai hujah.

Kaedah peta JavaScript() mengembalikan tatasusunan baharu yang mengandungi elemen yang diubah.

Jika anda mempunyai tatasusunan nombor dan ingin menggandakannya, anda boleh menggunakan kaedah map() dan fungsi yang mendarabkan setiap nombor dengan 2.

Dalam kes ini, tatasusunan asal tidak diubah suai. Sebaliknya, buat tatasusunan baharu dengan nilai berganda:

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

Mari lihat contoh peta() JavaScript yang lain

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']
Salin selepas log masuk

4.concat

Javascript String concatenation ialah proses menggabungkan dua atau lebih rentetan bersama-sama. Cara yang paling biasa untuk menggabungkan rentetan dalam javascript ialah menggunakan operator. Walau bagaimanapun, terdapat cara lain untuk melakukan ini.

Satu cara untuk menggabungkan rentetan dalam javascript ialah menggunakan operator =. Operator ini menambah rentetan di sebelah kanan operator ke rentetan di sebelah kiri operator. Contohnya:

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

Cara lain untuk menggabungkan rentetan dalam javascript ialah menggunakan kaedah .concat().

Kaedah js concat digunakan untuk menggabungkan dua atau lebih rentetan bersama-sama. Ini berguna jika anda ingin membina satu rentetan daripada berbilang rentetan yang lebih kecil.

Kaedah JavaScript concat() tidak mengubah rentetan sedia ada, tetapi mengembalikan rentetan baharu yang mengandungi teks rentetan gabungan.

concat示例

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

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

连接三个数组:

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
Salin selepas log masuk

5.cari

Apabila menggunakan tatasusunan, find Functions boleh menjadi alat yang berguna. Fungsi ini akan mengembalikan elemen pertama dalam tatasusunan yang memenuhi syarat yang diberikan.

例如,

Jika kita mempunyai tatasusunan nombor dan kita ingin mencari nombor pertama yang lebih besar daripada 5, kita boleh menggunakan fungsi cari. Fungsi cari JavaScript mengambil panggilan balik sebagai hujah pertamanya.

Panggil balik ini diluluskan tiga parameter: elemen semasa sedang diproses, indeks elemen dan tatasusunan itu sendiri.

Jika elemen memenuhi syarat, panggilan balik harus mengembalikan benar, jika tidak, ia mengembalikan palsu. Dalam contoh kami, kami akan mengembalikan benar jika elemen semasa lebih besar daripada 5.

Keupayaan carian JavaScript tidak terhad kepada nombor. Ia juga boleh digunakan dengan tali.

find示例

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

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

function checkMarks(mark) {
  return mark > 90;
}
//  98
Salin selepas log masuk

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}
Salin selepas log masuk

6.findIndex

Apabila menggunakan tatasusunan, kadangkala Anda mungkin perlu mencari indeks elemen tertentu. Ini boleh dilakukan menggunakan kaedah JavaScript findIndex().

Kaedah findIndex JavaScript mengembalikan indeks elemen pertama dalam tatasusunan yang memenuhi fungsi ujian yang disediakan. Jika tidak, ia mengembalikan -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
Salin selepas log masuk

findIndex 另一个例子

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

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

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
Salin selepas log masuk

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"];
Salin selepas log masuk

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

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

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
Salin selepas log masuk

最后

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

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

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

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

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

【相关推荐:javascript视频教程编程基础视频

Atas ialah kandungan terperinci Terokai 9 fungsi JavaScript yang biasa digunakan dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!