小白学JS总结的10个常用的数组操作函数

OKX欧易app

OKX欧易app

欧易交易所app是全球排名第一的虚拟货币交易所,注册领取6万元盲盒礼包!

APP下载   官网注册

由于本人最近工作原因,学习时间相对少了一些,今天趁着周末抽空总结了一下这段时间学习的JS数常用的10个函数。

1.push()方法在数组尾部添加一个新的元素,需要注意的是,该方法返回值是得到的新数组的长度。

语法

arr.push(element1, element2, element3,...)

console.log(arr.push(1, 2, 3)); // 3console.log(arr); // [1, 2, 3]

2.pop()方法从数组中删除最后一个元素。

语法

arr.pop()

console.log(arr.pop()); // 3

3.unshift()方法向数组的头部添加一个或多个元素,并返回新的数组长度。

语法

arr.unshift(element1, element2, element3,...)


arr.unshift(1, 2, 3); // 3console.log(arr); // [1, 2, 3]

unshift方法不会创建新的数组,而是改变原来的数组。

4.join()按照指定分隔符将所有数组元素组合成为一个字符串。

语法

arr.join(separator)

其中,separator为分隔符,默认是使用逗号作为分隔符的,同时,该方法返回的是一个字符串,通过分隔符把arr中的每个元素连接起来。

arr = ["电脑", "手机", "相册"];let res = arr.join('-');console.log(res); // 电脑-手机-相册

在JS中,字符串也可以当做数组来操作:

let str = "Hello";console.log(str[0], str[1], str[2], str[3], str[4]); // H e l l o

5.concat()通过合并现有数组来创建一个新的数组。

语法

arr.concat(array1,array2,...,arrayX)

console.log("hello ".concat("world")); // hello worldconsole.log([1, 2, 3].concat([4, 5], [6, 7])); // [ 1, 2, 3, 4, 5, 6, 7 ]console.log([1, 2, 3].concat(123, ["php", true], { x: 1, y: 2 })); // [ 1, 2, 3, 123, "php", true, {x: 1,y: 2} ] 

6.slice()从已有的数组中选定元素并返回一个新数组。

语法

arr.slice(start, end)

参数说明:

参数说明start必填参数,规定从什么地方开始取。若是负数,将从数组尾部开始计算,-1表示数组的最后一个元素,-2表示数组的倒数第二个元素,以此类推。end这是一个可选参数,规定了从何处结束取值,并且取得位置不包含该值,如果没有指定该参数,则从start一直取到末尾。


arr = [1, 2, 3, 4, 5];console.log(arr.slice(0, 3)); // [ 1, 2, 3 ]console.log(arr.slice(3)); // [4, 5]console.log(arr.slice(-2)); // [4, 5]

7.splice()方法可以从数组添加/删除指定的元素,并且返回的是一个存储了被删除项目的数组。

语法

arr.splice(index, num, item1,item2,...,itemX)

参数说明

参数说明index必填参数,规定了从何处添加/删除数组,若是负数,将从数组尾部开始计算,-1表示数组的最后一个元素,-2表示数组的倒数第二个元素,以此类推。num必填参数,规定了要删除的项目数量,如果为0,则表示不删除项目。item1,item2,...,itemX向数组中添加的新项目,该参数为可选参数

splice()方法的返回值是一个数组,里面包含了被删除的元素。

arr = [1, 2, 3, 4, 5];res = arr.splice(2); // [ 3, 4, 5 ]

可以利用该方法更新一个数组里面的元素,例如:

arr = [1, 2, 3, 4, 5];res = arr.splice(1, 2, 88, 99);console.log(res); // [2, 3]

从上面代码可以获取res的值为一个数组,就是被删掉的元素2,3,同时原来的数组arr被修改成了[1, 88, 99, 4, 5]

8.sort()可以对数组元素进行排序。

arr.sort(orderby)

参数说明orderby可选参数,规定了排序方式,注意:该参数必须是一个函数。

解释:

sort()方法在参数留空的时候,默认是按照字母表的顺序排序的,如果要说得更准确的话,应该说它是按照元素的字符编码的顺序进行排序的。

如果是按照其他方法排序的话,就需要传一个函数进行比较了,该函数有两个参数ab,然后我们比较这两个参数的差值即可得到排序:

当a - b < 0时,则a应该出现在b的前面,返回一个小于0的值;当a - b = 0时,则返回0;当a - b > 0时,则返回一个大于0的值
arr = ["p", "b", "a"];// 默认按照字符表顺序排序console.log(arr.sort()); // [ "a", "b", "p" ]

现在我们新创建一个数组并对其进行排序:

arr = [10, 9, 22, 4];console.log(arr.sort);

通过测试,可以发现,数组内部的元素并没有按照数值大小从小到大的顺序排列,结果如图:

要实现这个功能,就必须在sort()方法内部传一个函数:

function sortArray(a, b) {    return a - b;}console.log(arr.sort(sortArray));

以上方法可以使用箭头函数直接写在sort()方法内部:

console.log(arr.sort((a, b) => a - b));

这样就实现了排序,结果如图:

9.forEach()方法可以遍历数组。

语法

arr.forEach(function (item, index, array), this)

参数说明function (item, index, array)必填参数,每个元素调用的函数。item 当前遍历的元素;index 当前元素的索引;array 当前遍历的数组。thisValue可选参数,传递给函数的值使用this的值。

10.filter()方法可以过滤出符合指定条件的元素,并返回一个新的数组,该方法不会改变原始数组,而是创建一个新的数组。

arr.filter(function (item, index, array), thisValue)

参数说明function (item, index, array)必填参数,每个元素调用的函数。item 当前遍历的元素;index 当前元素的索引;array 当前遍历的数组。thisValue可选参数,传递给函数的值使用this的值。

案例:获取数组里面的所有偶数值:
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];res = arr.filter(item => !(item % 2));console.log(res); // [ 2, 4, 6, 8, 10, 12 ]

以上肯定不是所有Javascript的数组操作方法,我也是总结的我所学习到的常用方法,如果还有其他的方法,欢迎大家在评论区补充,有写的不对的地方,烦请各位大佬批评指正。

本站所有软件信息均由用户上传发布,版权归原著所有。如有侵权/违规内容,敬请来信告知邮箱:764327034@qq.com,我们将及时撤销! 转载请注明出处:https://www.ssyg068.com/kuaixun/2683.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年07月03日
下一篇 2024年07月03日

相关推荐

  • 27个重要的JavaScript数组函数整理汇总

    1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法,它确定传递的输入是否为数组。语法:在下面的代码中, arr 将是我们要检查的输入,是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例:Array.isArray([1, 'something'

    2024-06-24 06:35:01
    389 0

发表回复

8206

评论列表(0条)

    暂无评论

binance币安交易所
已有2000万用户加入币安交易所

立即下载