面试官:Javscript数组的常用方法有哪些?

2023-09-21 10:44:07

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

一、操作方法

push()

unshift()

splice

concat()

pop()

shift()

splice()

slice()

splice()

indexOf()

includes()

find()

二、排序方法

reverse()

sort()

三、转换方法

join()

四、迭代方法

some()

every()

forEach()

filter()

map()


一、操作方法

数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会

下面对数组常用的操作方法做一个归纳

下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响

  • push()
  • unshift()
  • splice()
  • concat()
push()

push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度

let colors = []; // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count) // 2
unshift()

unshift()在数组开头添加任意多个值,然后返回新的数组长度

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2
splice

传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []
concat()

首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

下面三种都会影响原数组,最后一项不影响原数组:

  • pop()
  • shift()
  • splice()
  • slice()
pop()

pop() 方法用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项

let colors = ["red", "green"]
let item = colors.pop(); // 取得最后一项
console.log(item) // green
console.log(colors.length) // 1
shift()

shift()方法用于删除数组的第一项,同时减少数组的 length 值,返回被删除的项

let colors = ["red", "green"]
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) // 1
splice()

传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red,只有一个元素的数组

slice()

slice() 用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors)   // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow

即修改原来数组的内容,常用splice

splice()

传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green,只有一个元素的数组

即查找元素,返回元素坐标或者元素值

  • indexOf()
  • includes()
  • find()
indexOf()

返回要查找的元素在数组中的位置,如果没找到则返回-1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
includes()

返回要查找的元素在数组中的位置,找到返回true,否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
find()

返回第一个匹配的元素

const people = [
    {
        name: "Matt",
        age: 27
    },
    {
        name: "Nicholas",
        age: 29
    }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

二、排序方法

数组有两个方法可以用来对元素重新排序:

  • reverse()
  • sort()

reverse()

顾名思义,将数组元素方向排列

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()

sort()方法接受一个比较函数,用于判断哪个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

三、转换方法

常见的转换方法有:

join()

join() 方法接收一个参数,即字符串分隔符,返回包含所有项的字符串

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

四、迭代方法

常用来迭代数组的方法(都不改变原数组)有如下:

  • some()
  • every()
  • forEach()
  • filter()
  • map()

some()

对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.every((item, index, array) => item > 2);
console.log(someResult) // true

every()

对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false

forEach()

对数组每一项都运行传入的函数,没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
    // 执行某些操作
});

filter()

对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3

map()

对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2

更多推荐

.Net IDE智能提示汉化(.Net6、AspNetCore)

先上现成的.net6汉化文件,可以手动下载后参照如何为.NET安装本地化的IntelliSense文件进行安装。或者使用后文的工具进行自动安装。无对照英文在前中文在前汉化内容来自官方在线文档,某些内容可能存在明显的机翻痕迹。上一些效果图:.Net6之前的版本汉化.net6之前的版本,微软官方提供了本地化包,可以在Dow

MQTT Qt 客户端开发记录

1.MQTT介绍MQTT是一种常用的物联网协议。MQTT(MessageQueuingTelemetryTransport)是一种轻量级的发布/订阅通信协议,用于在物联网(IoT)和机器对机器(M2M)通信中传输消息。MQTT协议被设计用于在低带宽和不稳定网络环境下工作,以及在设备和服务器之间实现可靠的通信。MQTT协

什么是媒体邀约?邀请媒体的流程

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。媒体邀约,简单来说,是企业或组织为了某个特定的事件、活动或新闻,主动邀请媒体进行报道或参与。这个过程旨在确保媒体的出席并进一步传播相关信息,从而达到更广泛的受众。邀请媒体的流程大致可以分为以下几个步骤:媒体媒体宣传的目的:明确为何需要邀请媒体,是为了推广新产品、发布

1_图神经网络GNN基础知识学习

文章目录安装PyTorchGeometric安装工具包在KarateClub数据集上使用图卷积网络(GCN)进行节点分类两个画图函数GraphNeuralNetworks数据集:Zachary'skarateclubnetwork.PyTorchGeometric数据集介绍edge_index使用networkx可视化

Bash脚本学习 - 条件句、数组、for循环,函数

1.条件测试[和]是一个用于执行条件测试的命令。它们必须用空格分隔开,并且在[后面和]前面必须有空格。-eq是一个比较运算符,表示等于(equal)。它用于比较两个值是否相等。2.条件句在ifelseifelse.sh文件中,#!/bin/bashif[${1,,}=herbert];thenecho"Oh,you'r

利用gpt进行GMV变化数据分析

prompt:现在已知男性GMV从800降至600,女性GMV从1200至1300,请计算男女GMV变动对整体GMV变动的贡献度output:在这个问题中,我们要计算男性和女性的GMV(总销售额)变动对整体GMV变动的贡献度。首先,计算男性和女性的GMV变动量:男性GMV变动量:600-800=-200600−800=

排序算法-----快速排序(递归)

目录前言快速排序步骤原理大致思路流程动态图代码实现算法分析空间复杂度时间复杂度稳定性前言今天我们开始学习排序算法中的快速排序算法,既然叫快速排序,那肯定是体现在快这方面,相较于前面所学习过的排序算法,快速排序是比这些算法的速度要快的,将来很多时候我们都会用到快速排序来去做排序的,下面就一起来学习吧!快速排序快速排序(Q

第 363 场 LeetCode 周赛题解

A计算K置位下标对应元素的和模拟classSolution{public:intpop_cnt(intx){//求x的二进制表示中的1的位数intres=0;for(;x;x>>=1)if(x&1)res++;returnres;}intsumIndicesWithKSetBits(vector<int>&nums,i

Git概述

目录一、什么是Git二、什么是版本控制系统三、Git和SVN对比SVN集中式SVN优缺点Git分布式Git优缺点四、Git工作流程四个工作区域工作流程五、Git下载与安装一、什么是Git很多人都知道,林纳斯·托瓦兹在1991年创建了开源的Linux,从此,Linux系统不断发展,已经成为最大的服务器系统软件了。Git是

漏刻有时数据可视化Echarts组件开发(28):异形柱图、pictorialBar和dataZoom组件的使用

构建容器vardom=document.getElementById('container');varmyChart=echarts.init(dom,null,{renderer:'canvas',useDirtyRect:false});模拟数据vardataList=[{name:'班级一',value:120,

【redis总结】

文章目录1、redis简介2、为什么要选择redis做缓存3、数据结构4、redis多线程模型redis6.0的变化5、redis持久化AOF的实现过程RDB的实现过程6、redis集群的搭建7、redis过期删除和淘汰策略8、redis的内存淘汰策略1、redis简介Redis(RemoteDictionarySer

热文推荐