前端JavaScript篇之Javscript数组的常用方法有哪些?JavaScript判断数组的方式有哪些?

目录

  • Javscript数组的常用方法有哪些?
  • JavaScript判断数组的方式有哪些?
    • 1. Array.isArray() 方法:
    • 2. instanceof 操作符:
    • 3. Object.prototype.toString.call() 方法:
    • 4. Array.from() 方法:


Javscript数组的常用方法有哪些?

  1. push():

    • 描述: 在数组末尾添加一个或多个元素,并返回新数组的长度。
    • 思路: 将指定的元素追加到数组的末尾。
  2. pop():

    • 描述: 移除并返回数组末尾的元素。
    • 思路: 删除数组中的最后一个元素,并返回被删除的元素。
  3. unshift():

    • 描述: 在数组开头添加一个或多个元素,并返回新数组的长度。
    • 思路: 在数组的开头插入指定的元素,使其成为新的第一个元素。
  4. shift():

    • 描述: 移除并返回数组开头的元素。
    • 思路: 删除数组中的第一个元素,并返回被删除的元素。
  5. concat():

    • 描述: 合并两个或更多数组,并返回新的合并后的数组,不会修改原始数组。
    • 思路: 将多个数组连接在一起,形成一个新的数组。
  6. slice():

    • 描述: 从数组中提取指定位置的元素,返回一个新的数组,不会修改原始数组。
    • 思路: 根据开始和结束的索引值,截取数组的一部分,生成新的数组。
  7. splice():

    • 描述: 从指定位置删除或替换元素,可修改原始数组。
    • 思路: 在指定位置删除指定数量的元素,并可以插入新的元素。
  8. indexOf():

    • 描述: 查找指定元素在数组中的索引,如果不存在则返回-1。
    • 思路: 返回数组中第一次出现指定元素的位置索引。
  9. lastIndexOf():

    • 描述: 从数组末尾开始查找指定元素在数组中的索引,如果不存在则返回-1。
    • 思路: 从数组的末尾开始,返回指定元素最后一次出现的位置索引。
  10. includes():

  • 描述: 检查数组是否包含指定元素,返回一个布尔值。
  • 思路: 判断数组中是否存在指定的元素。
  1. join():
  • 描述: 将数组中的所有元素转为字符串,并使用指定的分隔符连接它们。
  • 思路: 将数组中的元素用指定的分隔符连接成一个字符串。
  1. reverse():
  • 描述: 颠倒数组中元素的顺序,会修改原始数组。
  • 思路: 将数组中的元素顺序颠倒。
  1. sort():
  • 描述: 对数组中的元素进行排序,默认按照字母顺序排序,会修改原始数组。
  • 思路: 对数组中的元素进行升序排序。
  1. filter():
  • 描述: 创建一个新数组,其中包含符合条件的所有元素。
  • 思路: 使用指定的条件筛选数组中的元素,形成新的数组。
  1. map():
  • 描述: 创建一个新数组,其中包含对原始数组中的每个元素进行操作后的结果。
  • 思路: 对数组中的每个元素进行操作,生成一个新的数组。
  1. reduce():
  • 描述: 将数组中的元素进行累积操作,返回一个单一的值。
  • 思路: 从左到右依次对数组中的元素进行累积操作,得到最终的结果。
  1. forEach():
  • 描述: 对数组中的每个元素执行提供的函数。
  • 思路: 遍历数组,对每个元素执行指定的操作,没有返回值。

以上方法为 JavaScript 数组中常用的操作,通过组合运用这些方法,可以完成丰富的数组处理任务。

参考案例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数组的常用方法</title></head><body><div id="beforeOperation"><h2>Array (Before Operation)</h2><pre id="arrayBefore"></pre></div><div id="afterOperation"><h2>Array (After Operation)</h2><pre id="arrayAfter"></pre></div><script>// Original arrayconst originalArray = [1, 2, 3, 4, 5]document.getElementById('arrayBefore').innerText = JSON.stringify(originalArray, null, 2)// push()originalArray.push(6, 7)displayResult('push()', originalArray)// pop()originalArray.pop()displayResult('pop()', originalArray)// unshift()originalArray.unshift(0, -1)displayResult('unshift()', originalArray)// shift()originalArray.shift()displayResult('shift()', originalArray)// concat()const newArray = originalArray.concat([8, 9])displayResult('concat()', newArray)// slice()const slicedArray = originalArray.slice(1, 4)displayResult('slice()', slicedArray)// splice()originalArray.splice(1, 2, 'a', 'b')displayResult('splice()', originalArray)// indexOf()const index = originalArray.indexOf('a')displayResult('indexOf()', index)// includes()const includesResult = originalArray.includes('c')displayResult('includes()', includesResult)// join()const joinedString = originalArray.join('-')displayResult('join()', joinedString)// reverse()originalArray.reverse()displayResult('reverse()', originalArray)// sort()originalArray.sort()displayResult('sort()', originalArray)// filter()const filteredArray = originalArray.filter(item => typeof item === 'number')displayResult('filter()', filteredArray)// map()const mappedArray = originalArray.map(item => item * 2)displayResult('map()', mappedArray)// reduce()const reducedValue = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0)displayResult('reduce()', reducedValue)// forEach()originalArray.forEach(item => console.log(item)) // Just for side effect, no displayResult for forEachfunction displayResult(operation, result) {document.getElementById('arrayAfter').innerText += `${operation}: ${JSON.stringify(result, null, 2)}\n\n`}</script></body>
</html>

JavaScript判断数组的方式有哪些?

在JavaScript中,判断数组的方式可以通过以下方法实现:

1. Array.isArray() 方法:

这是最简单的方法,用于检测一个值是否为数组。

const myArray = [1, 2, 3]
if (Array.isArray(myArray)) {console.log("It's an array!")
}

2. instanceof 操作符:

通过使用 instanceof 操作符来检查对象是否是特定类的实例,可以用来判断是否是数组。

const myArray = [1, 2, 3]
if (myArray instanceof Array) {console.log("It's an array!")
}

3. Object.prototype.toString.call() 方法:

使用 Object.prototype.toString.call() 方法,这样可以获取对象的内部 [[Class]] 属性,从而判断是否为数组。

const myArray = [1, 2, 3]
if (Object.prototype.toString.call(myArray) === '[object Array]') {console.log("It's an array!")
}

4. Array.from() 方法:

尝试使用 Array.from() 方法,如果成功转换为数组,则说明原始值是数组。

const myArray = [1, 2, 3]
if (Array.from(myArray).length === myArray.length) {console.log("It's an array!")
}

这些方法可以根据具体的场景和需求选择使用。一般来说,推荐使用 Array.isArray() 方法,因为它是最简单和直观的方式。

持续学习总结记录中,回顾一下上面的内容:
Javscript数组的常用方法有哪些?
push():将指定的元素追加到数组的末尾。
pop():删除数组中的最后一个元素,并返回被删除的元素。
unshift():在数组的开头插入指定的元素,使其成为新的第一个元素。
shift(): 删除数组中的第一个元素,并返回被删除的元素。
concat():将多个数组连接在一起,形成一个新的数组。
slice():根据开始和结束的索引值,截取数组的一部分,生成新的数组。
splice():在指定位置删除指定数量的元素,并可以插入新的元素。
indexOf():返回数组中第一次出现指定元素的位置索引。
lastIndexOf():从数组的末尾开始,返回指定元素最后一次出现的位置索引。
includes():判断数组中是否存在指定的元素。
join():将数组中的元素用指定的分隔符连接成一个字符串。
reverse():将数组中的元素顺序颠倒。
sort():对数组中的元素进行升序排序。
filter():使用指定的条件筛选数组中的元素,形成新的数组。
map():对数组中的每个元素进行操作,生成一个新的数组。
reduce():从左到右依次对数组中的元素进行累积操作,得到最终的结果。
forEach(): 遍历数组,对每个元素执行指定的操作,没有返回值。
判断数组的方式:
Array.isArray() 方法:这是最简单的方法,用于检测一个值是否为数组。
instanceof 操作符:通过使用 instanceof 操作符来检查对象是否是特定类的实例,可以用来判断是否是数组。
Object.prototype.toString.call() 方法:使用 Object.prototype.toString.call() 方法,这样可以获取对象的内部 [[Class]] 属性,从而判断是否为数组。
Array.from() 方法:尝试使用 Array.from() 方法,如果成功转换为数组,则说明原始值是数组。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git学习笔记(第3章):Git常用命令

目录 3.1 设置用户签名 3.2 初始化本地库 3.3 查看本地库状态 3.4 添加暂存区 3.5 提交本地库 3.6 历史版本 3.7 修改文件 3.8 版本穿梭 小结 命令 作用 git config --global user.name 用户名 设置用户签名 git config --global user.email 邮箱 设置用户签名 …

Java如何优雅地判断对象是否为空

点击下载《Java如何优雅地判断对象是否为空》 1. 前言 在实际项目中&#xff0c;我们经常需要对各种变量或对象进行判空校验。这是因为&#xff0c;如果不进行判空校验&#xff0c;当遇到空值时&#xff0c;可能会导致程序出现NullPointerException异常。这是一种常见的运行时…

【INTEL(ALTERA)】为什么 Nios® V/g 处理器无法从指令紧耦合内存 (TCM) 启动?

说明 由于英特尔 Quartus Prime Pro Edition 软件版本 23.3 对Nios V/g 处理器的限制&#xff0c;Nios V/g 处理器无法直接从内存初始化的指令 TCM 启动。 造成这个问题的主要原因是指令中药只能作为指令存储器访问&#xff08;不支持作为指令和数据存储器&#xff09;。因此…

全国各城市绿地及绿化面积数据,shp/excel格式,2020-2022年

基本信息. 数据名称: 全国各城市绿地及绿化面积数据 数据格式: Shp、excel 数据时间: 2020-2022年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1province省份名称2city城市名称4city_dm城市…

2401llvm,clang语法树简介

原文 ClangAST简介 幻灯片 介绍 Clang的AST与其他一些编译器生成的AST不同,因为它与编写的C代码和C标准类似.如,在AST中,按非简化形式提供括号式和编译时常量. 这使得Clang的AST非常适合重构. 可通过生成的Doxygen获得所有ClangAST节点的文档.搜索引擎也会索引doxygen的在…

Servlet对象

ServletConfig对象 是什么 ServletConfig是javax.servlet.包下的一个接口&#xff0c;ServletConfig它是Servlet的一个配置对象&#xff1b; ServletConfig是由tomcat容器创建&#xff0c;通过init方法传入给Servlet&#xff1b; ServletConfig对象如何获取? 在GenericServle…

SpringBoot连接mysql数据库相关配置(druid连接池)

一、引入mysql8依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.23</version></dependency><dependency><groupId>com.alibaba</groupId><artifa…

【python】python实现代码雨【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、效果图&#xff1a; 二、准备工作 &#xff08;1)、导入必要的模块&#xff1a; 代码首先导入了需要使用的模块&#xff1a;requests、lxml和csv。 import requests from lxml import etree import csv 如果出现模…

Linux大老都是怎么记住这么多命令的?

今天给大家带来的是面试/实际工作中经常用到的Linux相关操作命令: 一. vi/vim编辑器 ---->文本编辑器 作用&#xff1a;创建文件&#xff0c;编辑文件&#xff0c;查看文件 格式&#xff1a;vi/vim 文件的名字 解析&#xff1a;如果该文件不存在&#xff0c;vi就会创建该…

logback配置xml日志文件(保姆级教程)

前言 这是个啥,这就是个控制日志输出格式、控制日志输出位置、控制日志输出环境、控制日志输出级别的玩意、控制忽略输出的日志就这些功能,没有什么很复杂的东西,废话不说多了。 配置介绍 configuration <configuration scan="true" scanPeriod="10 s…

外包干了一个月,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

【QML COOK】- 012-在QML中使用OpenGL渲染

本文是参照了两个文章编写的。 一是QML的例子&#xff1a;Scene Graph - OpenGL Under QML | Qt Quick 6.6.1 二是关于SceneGraph的介绍&#xff1a;Qt Quick Scene Graph | Qt Quick 6.2.11 这里我提取一下重点方便大家理解。 一个QML程序只能用一种计算机图形接口。不能有…

基于SpringBoot Vue美食网站系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

测试工程师必看!测试用例设计全解析,让你彻底掌握

测试工程师在入行时&#xff0c;都会接触到一个名词——测试用例&#xff0c;都知道测试用例是干什么用的&#xff0c;提到设计测试用例的方法&#xff0c;大部分测试工程师都会侃侃而谈&#xff1a;等价类法、边界值法、判定表法、正交分解法……这些方法说起来都如数家珍&…

MySQL的MVCC

MVCC&#xff08;多版本并发控制&#xff09;multiversion concurrency control 读读并发&#xff1a;可以并发 读写并发&#xff08;innoDB&#xff09;&#xff1a;MVCC机制解决 写写&#xff1a;互斥 快照读&#xff1a;不加锁的简单select属于快照读&#xff0c;即不加…

揭秘大数据时代的内存数据存储、数据缓存:redis缓存框架!

介绍&#xff1a;Redis 是一个开源的、基于内存的数据存储系统&#xff0c;它也可以持久化数据到硬盘上。Redis 以其高性能、高可靠性和丰富的数据结构支持而著称&#xff0c;在现代应用程序中被广泛用作数据库、缓存和消息中间件。 主要特点&#xff1a; 键值存储&#xff1a;…

Unity工程没有创建.sln文件,导致打开C#文件无法打开解决方案

最近又开始折腾些Unity的小项目&#xff0c;重新遇到一些常见的小问题 点击报错文件 却没有打开文件 于是查看了下打开Window->Package Manager 选择Unity Registry 搜索Visual Studio Editor&#xff0c;发现并没有安装 同理&#xff0c;也可以安装VSCode的插件 问题解决了…

JVM多线程读写和锁

文章目录 1 原子性2 可见性3 有序性4 CAS5 synchronized 优化5.1 轻量级锁5.2 锁膨胀5.3 自旋5.4 偏向锁5.5 其他优化 1 原子性 问题:两个线程对初始值为 0 的静态变量 i 一个做自增&#xff0c;一个做自减&#xff0c;各做 5000 次&#xff0c;结果是 0 吗&#xff1f; i产生…

.NET集成IdGenerator生成分布式全局唯一ID

前言 生成分布式唯一ID的方式有很多种如常见的有UUID、Snowflake&#xff08;雪花算法&#xff09;、数据库自增ID、Redis等等&#xff0c;今天我们来讲讲.NET集成IdGenerator生成分布式全局唯一ID。 分布式ID是什么&#xff1f; 分布式ID是一种在分布式系统中生成唯一标识符…

Unity - transform使用

Test_03 TransformTest 控制物体位置和物体间的父子关系 public class TransformTest : MonoBehaviour {void Start(){// 【获取位置】// 世界坐标中物体的位置Debug.Log(transform.position);// 物体相对于父物体的位置Debug.Log(transform.localPosition);// 【…