位置:首页 > web前端 > javascript

JavaScript编程常用函数推荐

dearweb 发布:2022-10-12 10:51:11阅读:

作为一种编程语言,JavaScript 具有许多使其独特且重要的特性。这些功能之一是功能。Javascript 函数对于 Angular 等其他框架也很重要。Angular 是一个 JavaScript 框架,用于在 JavaScript、HTML 和 TypeScript 中构建 Web 应用程序和应用程序。Angular 被全世界数百万的开发人员使用。它是用于构建单页应用程序的最流行的框架之一。本文将通过示例推荐常用的 JavaScript 函数及其使用方法。

1. JavaScript 过滤器

JavaScript 中的 filter 函数用于根据特定条件从数组中过滤掉元素。换句话说,过滤器函数将返回一个新数组,其中仅包含满足条件的那些元素。

例如,如果我们有一个数字数组并且我们只想获得偶数,我们可以使用带有检查偶数条件的过滤器函数。

类似地,如果我们有一个对象数组并且只想获取具有某个属性值的对象,我们可以使用带有检查该属性值的条件的过滤器函数。过滤器功能还有许多其他用途。

JavaScript 过滤器示例:

// Array Filter function 
let numbers = [15, 2, 50, 55, 90, 5, 4, 9, 10]; 
console.log(numbers.filter(number => number % 2 == 1)); // Filtering odd numbers => result is [15, 55, 5, 9]

2. Javascript foreach

 foreach 循环是在 JavaScript 中迭代数组的便捷工具。它允许您为数组中的每个元素执行一组特定的代码,而无需编写 for 循环。我们将看看 foreach 循环是如何工作的,以及如何在代码中使用它。

我们将讨论我们可以在 JavaScript 中使用 foreach 执行哪些类型的操作。JavaScript Foreach 是一种循环结构,可用于多种编程语言,包括 JavaScript。

foreach 的主要目的是允许程序员迭代数据集合,例如数组或列表。


要使用 JavaScript foreach,首先需要一个数组。这可以使用 Array() 构造函数或简单地将逗号分隔的值列表分配给变量来创建:


一旦你有了你的数组,你就可以使用 JavaScript foreach 循环开始迭代它。foreach 循环的语法如下:


JavaScript foreach 示例:


<p id="items"></p>
<script>
 let text = ""; 
 const fruits = ["Apple", "Orange", "Cherry", "Banana"]; fruits.forEach(myFunction); 
 document.getElementById("items").innerHTML = text; 
function myFunction(item, index) { 
  index =index + 1 text += index + ": " + item + ""; 
} 
</script>

3. JavaScript 地图

JavaScript map 函数是 JavaScript 中的一个内置方法,它允许您处理数组中的每个元素。

JavaScript 中的 map() 方法根据函数转换数组中的元素。该函数在数组的每个元素上执行,元素作为参数传递。

JavaScript map() 方法返回一个包含转换后元素的新数组。

如果您有一个数字数组并且想要将它们加倍,您可以使用 map() 方法和一个将每个数字乘以 2 的函数。

在这种情况下,原始数组不会被修改。相反,使用双倍值创建一个新数组:

var newArr = arr.map(num => num * 2);

让我们看另一个 JavaScript 地图函数的例子。

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(", ");
} 
// Output: Abhishek kumar, jay sharma, rupal sharma,

4. JavaScript 连接

JavaScript 字符串连接是将两个或多个字符串连接在一起的过程。在 JavaScript 中连接字符串的最常见方法是使用 + 运算符。但是,还有其他方法可以做到这一点。

在 JavaScript 中连接字符串的一种方法是使用 += 运算符。该运算符将运算符右侧的字符串添加到运算符左侧的字符串中。例如:

str1 += str2; // 现在 str1 等于“Hello World”

在 JavaScript 中连接字符串的另一种方法是使用 .concat() 方法。

js concat 方法用于将两个或多个字符串合并在一起。如果您想用多个较小的字符串构建单个字符串,这很有用。

JavaScript Concat() 方法不会更改现有字符串,而是返回一个包含合并字符串文本的新字符串。

JavaScript 连接示例:

const arr1 = ["Abhishek", "rupal"]; 
const arr2 = ["divya", "rahul", "harsh"]; 
const allUsers = arr1.concat(arr2); // Output: Abhishek, rupal, divya, rahul, harsh 
const arr1 = ["Abhishek", "rupal"]; 
const arr2 = ["divya", "rahul", "harsh"]; 
const arr3 = ["kamal", "rohit"]; 
const allUsers = arr1.concat(arr2, arr3); // Output: Abhishek, rupal, divya, rahul, harsh, kamal, rohit

5. JavaScript 查找

使用数组时,find 函数可能是一个有用的工具。此函数将返回数组中满足给定条件的第一个元素。

如果我们有一个数字数组并且我们想找到第一个大于 5 的数字,我们可以使用 find 函数。JavaScript find 函数将回调作为其第一个参数。

此回调传递三个参数:正在处理的当前元素、该元素的索引和数组本身。

如果元素满足条件,回调应该返回 true,否则返回 false。在我们的示例中,如果当前元素大于 5,我们将返回 true。

JavaScript 查找功能不仅限于数字。它也可以用于字符串。

JavaScript 查找函数示例:

const marks = [30, 70, 98, 77]; 
console.log(marks.find(checkMarks)); 
function checkMarks(mark) {
 return mark > 90;
 } // 98

JavaScript 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. JavaScript 查找索引

使用数组时,有时您可能需要查找特定元素的索引。这可以使用 JavaScript findIndex() 方法来完成。

JavaScript findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。否则,它返回 -1。

findindex JavascripS 方法类似于 JavaScript 的 find 函数,但它返回的是索引而不是值。

findIndex() 函数有两个 参数,一个回调函数和一个可选对象,该对象可用作回调函数中的 this 关键字。

JavaScript findIndex 函数示例:

const marks = [30, 70, 98, 77]; 
console.log(marks.findIndex(checkMarks)); 
function checkMarks(mark) { 
return mark > 90; 
} // 2

JavaScript 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. JavaScript 包括

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. JavaScript 拆分

JavaScript 拆分函数 JavaScript 是一个字符串函数,用于将字符串拆分为子字符串数组并返回新数组。

拆分(str,分隔符,限制)

原始字符串没有被修改。split 函数的语法是:

str — 要拆分的字符串。

separator — 用作分隔符的字符。如果省略,则使用单个空格 (' ') 作为分隔符。

limit — 一个整数,指定要进行的拆分次数。如果省略,字符串将被拆分为一个没有限制的子字符串数组。

分隔符是一个字符串,它定义了应该在哪里拆分字符串。限制是一个整数,指定最大拆分数。

如果没有指定分隔符,字符串将被空白字符分割。如果未指定限制,则默认为 0,即没有限制。

JavaScript split 函数的返回值是一个子字符串数组。如果字符串不能被拆分,它将返回一个空数组。

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

9.JavaScript 子字符串

JavaScript substr 函数用于提取字符串的一部分。它有两个参数:开始位置和子字符串的长度。该函数返回一个新字符串,其中包含原始字符串的提取部分。

如果起始位置为负数,则从字符串的末尾开始计数。如果省略长度参数,JavaScript substr 会提取从字符串开始位置到结尾的所有字符。

JavaScript substr 函数可用于提取字符串的一部分或通过连接两个子字符串来创建新字符串。它还可以用于找出给定字符串中是否存在某个字符或子字符串。

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

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

在 JavaScript 中使用函数有很多优点。

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

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

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


24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看