7种Js Array数组ES5/ES6常用方法

2024-01-16 08:08

本文主要是介绍7种Js Array数组ES5/ES6常用方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

来源 | http://www.fly63.com/article/detial/9983


1、栈方法(先进后出)

push():在数组的最后一项后追加值(参数:可以为多个值或数组)

返回:数组的长度,改变了原数组

var a=[1,2,3]a.push(9);  //返回数组的长度 4,改变了原数组console.log(a) //[1,2,3,9]

pop(): 删除数组的最后一项(无参数)

 返回:被删除的值,改变了原数组

var a=[1,2,3,4];a.pop()   // 返回删除值 4,改变了原数组console.log(a)  // [1,2,3]

 2、队列方法(先进先出)

unshift():在数组最前一项插入值(参数:可以为多个值或数组)

 返回:数组的长度,插入的值为数组,变为子数组,改变了原数组

var a=[1,2,3];           a.unshift(4);  //返回数组的长度 4,改变了原数组    console.log(a);  //[4,1,2,3] 

shift():删除数组的最前一项(无参数)

 返回:删除的值,改变了原数组

var a=[1,2,3,4];a.shift()  //返回被删除的值 1,改变了原数组console.log(a)  //[2,3,4]

3、操作方法

slice(start,end):返回从原数组中start下标到end下标之间的项组成的新数组 (参数:[start必选end可选),只有一个参数时默认下标end为最后一项)

返回:包含从下标 start(包括该元素) 到 下标end (不包括该元素)的一个新数组,原数组不变(类似复制)

var a=[1,2,3,4,5];a.slice(2,4) //返回[3,4],原数组不变a.slice(0) //返回[1,2,3,4,5],原数组不变a.slice(3) //返回[4,5] ,原数组不变console.log(a)  // [1,2,3,4,5]

splice(start,num,ele1,ele2...) 很强大的一个方法,start指 从下标start删除(包括start对应的元素),必选 ;num指 删除的个数,必选;ele1,ele2...代表插入的值,可选

返回:删除的值,改变了原数组(类似剪切)

var a=[1,2,3,4,5];a.splice(1,2,"我是","插入的值")   //返回删除的值 2,3,改变了原数组console.log(a)  //  [1,"我是","插入的值",4,5]

concat():数组和数组的粘结成新的数组(参数:可以为多个值或数组)

返回:新的数组,原数组不变

var a=[1,2,3,4];var b=[5,6,7,8];var c=a.concat(b); //返回[1,2,3,4,5,6,7,8],原数组不变console.log(c); // [1,2,3,4,5,6,7,8]

 4、排序方法

reverse():将数组反序 

 返回:新的反序数组,也改变了原数组

var a = [1,2,3,4,5]; var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1] ,改变了原数组

sort():按指定的参数对数组进行排序(参数:可选,函数)默认按照 ASCII表排序 ,如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

  • 若 a 等于 b,则返回 0。

  • 若 a 大于 b,则返回一个大于 0 的值。

返回:排序后的数组 ,改变了原数组

var a=[1,2,3,12,13];a.sort()  //返回 [1,12,13,2,3]//如果按照正常逻辑排序 :a.sort(function(a,b){   return a-b;})    //[1,2,3,12,13]

5、拼接方法

join():  改变数组中拼接的符号,并转化为字符串(参数:"拼接符号")

返回:拼接而成的字符串,原数组不变

var a=[1,2,"字符串",false,undefined,null];b=a.join("++");  // 返回 1++2++字符串++false++++ ;原数组不变console.log(b);   //undefined null 自动过滤掉了

6、迭代(查找、遍历)方法

(1)查找方法:

indexOf(item,start):该方法搜索指定元素值位置,并返回下标。

参数:item是要查找的值,start是指你要从哪里开始找(该参数可选)。ps:start是可以取负值的,举个栗子indexOf(x,-5)表示从倒数第6个开始(因为倒数第一个是0嘛),一直找到正序的第0个,

返回:如果多次出现,则返回第一次出现的下标(其实找到了就不会接着往后找了);如果没出现,返回 -1。

var fruits = ["Apple", "Orange", "Apple", "Mango"];var a = fruits.indexOf("Apple"); //返回 0,原数组不变console.log(a); //0

lastIndexOf(item,start):与上面方法用法一样,不同的地方是,他是逆行,是从结尾开始找的。start也能指定负值,如果start取-5,则表明从下标为5的地方开始,一直往前找。

var fruits = ["Apple", "Orange", "Apple", "Mango"];var a = fruits.lastIndexOf("Apple");//返回2,原数组不变console.log(a);//2

find():ES6新增,查找通过测试(自定义函数内判断,通常配合ES6箭头函数)的数组的第一个元素的值,参数:(自定义函数:函数的参数:(项目值(必选),项目索引,数组本身))

返回:查找到的第一个值,,原数组不变

var numbers = [4, 9, 16, 25, 29];var first = numbers.find(myFunction); //返回 25,原数组不变function myFunction(value, index, array) {  return value > 18;}

findIndex():与上面方法用法一样,不同的地方是查找的是第一个下标

返回:查找到的第一个值的下标,查找不到则返回-1,原数组不变

var numbers = [4, 9, 16, 25, 29];var first = numbers.findIndex(myFunction);//返回3,原数组不变function myFunction(value, index, array) {  return value > 18;}

(2)遍历方法:

以下五种方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值

传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的下标和数组对象本身。根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这五个迭代方法的作用。

every(function(item,index,array){}):对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true,原数组不变

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

some(function(item,index,array){}):对数组的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true,原数组不变

var someResult = numbers.some(function(item, index, array) {return (item > 3);})console.log(someResult); //true

filter(function(item,index,array){}):对数组中的每一项运行给定函数,返回该函数调用结果值为true的项组成新的数组,原数组不变

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];var filterResult = numbers.filter(function(item, index, array) {return (item > 3);})console.log(filterResult); //[4, 5, 4],原数组不变

map(function(item,index,array){}):对数组中的每一项运行给定函数,返回每次该函数调用的结果组成的数组,原数组不变

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];var mapResult = numbers.map(function(item, index, array) {return item * 2;})console.log(mapResult); //[2, 4, 6, 8, 10, 8, 6, 4, 2]

forEach(function(item,index,array){}):对数组中的每一项运行给定的函数,该方法没有返回值,本质上与使用for循环迭代数组一样,原数组不变

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];var copy = [];var Result = numbers.forEach(function(item, index, array) {  copy.push(item - 1) //执行某些操作})console.log(numbers); //[1, 2, 3, 4, 5, 4, 3, 2, 1] 原数组不变console.log(copy); //[0, 1, 2, 3, 4, 3, 2, 1, 0] console.log(Result); //undefined 无返回值

reduce(function(prev,item,index,array){},init):对数组中的每一项运行给定函数,返回每次该函数调用的结果组成的数组,原数组不变

prev:必需,初始值, 或者计算结束后的返回值;init:可选,传递给函数的初始值,需要事先赋值

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];var init=10;var Result = numbers.reduce(function(prev, item, index, array) {  return prev + item},init)console.log(numbers); //[1, 2, 3, 4, 5, 4, 3, 2, 1] 原数组不变console.log(Result); //返回 35

7、转换方法(Array、Boolean、Date、Number等对象通用方法)详见区别:https://www.cnblogs.com/niulina/p/5699031.html

toString():改变数组中拼接的符号,并转化为字符串(参数:"拼接符号")

返回:拼接而成的字符串,原数组不变

var a = [1, 2, 3, 4, 5];var b = a.toString();//返回 1,2,3,4,5 ;原数组不变console.log(a); //[1,2,3,4,5]console.log(b); //1,2,3,4,5

toLocaleString():改变数组中拼接的符号,并转化为字符串(参数:"拼接符号")

 返回:拼接而成的字符串,原数组不变

var a = [1, 2, 3, 4, 5];var b = a.toLocaleString();//返回 1,2,3,4,5 ;原数组不变console.log(a); //[1,2,3,4,5]console.log(b); //1,2,3,4,5

valueOf():通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中

本文完〜

这篇关于7种Js Array数组ES5/ES6常用方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611856

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu2241(二分+合并数组)

题意:判断是否存在a+b+c = x,a,b,c分别属于集合A,B,C 如果用暴力会超时,所以这里用到了数组合并,将b,c数组合并成d,d数组存的是b,c数组元素的和,然后对d数组进行二分就可以了 代码如下(附注释): #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)