0

0

通过示例探索 9 个常用的 javascript 函数

青灯夜游

青灯夜游

发布时间:2022-10-09 19:23:57

|

2498人浏览过

|

来源于掘金社区

转载

通过示例探索 9 个常用的 javascript 函数

函数是 JavaScript 最重要的方面之一。如果没有 JavaScript 函数,它将非常有限。javascript 中的函数用于执行特定的操作或任务。

它们可以写入代码中,也可以使用 Function 构造函数创建。 函数可以定义在其他函数内部,称为嵌套函数。嵌套函数可以访问外部函数的变量和参数。

这允许一些有趣且强大的编程技术。

在本文中,我们将通过示例探索 9 个常用的 javascript 函数。

1.filter

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

立即学习Java免费学习笔记(深入)”;

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

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

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。

Magic AI Avatars
Magic AI Avatars

神奇的AI头像,获得200多个由AI制作的自定义头像。

下载

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视频教程编程基础视频

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号