资讯专栏INFORMATION COLUMN

数组方法汇总

cnio / 3078人阅读

摘要:返回值为排序后的新数组。会有一个函数作为的参数,该函数也有个参数,分别为调用的数组的每一项元素对应元素所在的位置表示该数组过滤方法。返回满足条件的元素组成的数组。

原生javascript方法
创建数组
var colors = [];
var colors = ["red", "blue"];
检测数组
if(arr instanceof Array) {}

如果网页中包含多个框架,则需要使用下面的方式检测数组

if(Array.isArray(arr)) {}
arr.valueOf()
var colors = ["red", "yellow"];
colors.valueOf();
// > ["red", "yellow"]
arr.toString()
var colors = ["red", "yellow"];
colors.toString();
// > "red,yellow"
arr.push(item)

从数组末尾添加元素,并返回新数组的长度

var colors = ["red", "yellow"];
colors.push("pink");
// > 3
arr.pop()

从数组末尾删除元素,并返回被删除的元素

var colors = ["red", "yellow"];
colors.pop();
// > "yellow"
arr.unshift(item)

从数组头部添加元素,并返回新数组的长度

var colors = ["green", "pink"];
colors.unshift("pink");
// > 3
arr.shift()

从数组头部删除元素,并返回被删除的元素

var colors = ["yellow", "orange"];
colors.shift();
// > "yellow"
arr.reverse()

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

[1, 2, 3, "reer", "game", 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]
arr.sort(fn)

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

将数组内数值元素从小到大排序。

var demo = [1, 4, 2, "reee", "name", "9", "doc"];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

将数组内数值元素从大到小排序

var demo = [1, 4, 2, "reee", "name", "9", "doc"];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]
arr.concat(otherArr)

参数中传入元素或者数组, 会将该参数合并到arr中,返回合并后新的数组,原数组不会改变

var arr = [1, 3, "jake"];
arr.concat("rose", [2, "fi"]);
// > [1, 3, "jake", "rose", 2, "fi"]
arr.slice()

剪切数组,返回剪切之后的数组,元素不会改变

传入一个参数,表示起始位置,结束位置为最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

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

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]
arr.splice()

根据参数的不同,可以分别实现删除,插入,替换元素的作用,会改变原始数组

删除

传入2个参数, 分别表示起始位置与要删除元素的个数,返回被删除掉的元素组成的数组

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, "9", "doc"]

插入

传入3个参数, [起始位置 | 要删除的项数 为0 | 要插入的元素], 最终返回删除掉的元素组成的数组,因为这里删除项数为0,因此会返回空数组

var arr = [2, 4, 6];
arr.splice(2, 0, "red", "green"); 
// > []
// arr: [2, 4, "red", "green", 6] 

替换

传入三个参数, [ 起始位置 | 要删除的项数 为1 | 要插入的元素 ],最终返回被删除掉的元素组成的数组

var arr = [2, 4, 9];
arr.splice(1, 1, ["tim", "tom"]);
// > [4]
// arr: [2, ["tim", "tom"], 9]

总结 因此,这个方法会因为参数的不同而实现不同的功能,所有的参数从头到尾依次为

[ 起始位置 | 要删除元素的个数 | 要插入元素的值,可以写入多个值 ]

arr.indexOf(item)

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

var arr = [2, "tim", 4, 5, 2];
arr.indexOf("tim");
// > 1
arr.indexOf("jake");
// > -1
arr.lastIndexOf(item)

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

var arr = [2, "tim", 4, 5, 2];
arr.lastIndexOf("tim");
// > 1
arr.indexOf("jake");
// > -1
IE6, 7, 8 不支持indexOf与lastIndexOf方法
arr.every()

对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。会有一个函数作为every的参数,该函数也有3个参数,分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

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

对数组中的每一项运行给定函数,如果该函数对其中一项返回true,则返回true。会有一个函数作为every的参数,该函数也有3个参数,分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true
arr.filter(fn)

过滤方法。返回满足条件的元素组成的数组。fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]
arr.map(fn)

对数组的每一项进行计算等处理,返回处理结果组成的数组,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]
arr.forEach(fn)

遍历数组,没有返回值,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) {
    // do something
})
arr.reduce(fn)

缩减方法。fn的参数为
[ 前一个元素 | 当前元素,从1开始 | 后一个元素的序列,从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15
arr.reduceRight(fn)

与reduce一模一样,只是方向相反。

jQuery相关方法
$.each(arr, fn)

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

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

跳过一次循环 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/91581.html

相关文章

  • Javascript判断数组是否包含特定元素方法汇总

    摘要:具体内容请参考。感谢大家阅读,另外,在这边帮朋友推一个爱心众筹,希望大家能够奉献点爱心,朋友母亲,身患直肠癌,目前在北京武警总医院接收治疗,可留言留下您的联系方式,日后感激大家 判断数组是否包含某一特定元素是很常见的需求,javascript中有很多实现方法,今天有空汇总了一下,按兼容性由强到弱排序,返回类型一律为boolean: 假设数组为arr,目标元素为target 循环遍历: ...

    impig33 评论0 收藏0
  • 排序算法终极汇总

    摘要:本文对种排序方法进行汇总。自顶向下的归并排序算法归并排序自顶向下分治思想的最经典的一个例子。另外,快排序的内循环比大多数排序算法都短。基本算法快排序是一种分治的算法,将一个数组分成两个子数组,将两部分独立排序。 本文对9种排序方法进行汇总。分别是: 插入排序 选择排序 归并排序 冒泡排序 堆排序 快排序 计数排序 基数排序 桶排序。参照《算法》第四版这本书,把排序需要的公共的方法抽象出...

    voyagelab 评论0 收藏0
  • JavaScript中操作数组的常用函数汇总

    摘要:示例语法作用方法用于删除并返回数组的最后一个元素。返回值一个新的字符串,该字符串值包含的一个子字符串,其内容是从处到处的所有字符,其长度为减。返回值一个新的字符串,包含从的包括所指的字符处开始的个字符。 1.concat()语法:arrayObject.concat(array1,array2,......,arrayn)作用:concat() 方法用于连接两个或多个数组。特征:该方法...

    beita 评论0 收藏0
  • Array() 方法汇总

    摘要:方法为数组中的每个元素都调用一次函数执行如果没有符合条件的元素返回对于空数组,函数是不会执行的。不改变原数组和差不多,默认返回的是索引。 1. length属性 && 检测数组 length属性不是只读,可以设置该属性,从数组的末尾移除项或添加新项 检测数组: 一个全局作用域下(一个网页),使用instanceof 两个以上不同的全局执行环境(网页包含多个框架),使用Array....

    JessYanCoding 评论0 收藏0
  • javascript数组方法学习汇总

    摘要:将输出新数组判断数组中的每一项是否都满足条件,都满足返回,此方法相较于之前的几个方法,返回值有差异,是一个布尔值。输出数组用于将一组值转化为数组输出数组返回一个布尔值,表示某个数组中是否包含给定的值。 1、join(sep):将数组元素组合成字符串。以sep为分隔符,省略的话则默认使用逗号为分隔符。 var arr = [a,b,c]; console.log(arr.join(-))...

    zebrayoung 评论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条评论

cnio

|高级讲师

TA的文章

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