分享20个Javascript中的数组方法,收藏

news2024/11/16 22:47:21

什么是数组?与其他编程语言中的数组一样,Array对象允许在一个变量名称下存储多个项的集合,并且具有用于执行常见数组操作的成员。

声明数组

我们可以用两种不同的方式声明数组。

使用新阵列

使用new Array,我们可以指定希望存在于数组中的元素,如下所示:

const fruits = new Array('Apple', 'Banana');
console.log(fruits.length);

数组文字表示法

使用数组文本声明,我们指定数组将具有的值。如果我们不声明任何值,数组将为空。

// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits.length);

Javascript数组方法

下面是Array对象的方法列表及其说明。

1.forEach

forEach()方法为每个数组元素执行一次提供的函数。

array.forEach(callback[, thisObject]);

forEach()按索引升序为数组中的每个元素调用一次提供的callbackFn函数。对于已删除或未初始化的索引属性,不会调用它。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

2.map

该Array.map()方法允许您循环访问数组并使用回调函数修改其元素。然后将对数组的每个元素执行回调函数。

array.map(callback[, thisObject]);
let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
   return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

该Array.map()方法通常用于对元素应用某些更改,无论是像上面的代码中那样乘以特定的数字,还是执行应用程序可能需要的任何其他操作。

3.concat

在JavaScript中,concat()是一个字符串方法,用于将字符串连接在一起。concat()方法将一个或多个字符串值附加到调用字符串,然后将连接结果作为新字符串返回。因为concat()方法是String对象的方法,所以必须通过String类的特定实例调用它。

array.concat(value1, value2, ..., valueN);
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

4.push

Javascript数组push()方法将给定的元素追加到数组的最后,并返回新数组的长度。当您想在数组末尾添加元素时,请使用push()。

array.push(element1, ..., elementN);

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.push("Kenya");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]

5.pop

pop()方法从数组中移除最后一个元素,并将该值返回给调用方。如果对空数组调用pop(),它将返回undefined。

Array.prototype.shift()的行为与pop()类似,但应用于数组中的第一个元素。

array.pop();
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

6.splice

splice()方法是一种通用方法,用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

array.splice(index, howMany, [element1][, ..., elementN]);
const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 0, "Lemon", "Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango

7.slice

slice()方法将数组的一部分的浅副本返回到从头到尾(不包括end)选择的新数组对象中,其中start和end表示该数组中项的索引。原始阵列不会被修改。

array.slice( begin [,end] );
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

8.shift

shift()是一个内置的JavaScript函数,用于从数组中删除第一个元素。shift()函数直接修改您正在使用的JavaScript数组。shift()返回从数组中移除的项。

函数的作用是:删除索引位置0处的项,并将未来索引号处的值下移一位。

array.shift();
const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

9.unshift

unshift()方法将给定值插入到类似数组的对象的开头。

push()的行为与unshift()类似,但应用于数组的末尾。

array.unshift( element1, ..., elementN );
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

10.join

JavaScript数组join()是一个内置方法,它通过连接数组的所有元素来创建并返回新字符串。join()方法将数组中的项连接到字符串中并返回该字符串。指定的分隔符将分隔元素数组。默认分隔符为逗号(,)。

array.join(separator);
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

11.every

every()方法测试数组中的所有元素是否通过所提供函数实现的测试。它返回一个布尔值。

array.every(callback[, thisObject]);
const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

12.filter

filter()方法创建给定数组的一部分的浅副本,过滤掉给定数组中通过所提供函数实现的测试的元素。

array.filter(callback[, thisObject]);
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

13.indexOf

indexOf()方法返回给定元素在数组中的第一个索引,如果不存在,则返回-1。

array.indexOf(searchElement[, fromIndex]);
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

14.reduce

reduce()方法对数组的每个元素执行用户提供的“reducer”回调函数,依次传入前一个元素计算的返回值。在数组的所有元素上运行reducer的最终结果是单个值。

array.reduce(callback[, initialValue]);
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial)

15.reverse

reverse()方法在原处反转数组并返回对同一数组的引用,第一个数组元素现在变为最后一个,最后一个数组元素变为第一个。换句话说,阵列中的元素顺序将转向与前述相反的方向。

array.reverse();
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

16.sort

sort()方法对数组中的元素进行排序,并返回对已排序的同一数组的引用。默认的排序顺序是升序,它是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列的基础上构建的。

array.sort( compareFunction );
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

17.toString

toString()方法返回表示对象的字符串。

array.toString();
function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('Gabby');

Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};

console.log(dog1.toString());
// expected output: "Gabby"

18.at

at()方法接受一个整数值并返回该索引处的项,允许使用正整数和负整数。负整数从数组中的最后一项开始倒数。

array.at(index)
const array1 = [5, 12, 8, 130, 44];

let index = 2;

console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// expected output: "Using an index of 2 the item returned is 8"

index = -2;

console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// expected output: "Using an index of -2 item returned is 130"

19.find

find()方法返回所提供的数组中满足所提供的测试函数的第一个元素。如果没有值满足测试函数,则返回undefined。

array.find(function(currentValue, index, arr),thisValue)
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

20.some

some()方法测试数组中是否至少有一个元素通过了所提供函数实现的测试。如果在数组中找到一个元素,所提供的函数为该元素返回true,则返回true;否则返回假。它不会修改数组。

array.some(callback[, thisObject]);
const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

你学会了吗?如果对你有帮助,记得点赞支持!如果你正在学习JS或者已经在我们的三十天计划中完成了4个综合项目实战,那不妨可以听下这个课程体系,三十天计划群里还提供了算法、数组等知识体系!

前端工程师成长方法

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现,包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解!同时也为你提供了前端高级工程师成长体系!(详细看下图内容)

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式!(不定期会推出活动,有大额优惠券推出,活动详情联系助理老师了解即可!)如果你才开始学习前端,那么可以先学习我们的三十天计划(零基础的同学报名系统班同学可以和老师沟通制定学习计划,可以得到更快的成长!)

为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30 天挑战学习计划》,内容如下:

HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通

  • PC 端项目开发(1 个)
  • 移动 WebApp 开发(2 个)
  • 多端响应式开发(1 个)

共 4 大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO 优化规范

从蓝湖 UI 设计稿 到 PC 端,移动端,多端响应式开发项目开发

  • 真机调试,云服务部署上线;
  • Linux 环境下 的 Nginx 部署,Nginx 性能优化;
  • Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
  • 企业项目域名跳转的终极解决方案,多网站、多系统部署;
  • 使用 使用 Git 在线项目部署;

这些内容在《30 天挑战学习计划》中每一个细节都有讲到,包含视频 + 图文教程 + 项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !

过程中【不涉及】任何费用和利益,非诚勿扰 。

如果你没有添加助理老师微信,可以添加下方微信,说明要参加 30 天挑战学习计划,来自CSDN!老师会邀请你进入学习,并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

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

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

相关文章

GitHub下载量10W,最新23版Java岗面试攻略,涵盖25个技术栈

年底失业&#xff0c;机会也不多&#xff0c;短时间内想找到合适工作是几乎不可能的。身体好点在家&#xff0c;主要建议大家就做两件事&#xff1a; 第一&#xff1a;整理工作经验&#xff0c;制定新年求职计划。等一些不错的公司放出新的hc&#xff0c;市场情况一回暖&#…

淘宝首页serverless升级后的质量保障方案

本文主要介绍了serverless 架构升级在淘宝首页的应用&#xff0c;新架构对底层所依赖的容器、环境资源等与之前相比差异较大&#xff0c;并且对应的预发、安全生产、生产等环境&#xff0c;与旧架构的完全隔离。背景阿里巴巴集团大淘宝技术全面推进云原生2.0战役——serverless…

wordpress企业主题推荐

WordPress制造企业主题推荐 国潮好物&#xff0c;配国产主题&#xff0c;为中国制造加油、助力&#xff0c;适合生产、加工、制造业官网的WordPress主题。 演示 https://www.jianzhanpress.com/?p4358 wordpress服务行业网站模板推荐 浅绿色小清新wordpress网站模板&#x…

软件测试期末复习(一)试题及答案

一、单项选择题&#xff08;每空 2 分&#xff0c;共 40 分&#xff09; 1&#xff0e;软件测试的目的:&#xff08; c &#xff09; A. 避免软件开发中出现的错误 B. 发现软件开发中出现的错误 C. 尽可能发现并排除软件中潜藏的错误&#xff0c;提高软件的可靠性 D. 修改软件…

Axure绘制流程图

相信大家在日常的工作中经常会绘制流程图&#xff0c;基本常见的绘制流程图的工具有Visio、亿图等。但是如果大家使用的是axure制作的产品prd的话&#xff0c;这些流程图的源文件全部需要进行存储&#xff0c;一旦丢失就需要重新画一遍&#xff0c;这样是很不方便。那么有没有一…

JDBC API详解

文章目录入门案例DriverManagerConnectionStatementResultSetPreparedStatement数据库连接池完整代码入门案例 package jdbc;import java.sql.*;public class connectionTest {public static void main(String[] args) throws ClassNotFoundException, SQLException {//1.注册…

Revit二次开发小技巧(十六)寻找最短路径

最近遇到一个需求&#xff0c;指定两个配电箱&#xff0c;然后找到两个配电箱之间最短的桥架路径。运用了Dijkstra算法去计算最短路径&#xff0c;以配电箱实体、三通、四通为节点&#xff0c;简化中间弯头计算的方式。 背景 选择起点和终点的配电箱&#xff0c;找到最短的桥架…

RingUI + JCEF开发IDEA插件

文章目录RingUI知识储备示例插件实现逻辑开发环境开发流程新建一个IDEA插件项目新建一个前端项目验证前端项目丰富前端项目丰富插件内容RingUI This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetB…

向 Windows 高级用户进阶,这 5 款效率工具帮你开路

工欲善其事&#xff0c;必先利其器。作为全球最多人使用的桌面操作系统&#xff0c;Windows 的使用效率与我们的工作学习息息相关。今天&#xff0c;小编就为大家整理了 10 款提高效率的利器&#xff0c;让你的 Windows 更具生产力。 1.文件预览——Seer MacOS 有一个非常方便…

优雅草YYC松鼠短视频2022年12月28日更新v5.1.6版本更新·修复因为消息提醒二开导致菜单栏无法显示·进一步完善推送

优雅草YYC松鼠短视频2022年12月28日更新v5.1.6版本更新修复因为消息提醒二开导致菜单栏无法显示进一步完善推送 更新日志 修复因为消息提醒二开导致菜单栏无法显示 继续进一步开发消息推送 目前消息推送登录以及推送判断返回刷新仍存在问题在开发中 目前goeasy官方也在更新关…

数据劫持基础

数据劫持数据劫持原理。属性描述符Object.defineProperty官网响应式原理![在这里插入图片描述](https://img-blog.csdnimg.cn/b9f900484f314334a0dc6139428b397c.png)getter和setterObject.defineProperty的不足proxy工作原理总结数据劫持原理。 数据劫持&#xff0c;指的是在…

Find My资讯|苹果 Find My 找到因交通事故坠崖的一名女子

美国加州圣贝纳迪诺县消防局在其官方 Facebook 更新动态&#xff0c;表示在接到家属报警&#xff0c;通过苹果 Find My 功能追踪家人的 iPhone&#xff0c;成功营救出在圣贝纳迪诺山区的 18 号高速公路上坠崖的一名妇女。 圣贝纳迪诺县消防局在帖子中表示这名妇女在圣诞节那天…

多线程与高并发(三)

【 day3课前复习 】&#xff1a; 【AtomicInteger】&#xff1a; 原子性——都是用CAS机制来实现。 【 expected , update 】: //有时候也会写三个值——你要修改的那个对象。 expected——期望值。&#xff08;旧值&#xff09; update——更新值。&#xff08;新值&#…

LeetCode刷题复盘笔记—一文搞懂动态规划之剑指 Offer 46. 把数字翻译成字符串问题(动态规划系列第三十四篇)

今日主要总结一下动态规划的一道题目&#xff0c;剑指 Offer 46. 把数字翻译成字符串 题目&#xff1a;剑指 Offer 46. 把数字翻译成字符串 Leetcode题目地址 题目描述&#xff1a; 给定一个数字&#xff0c;我们按照如下规则把它翻译为字符串&#xff1a;0 翻译成 “a” &am…

小型云台机械手的制作

1. 运动功能说明 小型云台机械手&#xff0c;下方的云台可以提供左右旋转和上下摆动的动作&#xff0c;与舵机夹爪配合可以完成简单的抓取和搬运。 2.结构说明 该样机由一个 R207小型舵机云台 上串联了一个 舵机夹爪模组 构成。 3. 运动功能实现 3.1 电子硬件 在这个示例中&a…

Redis集群系列五 —— 分区/片概念

什么是分区 分区就是将所存储的数据按照一定的规则存储在不同的存储服务或介质上&#xff0c;通过降低单服务或介质的数据量级来提升数据处理能力&#xff0c;从而达到拥有数据处理横向扩容的能力的目的。 还可简单的理解为分区就是将数据拆分到多个 Redis 实例的过程&#xf…

21. 合并两个有序链表播报文章

题目描述 这是一道难度为简单的题目&#xff0c;同时&#xff0c;这道题也是Leetcode148题中&#xff0c;链表归并排序中重要的组成部分。 题目描述 题目分析 本题的题目简单易懂&#xff0c;输入为两个有序链表&#xff0c;要求将链表合并为一个有序的链表。在此不在再赘述…

【消息中间件】RocketMQ如何实现Producer的负载均衡

目录 一、前言 二、实现Producer的负载均衡 1、负载均衡选取一条消息队列并且高可用 1.1、模拟随机递增取模消息队列数为5 1.2、模拟随机递增取模消息队列数为6 1.3、判断Broker代理是否可用 2、更新故障项维护startTimestamp字段 2.1、退避运算 2.2、更新故障项维护st…

干货 | 数字经济创新创业——数字经济下的商业模式与解决方案

下文整理自清华大学大数据能力提升项目能力提升模块课程“Innovation & Entrepreneurship for Digital Economy”&#xff08;数字经济创新创业课程)的精彩内容。主讲嘉宾&#xff1a;Kris Singh: CEO at SRII, Palo Alto, CaliforniaVisiting Professor of Tsinghua Unive…

卷积、转置卷积、膨胀卷积学习记录

Conv计算&#xff1a; 计算公示 1、pytorch中默认参数&#xff0c;以conv1d为例 torch.nn.Conv1d(in_channels, out_channels, kernel_size, stride1, padding0, dilation1, groups1, biasTrue, padding_mode‘zeros’, deviceNone, dtypeNone&#xff09; 2、输出卷积尺寸&am…