常用的JavaScript数组内置方法

 

目录

1、修改数组

push():添加

pop():删除

 unshift():添加

 shift():删除

 splice():修改,删除,添加

2、访问数组

concat():连接数组

 join():连接

 slice():提取字符串或数组

indexOf():索引

 lastIndexOf():索引

includes():判断

 forEach():遍历

3、数组操作

sort():排序

 reverse():颠倒数组

 filter():判断数组

 map():处理数组

 reduce():累加


1、修改数组

  • push()添加

在数组末尾添加一个或多个元素,并返回新的长度。

    let arr = [1, 2, 3, 4, 5];let str = arr.join(",");console.log(str); // 输出 "1, 2, 3, 4, 5"
  • pop():删除

删除数组末尾的元素,并返回该元素。

var fruits = ["apple", "banana", "orange"];
var lastFruit = fruits.pop();
// fruits: ["apple", "banana"]
// lastFruit: "orange"
  •  unshift():添加

在数组头部添加一个或多个元素,并返回新的长度。

var fruits = ["apple", "banana"];
var length = fruits.unshift("orange");
// fruits: ["orange", "apple", "banana"]
// length: 3
  •  shift():删除

删除数组头部的元素,并返回该元素。

var fruits = ["orange", "apple", "banana"];
var firstFruit = fruits.shift();
// fruits: ["apple", "banana"]
// firstFruit: "orange"
  •  splice()修改,删除,添加

从指定位置开始修改数组,删除/添加元素,并返回被删除的元素(如果有)组成的数组。

 //1, 删除元素:索引都是从0开始var array = [1, 2, 3, 4, 5];array.splice(2, 1); // 从索引 2 开始删除 1 个元素console.log(array); // 输出 [1, 2, 4, 5]//2 插入元素:let array1 = [1, 2, 3, 4, 5];array1.splice(2, 0, 'a', 'b'); // 从索引 2 开始删除 0 个元素,并插入 'a' 和 'b'console.log(array1); // 输出 [1, 2, 'a', 'b', 3, 4, 5]// 3替换元素:let array2 = [1, 2, 3, 4, 5];array2.splice(2, 2, 'a', 'b'); // 从索引 2 开始删除 2 个元素,并插入 'a' 和 'b'console.log(array2); // 输出 [1, 2, 'a', 'b', 5]

2、访问数组

  • concat():连接数组

连接两个或多个数组,并返回新的数组。

var fruits = ["apple", "banana"];
var moreFruits = ["orange", "pear"];
var allFruits = fruits.concat(moreFruits);
// allFruits: ["apple", "banana", "orange", "pear"]
  •  join():连接

将数组中的所有元素以指定分隔符连接成一个字符串并返回。

var fruits = ["apple", "banana", "orange"];
var fruitString = fruits.join("-");
// fruitString: "apple-banana-orange"
  •  slice():提取字符串或数组

从原数组中返回选定的元素,不会修改原数组。

// slice() 方法的基本语法如下:// str 是要处理的字符串,// startIndex 是起始位置的索引(包括该位置的字符),//endIndex 是结束位置的索引(不包括该位置的字符)。// str.slice(startIndex, endIndex)let str = "Hello, world!";let slicedStr = str.slice(7, 12);console.log(slicedStr); // 输出 "world"let arr = [1, 2, 3, 4, 5];let slicedArr = arr.slice(1, 3);console.log(slicedArr); // 输出 [2, 3]
  • indexOf():索引

返回指定元素在数组中第一次出现的位置,如果不存在则返回-1。

var fruits = ["apple", "banana", "orange"];
var index = fruits.indexOf("banana");
// index: 1
  •  lastIndexOf():索引

返回指定元素在数组中最后一次出现的位置,如果不存在则返回-1。

var fruits = ["apple", "banana", "orange", "banana"];
var index = fruits.lastIndexOf("banana");
// index: 3
  • includes():判断

判断数组是否包含指定元素,返回布尔值。

var fruits = ["apple", "banana", "orange"];
var hasBanana = fruits.includes("banana");
// hasBanana: true
  •  forEach():遍历

对数组中的每个元素执行一次给定的函数。

var fruits = ["apple", "banana", "orange"];
fruits.forEach(function(fruit){console.log(fruit);
});
// 输出结果:
// apple
// banana
// orange

3、数组操作

  • sort():排序

对数组进行排序,默认按照字符串的Unicode码进行排序。

var fruits = ["orange", "apple", "banana"];
fruits.sort();
// fruits: ["apple", "banana", "orange"]
  •  reverse():颠倒数组

将数组中的元素位置颠倒,并返回该数组。

var fruits = ["apple", "banana", "orange"];
fruits.reverse();
// fruits: ["orange", "banana", "apple"]
  •  filter():判断数组

返回一个新数组,其中包含通过给定函数测试的所有元素。

var numbers = [1, 2, 3, 4, 5];
var oddNumbers = numbers.filter(function(number){return number % 2 === 1;
});
// oddNumbers: [1, 3, 5]
  •  map():处理数组

返回一个新数组,其中包含使用给定函数处理后的所有元素。

var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(number){return number * 2;
});
// doubledNumbers: [2, 4, 6, 8, 10]
  •  reduce():累加

将数组中的所有元素通过函数累加,返回一个值。

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(total, number){return total + number;
});
// sum: 15

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

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

相关文章

【工作记录】基于springboot3+springsecurity实现多种方式登录及鉴权(二)

前言 上篇文章介绍了基于springboot3+springsecurity实现的基于模拟数据的用户多种方式登录及鉴权的流程和代码实现,本文我们继续完善。 主要完善的点 主要通过如下几个点来完成优化和完善: 用户信息获取通过查询mysql数据库实现token生成方式使用jwt用户信息存储及读取使用…

Text:焦点切换文字颜色随之改变

按Tab键切换2段文字的焦点,哪段文字的焦点为true,则字体颜色变为红色。 import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("2.2 属性")Rectangle {Text {id: thislabeltext: qsTr("hello world")font.pixelSiz…

JAVA ORM Bee的设计模式分析

创建型 工厂模式(Factory Pattern) 日志工厂 LoggerFactory 静态工厂模式 *(Static Factory) BeeFactoryHelper 单例模式(Singleton Pattern) 使用单例模式管理系统的配置信息 HoneyConfig 建…

龙芯3A5000上使用腾讯会议

原文链接:龙芯3A5000上使用腾讯会议 hello,大家好啊!今天我要给大家介绍的是在龙芯3A5000处理器上安装使用腾讯会议的经验分享。随着远程工作和在线会议的普及,腾讯会议成为了许多人日常工作不可或缺的工具。而对于使用龙芯3A5000…

极客时间-《罗剑锋的 C++ 实战笔记》文章笔记 + 个人思考

极客时间-《罗剑锋的 C 实战笔记》文章笔记 个人思考 语言特性06 | auto/decltype:为什么要有自动类型推导? 语言特性 06 | auto/decltype:为什么要有自动类型推导? auto 在C 11 引入。 为什么说C是静态强类型语言&#xff1f…

Open3D 点云转深度图像

目录 一、算法原理1、算法过程2、主要函数二、代码实现三、结果展示1、点云2、深度图像四、测试数据Open3D 点云转深度图像由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。<

【JavaScript】 失去了eval时怎么办(表达式解析与求值深入解析)

JavaScript 表达式解析与求值深入解析 有的时候我们不得不面临不可使用eval函数或者new function&#xff0c;但是又需要将一个字符串作为代码运行的尴尬场景&#xff0c;比如小程序考虑到其安全性问题&#xff0c;就禁止使用&#xff1b;这种情况下我们就需要一个表达式解析器…

全网最详细!!Python 爬虫快速入门

1. 背景 最近在工作中有需要使用到爬虫的地方&#xff0c;需要根据 Gitlab Python 实现一套定时爬取数据的工具&#xff0c;所以借此机会&#xff0c;针对 Python 爬虫方面的知识进行了学习&#xff0c;也算 Python 爬虫入门了。 需要了解的知识点&#xff1a; Python 基础语…

Spring Cloud核心组件介绍

三大门派 有Spring Cloud的地方就有江湖&#xff0c;我们就来看一看在这个江湖中都有哪些独霸一方的门派! Netflix 是先有SpringCloud还是先有Netflix?这是一个好问题。Netflix是一家大名鼎鼎的互联网传媒公司&#xff0c;但为什么它在开源软件领域有这么大的名声呢?这就…

标题:智能对话新纪元:ChatGPT与文心一言的全面比较

标题&#xff1a;智能对话新纪元&#xff1a;ChatGPT与文心一言的全面比较 引言&#xff1a; 在这个由数据驱动的时代&#xff0c;人工智能语言模型已成为技术创新的前沿。特别是OpenAI的ChatGPT和百度的文心一言&#xff08;ERNIE Bot&#xff09;&#xff0c;它们不仅代表了…

如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)

先说原理就是将 svg 文件以 vue 组件文件的方式使用 需求&#xff1a;我想要在 Element Plus 得评分组件中使用自定义得图标。 el-rate v-model"value1" /> 组件本身是支持自定义图标的&#xff0c;但是教程中只说明了如何使用 element-plus/icons-vue 图标库内置…

常用的gpt-4 prompt words收集2

1. attended an English speaking class about traffic. 学习了关于…的英语口语课 2. I am a newbie at English. 我英语很菜 3. Please respond in Markdown format text. 请返回markdown格式的回答 4. That’s brilliant! / That’s the best idea I’ve heard all da…

vue3移动端调用手机摄像头实现扫描二维码功能

vue3移动端调用手机摄像头实现扫描二维码功能 需求&#xff1a; vue3vant4 实现移动端网页调用手机摄像头实现扫描二维码&#xff0c;并返回二维码附带信息功能 效果图&#xff1a; 实现方法 采用vue3-qr-reader插件实现 项目安装依赖&#xff1a; npm install --save vue3-…

慢查询定位

慢查询 使用工具 mysql自带慢日志 默认没有开启需要手动开启 查看慢日志中的文件 总结

第三讲_ArkTS的初识

ArkTS的初识 1. ArkTS的基本组成2. ArkTS自定义组件 1. ArkTS的基本组成 装饰器&#xff1a; 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。自定义组件&#xff1a;可复用的UI单元&#xff0c;可组合其他组件&#xff0c;图示中Component装饰的struct Hello…

路由综合实验-nat

一.要求 R2为ISP路由器&#xff0c;其上只能配置ip地址&#xff0c;不得再进行其他的任何配置 PC1-PC2可以ping通客户平板和DNS服务器; 客户端可以通过域名访问http1&#xff0c;通过地址访问HTTP2 R1为边界路由器&#xff0c;!其上只有一个公有ip地址 拓扑图&#xff1a; 子…

php怎么获取图片四个角的坐标 x y

使用PHP GD库来处理图像,记得查看是否安装 代码&#xff1a; <?php // 1. 加载图像文件 $image imagecreatefromjpeg(path/to/your/image.jpg); // 根据实际情况修改路径和格式// 2. 获取图像宽度和高度 $width imagesx($image); $height imagesy($image);// 或者直接…

代码随想录day10:栈与队列part01(用栈实现队列,用队列实现栈)

栈与队列part01 用栈实现队列 时间复杂度: push和empty为O(1), pop和peek为O(n) 空间复杂度: O(n) class MyQueue { public:stack<int> stIn; // 输入栈stack<int> stOut; // 输出栈MyQueue() {}void push(int x) {stIn.push(x);}int pop() {// 只有当输出栈为…

Visual SVN Server实战

文章目录 一、实战概述二、实战步骤&#xff08;一&#xff09;下载Visual SVN Server&#xff08;二&#xff09;安装Visual SVN Server&#xff08;三&#xff09;使用Visual SVN Server1、新建仓库&#xff08;1&#xff09;新建Repository&#xff08;2&#xff09;选择仓库…

eNSP学习——配置通过Telnet登陆系统

实验内容&#xff1a; 模拟公司网络场景。R1是机房的设备&#xff0c;办公区与机房不在同一楼层&#xff0c;R2和R3模拟员工主机&#xff0c; 通过交换机S1与R1相连。 为了方便用户的管理&#xff0c;需要在R1上配置Telnet使员工可以在办公区远程管理机房设备。 为…