javascript中一些数组常用的API总结

更新时间：2023年09月15日 09:01:30 作者：前端技术栈

Js中数组是一个重要的数据结构,它相比于字符串有更多的方法,本篇文章总结了一些数组中常用的API,我们把它们分成两类,一类是会改变原始数组,一类是不会改变原始数组,感兴趣的小伙伴可以学习一下

前言

Js中数组是一个重要的数据结构，它相比于字符串有更多的方法，在一些算法题中我们经常需要将字符串转化为数组，使用数组里面的API进行操作。本篇文章总结了一些数组中常用的API，我们把它们分成两类，一类是会改变原始数组，一类是不会改变原始数组；一起来看一下吧。

会改变原数组

Js中数组有一些方法可以直接改变原始数组。

push()

push()方法是在数组的末尾添加一个或多个元素，并且返回改变后数组的长度。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.push(6, 7)
console.log(res);//7
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]

pop()和shift()

这两个方法都是删除数组中的元素，pop()方法是将数组中最后一个元素删除，shift()方法是将数组中第一个元素从数组中删除，都返回删除的那一项。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.pop()
console.log(res);//5
console.log(arr);//[ 1, 2, 3, 4 ]
let res2 = arr.shift()
console.log(res2);//1
console.log(arr);//[ 2, 3, 4 ]

unshift()

unshift()方法向数组的开头添加一个或多个元素，并且返回改变后数组的长度。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(0, 11)
console.log(res);//7
console.log(arr);//[ 0, 11, 1, 2, 3,  4, 5]

splice()

splice()方法添加或删除数组中的元素，有返回值，以数组形式返回删除的元素，没有删除则返回空数组。

用法：splice可以接收三个参数, splice(index, n, x)

index: 要删除或插入元素的位置, 该参数是必需的。

n: 要删除的元素个数, 如果不想删除任何元素, 可以将该参数设置为0。

x:要插入到数组中的新元素,可以是多个x1,x2,x3...如果不想插入任何元素,则可以省略这些参数。

let arr = [1, 2, 3, 4, 5]
let res = arr.splice(1, 2, 6, 7, 8)
console.log(res);//[ 2, 3 ]
console.log(arr);//[ 1, 6, 7, 8, 4, 5 ]
let res2 = arr.splice(1, 0, 8)
console.log(res2);//[]
console.log(arr);//[1, 8, 6, 7, 8, 4, 5]

sort()

sort()方法可以对数组的元素进行排序，并且返回出排序后的数组。

用法：sort()默认为升序排列。直接写sort()只能处理10以内的数字排序,处理10以上的我们需要传递一个参数，这个参数必须是函数，函数通过返回一个值来决定这两个值需不需要交换位置。如果a-b > 0,则a和b交换位置。

 let arr = [10, 12, 11, 19, 13, 15, 6];
let res1 = arr.sort(function (a, b) { return a - b; });   //实现由小到大
console.log(res1);//[6, 10, 11, 12,13, 15, 19]
let res2 = arr.sort(function (a, b) { return b - a; })   //实现由大到小
console.log(res2);//[19, 15, 13, 12,11, 10,  6]

reverse()

reverse()方法可以颠倒数组中元素的顺序，并且返回颠倒后的数组。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.reverse()
console.log(res);//[ 5, 4, 3, 2, 1 ]
console.log(arr);//[ 5, 4, 3, 2, 1 ]

不会改变原数组

Js中数组有一些方法不会直接改变原始数组，会返回出一个新的数组。

slice()

slice() 方法可提取数组的某些元素，并以新的数组返回被提取的元素。

用法：slice(n,m) 从索引n（包含n）开始找到索引m(不包含m)处。把找到的内容作为一个新的数组返回，原有数组是不改变的。

let arr = [1, 2, 3, 4, 5]
let res = arr.slice(2, 4)
console.log(res);//[ 3, 4 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
slice(n)// 从索引n（包含n）开始找到末尾
slice(0)  // slice()  将原来数组原封不动的复制一份

concat()

concat ()方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

用法：

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [7, 8]
let res = arr1.concat(arr2)
console.log(res);//[ 1, 2, 3, 4, 5, 7, 8]
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
console.log(arr2);//[ 7, 8 ]

filter()

filter()用于对数组进行过滤。

用法：它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。其中函数function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为true，则该元素被保留；函数可以接受三个参数（item, index, arr），第一个参数item也为必须，代表当前元素的值，第二个参数为当前元素的索引值，第三个参数为数组本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
const newArr = arr.filter((item, index, arr) => {
    return item.age > 19
})
console.log(newArr);//[ { name: 'son', age: 20 }, { name: 'so', age: 21 } ]
console.log(arr);//[ { name: 'song', age: 18 },{ name: 'Y', age: 19 },
                 //{ name: 'son', age: 20 }, { name: 'so', age: 21 }]

forEach()

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。

用法：回调函数中可以接受三个参数（item,index,arr），第一个参数item也为必须，代表当前元素的值，第二个参数为当前元素的索引值，第三个参数为数组本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
arr.my_forEach((item, index, arr) => {
    console.log(item.age);//18 19 20 21
})
console.log(arr);//[ { name: 'song', age: 18 }, { name: 'Y', age: 19 },
    //{ name: 'son', age: 20 },{ name: 'so', age: 21 } ]

toString

toString 把数组中的每一项拿出来，用逗号隔开，组成字符串，原有数组不变。

用法：

let arr = ['song', 'Y', 'son', 'so']
let res = arr.toString()
console.log(res);//'song,Y,son,so'
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]

join(分隔符）

join(分隔符）把数组中的每一项拿出来，用指定的分隔符隔开，原有数组不变。

用法：

let arr = ['song', 'Y', 'son', 'so']
let res = arr.join(',')
console.log(res);//'song,Y,son,so'
console.log(res.length);//13
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]
console.log(arr.length);//4

小结

Js中数组的方法不只这么一些，比如还有一些遍历的方法:map,reduce,find,every等等，我们需要知道。

到此这篇关于javascript中一些数组常用的API总结的文章就介绍到这了,更多相关javascript数组API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

前端判断节假日的详细代码举例
因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?这篇文章主要给大家介绍了关于前端判断节假日的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08
JS实现图片幻灯片效果代码实例
这篇文章主要介绍了JS实现图片幻灯片效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
JavaScript实现文件下载并重命名代码实例
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
微信小程序使用ECharts的示例详解
echarts-for-weixin是ECharts官方维护的一个开源项目，提供了一个微信小程序组件，可以通过这个组件在微信小程序中使用 ECharts 绘制图表。本文将通过示例详解微信小程序使用ECharts的方法，感兴趣的可以了解一下
2022-06-06
非常不错的弹出一个div的js代码
看代码主要是用css控制div的显示和div的显示位置和式样的代码
2008-06-06
JavaScript中“基本类型”之争小结
所谓“基本类型（primitive types）”的概念ECMAScript（V3，V5）中压根就没有，它只是将类型分为6种,感兴趣的朋友可以参考下
2013-01-01
小程序点餐页吸顶滚动实现完整代码
:原生小程序吸顶功能能够自动吸附在顶部,无需用户手动滑动返回,提高了用户浏览页面的流畅度和便捷性,下面这篇文章主要介绍了小程序点餐页吸顶滚动实现的相关资料,需要的朋友可以参考下
2026-05-05
Ionic默认的Tabs模板使用实例
这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
12 款 JS 代码测试必备工具(翻译)
这篇文章主要介绍了12 款 JS 代码测试必备工具(翻译),需要的朋友可以参考下
2016-12-12
分享20个JavaScript 单行代码
这篇文章主要给大家分享了20个JavaScript 单行代码,JavaScript单行代码杀手锏，可以让工作更有效率哦,需要的朋友可以参考一下，希望对你的学习有所帮助
2021-12-12