资讯专栏INFORMATION COLUMN

JS数组方法汇总

wean / 2133人阅读

Javascript原生方法

注意:js数组每一项可以保存任何类型的数据,比如第一个元素是字符串,第二个元素是数字,第三个元素是对象

创建数组

tips: 建议使用数组字面量方式【简单】

var colors = new Array()
var colors = new Array("red","blue")

var colors = [];
var colors = ["red","blue"];
检测数组

对于一个网页或一个全局作用域,可以通过如下方法

if(arr instanceof Array){
    //对数组执行某些操作
}

网页中包含多个框架,通过如下ES5方法检测

if(Array.isArray(arr)){
    //对数组执行某些操作
}
转换方法

arr.valueOf()

var colors = ["red","blue","green"]
colors.valueOf() //["red","blue","green"]

arr.toString()

var colors = ["red","blue","green"]
colors.toString() //"red,blue,green"

tips: arr.toString() 与 arr.join()输出相同,不过join里可以输入其它链接符

push、pop、unshift、shift

arr.push(item)
接受任意数量的参数,添加到数组末尾,返回新数组的长度

var colors = ["red"]
colors.push("blue","green"); //3

arr.pop()
删除数组最后一项,返回删除的项

var colors = ["blue","green"]
colors.pop() //green

arr.unshift()
接受任意数量的参数,添加到数组头部,返回新数组的长度

var colors = ["red"]
colors.unshift("green") //2

arr.shift()
删除数组第一项,返回删除的项

var colors = ["blue","green"]
colors.shift() //blue
reverse、sort、concat、slice

arr.reverse()
反转数组的顺序,并返回重新排序之后的数组, 原数组会被改变

var arr1 = [1,2,3,"red","blue"]
arr1.reverse() //["blue", "red", 3, 2, 1]

arr.sort()
如果不传参数,默认情况下数组内的元素会被转换为字符串进行比较,因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变
注意:sort里接收一个比较参数

var b = [1,2,3]
//升序
b.sort((a,b)=>a-b) //[1, 2, 3]
//降序
b.sort((a,b)=>b-a) //[3, 2, 1]

sort扩展(非数字类型排序,对象里的某个key值排序)

arr.concat()
没有传递参数,那么只是复制当前数组并返回副本,原数组不变;
传递一个元素(数组)或多个元素(数组),会将其合并到arr中,返回新数组,原数组不变

var colors = ["red","blue","green"]
colors.concat("gray",["a","green"])  //["red", "blue", "green", "gray", "a", "green"]
console.log(colors) // ["red", "blue", "green"]

tips: js数组复制

arr.concat()    //原生
 
[...arr]   //ES6

Array.from(arr) //ES6

$.extend(arr) //JQ

arr.slice
剪切数组,返回剪切之后的数组,元素不会改变
1、传入一个参数,表示起始位置,结束位置为最末尾

var colors = ["red","blue","green"]
colors.slice(2) //["green"]

2、传入2个参数,表示起始位置与结束位置,但不包括结束位置所在的元素

var colors = ["red","blue","green"]
colors.slice(1,2) //["blue"]
splice()

删除:arr.splice(index, num)
传入两个参数,第一个为位置( 数组下标),第二个为删除的项数,可以删除任意项,返回删除元素组成的数组,原数组变了

var colors = ["red","blue","green"]
colors.splice(1,1) //["blue"]

插入:arr.splice(index,0,item)
传入3个参数, [起始位置( 数组下标) | 要删除的项数 为0 | 要插入的元素], 最终返回删除掉的元素组成的数组,因为这里删除项数为0,因此会返回空数组

var colors = ["red","blue","green"]
colors.splice(1,0,"gray") //[]
console.log(colors) // ["red","gray","blue","green"]

替换:arr.splice(index, num, item)
传入3个参数,[起始位置 | 要删除的项数 | 要插入的任意项数], 最终返回删除掉的元素组成的数组

var colors = ["red", "gray", "blue", "green"]
colors.splice(2,2,"yellow") // ["blue", "green"]
console.log(colors); //["red", "gray", "yellow"]

tips:这个方法会因为参数的不同而实现不同的功能

查找元素

arr.indexOf()
验证数组中是否含有某个元素,返回第一个匹配到的元素在数组中所在的位置,如果没有,则返回 -1

var colors =  ["red", "gray", "yellow"]
colors.indexOf("gray") // 1
colors.indexOf("mm") //-1

arr.lastIndexOf()
验证数组中是否含有某个元素,不过是从数组尾部开始查找,返回第一个匹配到的元素所在的位置,如果没有,则返回-1

var colors =  ["red", "gray", "yellow","gray"]
colors.indexOf("gray") // 3
colors.lastIndexOf("mm") //-1
迭代方法

ES5定义了5个迭代方法,每个方法接收2个参数----》[要在每一项上运行的函数 | 运行该函数的作用域对象(可选)]
运行的函数包括3个参数 ---》 [数组项的值 | 该项在数组中的位置 | 数组对象本身]

arr.every()
检查数组中的项是否满足某个条件,传入的函数对每一项都返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.every((item, index, arr)=> item >2 ) //false

arr.some()
检查数组中的项是否满足某个条件,只要传入的函数对数组中某一项返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.some((item, index, arr)=> item >2 ) //true

arr.filter()
对数组中的每一项运行给定函数,返回该函数会返回true的项组成的新数组

//返回nums中所有值大于2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

arr.map()
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的新数组

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach()
对数组中的每一项运行给定函数,这个方法没有返回值

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.forEach((item, index, arr)=> item * 2 ) // undefined

tips: map、forEach里不可以使用continue、break ,每一项都会执行,如果遍历中要用到continue或break提升效率,则可以使用for()循环 或 for...of..循环

归并操作

每个方法接收两个参数[在每一项上调用的函数 | 作为归并基础的初始值(可选)],都会迭代数组每一项,返回一个最终的值
函数接收4个参数[前一个值 | 当前值 | 项的索引 | 数组对象本身]

arr.reduce()
从左开始

//求数组所有元素之和
var nums = [1,2,3,4,5]
nums.reduce((prev,cur,index,arr)=>prev+cur) //15

arr.reduceRight()
从右开始

//求数组所有元素之和
var nums = [1,2,3,4,5]
nums.reduceRight((prev,cur,index,arr)=>prev+cur) //15
ES6数组方法扩展

1、求一个数组中最大元素

由于js不提供求数组最大元素的函数,所以只能套用Math.max函数将数组转为一个参数序列,然后求最大值;有了扩展运算符以后就可以直接使用了Math.max了

//ES5的写法
Math.max.apply(null,[1,3,6]) ///6
//ES6的写法
Math.max(...[1,3,6]) //6

2、通过push函数将一个数组添加到另一个数组的尾部

ES5的写法中,push的参数不可以是数组,所以只好通过apply方法变通使用push方法;有了扩展运算符,可以直接将数组传入push方法中

//ES5的写法
var arr1 = [1,2]
var arr2 = [4,5]
Array.prototype.push.apply(arr1,arr2) //返回新数组长度,arr1改变

//ES6的写法
var arr1 = [1,2]
var arr2 = [4,5]
arr1.push(...arr2) //返回新数组长度,arr1改变

3、合并数组

//ES5写法
var arr = [4,5]
[1,2].concat(arr) //[1, 2, 4, 5]

//ES6写法
var arr = [4,5]
[1,2,...arr]

4、Array.from()妙用

//数组去重
function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n)); // [1, 2, 3]

//遍历Nodelist对象
let ps = document.querySelectorAll("p")
Array.from(ps).forEach(function(p){
    console.log(p)
})

//将字符串转化为数组
Array.from("hello") //["h", "e", "l", "l", "o"]

5、Array.of()
替代Array() 或 new Array(),并且不存在参数不同而导致的重载

Array.of(2,3,5) //[2,3,5]
Array.of(2) //[2]
Array.of(2).length //1

6、arr.copyWithin()
将当前数组内部制定位置的成员复制到其他位置,返回当前新数组,原数组改变
接收三个参数[从该位置开始替换 | 从该位置开始读取数据 | 到该位置停止读取数据]

//将4,5移动到前两位
[1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]

7、arr.find() arr.findIndex()
找出第一个符合条件的数组成员,它参数是一个函数,每一个成员执行这个函数,找到返回true,没找到返回undefined
函数的参数[当前值 | 当前的位置 | 原数组]

[1,4,9,10,15].find((item, index, arr)=>{
    return item > 9;
}) //10

[1,4,9,10,15].findIndex((item, index, arr)=>{
    return item > 10;
}) //4

8、arr.fill()
用给定的值填充一个数组

["a","b","c"].fill(7) //[7,7,7]

["a","b","c"].fill(7,1,2) //["a",7,"c"]

9、arr.includes()
数组是否包含某个值,返回true 或 false

[1,2,3].includes(2) //true

10、for...of...
遍历数组元素

for(let item of colors){
    console.log(item) // red,gray,yellow
}

tips:里面可以使用break continue提升效率

Jquery方法 $.each(arr, fn)

遍历数组或者对象,fn有2个参数,分别为, 比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

tips:跳过一次循环 return | return true 终止循环 return false

$.grep(arr, fn)

过滤方法,功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变
$.map(arr, fn)

对每项进行处理,返回处理结果组成的数组,此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响
$.inArray(item, array)

检测某一个元素item是否存在与数组之中,返回其所在的位置,如果不在,则返回-1

$.inArray(3, [1, 2, 3]);
// > 2
$.merge(arr1, arr2)

合并数组,会改变第一个参数的数组为合并之后的数组,返回合并之后的数组

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变,可以使用下面的方式来写
$.merge($.merge([], arr), arr2);
$.unique(arr)

过滤DOM数组中重复的元素

$.makeArray(obj)

将类数组对象转换为数组

$(elem).toArray()

将jQuery对象集合恢复成DOM数组

参考:
数组方法汇总

如果你觉得此文对你有一定的帮助,可以点击下方的【赞】收藏备用

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107048.html

相关文章

  • JS中求数组最大(最小)值汇总(持续更新)

    摘要:如何使用,在一个类型的数组里,查找最大或最小数呢以下介绍五个方法。利用代码如下解释方法就是通过一个函数,针对一个累加器和数组中的每一个元素,将一个数组最终减少到一个值。如果求最小值,将改成。 如何使用JS,在一个Number类型的数组里,查找最大(或最小)数呢? 以下介绍五个方法。(如果有新方法,后续会更新,也欢迎各位留言提供新方法) 1. 不使用任何库函数 代码如下: functio...

    church 评论0 收藏0
  • JS基础篇--JS数组常用方法汇总

    摘要:在,下,数据有添加成功,但返回值却是转换方法方法方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。而调用数组的方法后,其值的顺序变成了。返回值如果从中删除了元素,则返回的是含有被删除的元素的数组。 转换方法 所有对象都具有toLocaleString()、toString()、valueOf()方法。其中调用数组的toString方法会返回以数组中的每个值的字...

    techstay 评论0 收藏0
  • JS 数组方法学习汇总

    摘要:整个数组的大操作转换拼接排序倒置这个方法是将数组转换为字符串,数组元素间用传进去的参数没有参数就用分隔这个方法用于拼接两个数组并返回一个新的数组。看代码吧打印整个数组这个方法是对数组的每一项运行给定函数,返回每一项返回结果组成的数组。 前言 在 JS 中我们数组用的是比较多的了,它自带了很多方法可以用,省去了我们时间,特别是 ES6 当中对数组的扩展让数组具有了更强大的功能,为了以后使...

    PAMPANG 评论0 收藏0
  • JS对象 - Array属性方法汇总

    摘要:属性名描述为对象添加属性方法返回数组对象引用返回数组元素数目方法名描述返回更改原数组连接多个数组连接后新数组将数组中所有元素合为一个字符串。 属性名 描述 prototype 为对象添加属性、方法 constructor 返回数组对象引用 length 返回数组元素数目 方法名 描述 返回 更改原数组 concat() 连接多个数组 连接后新数组 N ...

    RancherLabs 评论0 收藏0
  • LeetCode 攻略 - 2019 年 7 月下半月汇总(100 题攻略)

    摘要:月下半旬攻略道题,目前已攻略题。目前简单难度攻略已经到题,所以后面会调整自己,在刷算法与数据结构的同时,攻略中等难度的题目。 Create by jsliang on 2019-07-30 16:15:37 Recently revised in 2019-07-30 17:04:20 7 月下半旬攻略 45 道题,目前已攻略 100 题。 一 目录 不折腾的前端,和咸鱼有什么区别...

    tain335 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<