js数组(Array对象)常用方法总结

接下来会涉及到的方法名称:

  • isArray()
  • push() pop() shift() unshift()
  • concat()
  • indexOf()
  • join() split()
  • reverse()
  • sort()
  • slice()
  • splice()
  • every() filter() forEach() map() some()

下面逐一讲解:

isArray()

判断一个对象是否为数组,参数为需判断的对象。是的话返回true,否则返回false

Array.isArray('test')
//false
Array.isArray(['t','e','s','t'])
//true
var test = [1,2,8];
Array.isArray(test)
//true

push() pop() shift() unshift()

push()

参数为一个或多个元素,调用后将此参数追加至数组末尾,并返回数组长度。

var arr1 = [1,2,3,4];
arr1.push(5)
//5
arr1.push(5)
//6
arr1.push(6,6,6)
//9
arr1.push([7,8,9])
//10
arr1
//(10) [1, 2, 3, 4, 5, 5, 6, 6, 6, Array(3)]

pop()

删除数组中的最后一个元素,并将该元素作为返回值返回。

var arr2 = [1,3,5,7,10];
arr2.pop()
//10
arr2
//(4) [1, 3, 5, 7]

shift()

删除数组中的第一个元素,并将该元素作为返回值返回。

var arr3 = [1, 2, 4, 6, 8];
arr3.shift()
//1
arr3
//(4) [2, 4, 6, 8]

unshift()

参数为一个或多个元素,调用后将此参数追加至数组开始,并返回数组长度。

var arr4 = ['a','b','c','d'];
arr4.unshift(555);
//5
arr4.unshift('world')
//6
arr4
//(6) ["world", 555, "a", "b", "c", "d"]

concat()

连接两个或多个数组,返回连接后的数组。(不会改变原有数组)

var arr1 = [1,5,9];
var arr2 = ["c",'h','i'];
arr1.concat(arr2)
//(6) [1, 5, 9, "c", "h", "i"]
arr2.concat(arr1,'hello','w');
//(8) ["c", "h", "i", 1, 5, 9, "hello", "w"]

indexOf()

查找元素在数组中出现的下标。第一个参数为元素值,第二个参数指定开始检索的位置(可选),返回第一次找到该元素的下标,若查找失败,返回-1。

var arr1 = [3,4,3,5,6];
arr1.indexOf(3)
//0
arr1.indexOf(3, 0)
//0
arr1.indexOf(3, 1)
//2
arr1.indexOf(3, 5)
//-1
arr1.indexOf(7)
//-1

若想从后面开始查找,使用方法lastIndexOf()

join()、split()

join()

将数组内容拼接成一个字符串并返回,默认以','分隔,指定参数后则以参数来分隔。

var arr1 = ['hel','lo','','w','orld'];
arr1.join()
//"hel,lo,,w,orld"
arr1.join('');
//"helloworld"
arr1.join('==');
//"hel==lo====w==orld"

var arr2 = [55,4,89];
arr2.join();
//"55,4,89"

split()

将字符串按参数分割成一个个元素,返回由这些元素组成的数组。

var str1 = "helloworld";
str1.split();
//["helloworld"]
str1.split('l');
//(4) ["he", "", "owor", "d"]
str1.split('o');
//(3) ["hell", "w", "rld"]

reverse()

颠倒数组中元素的顺序并返回。(改变原来的数组)

var arr1 = ['e','s','i','h','c'];
arr1.reverse();
//(5) ["c", "h", "i", "s", "e"]
arr1
//(5) ["c", "h", "i", "s", "e"]

sort()

对数组元素进行排序(根据编码顺序,数组内容会改变)可以传入一个自定义的函数来指定比较方式。

var arr1 = [1000, 5, 20, 1, 10];
arr1.sort()
//(5) [1, 10, 1000, 20, 5] 并不是按数值的大小排序
arr1
//(5) [1, 10, 1000, 20, 5]
arr2 = ["asdd","qws,","sqwe","mlk"];
//(4) ["asdd", "qws,", "sqwe", "mlk"]
arr2.sort();
//(4) ["asdd", "mlk", "qws,", "sqwe"]

自定义方式的写法:

  • 传入两个参数a,b。
  • a < b:a将排在b之前,返回一个小于0的值。
  • a = b:返回0。
  • a > b:返回一个大于0的值。
var arr2 = [555, 1, 120, 20, 255, 10];

//可以这样写
arr2.sort(function(a,b){
    if(a>b){
        return 1;
    }else if(a==b){
        return 0;
    }else{
        return -1;
    }
});
//或者直接
arr2.sort(function(a, b){
    return a-b;
});
//(6) [1, 10, 20, 120, 255, 555]

//这样写便是从大向小排列
arr2.sort(function(a, b){return b-a});

slice()

返回一个新数组,使用一个参数作为开始下标,数组内容为下标对应元素一直到结尾的元素。第二个参数可以指定结束下标(不包含)。参数可以为负,-x即代表倒数第x个元素。

var arr1 = ["add", "odd", "qwq", "uuu"];
arr1.slice(1);
//(3) ["odd", "qwq", "uuu"]
arr1.slice(1, 2);
//["odd"]
arr1.slice(-2, -1)
//["qwq"]
arr1.slice(-2)
//(2) ["qwq", "uuu"]

splice()

向数组中删除内容。第一个参数指定位置(可以使用负数索引),第二个参数设置要删除的数量,第三个参数可选,向第一个参数所在位置添加。返回被删除的元素。原数组的内容会发生变化。

var arr1 = [158, "emmm", "wor", 666, 233, 666]; 
arr1.splice(1, 1)
//["emmm"]
arr1
//(5) [158, "wor", 666, 233, 666]
arr1.splice(0, 2)
//(2) [158, "wor"]
arr1
//(3) [666, 233, 666]
arr1.splice(0, 1, '999')
//[666]
arr1
//(3) ["999", 233, 666]

map()、 every()、filter()、forEach()、some()

这几个方法都含有两个参数,其第一个参数为一个回调函数(下面的解释以“函数”代替)
关于方法的两个参数:

  • 函数,该函数有包含3个参数
    • cur:当前执行这个函数的元素。
    • index(可选):当前元素的索引值。
    • arr(可选):调用方法的数组对象。
  • 执行回调函数使用的this值(可选)。

下面的示例均只使用函数参数,且只使用了函数的第一个参数。

map()

使数组中的每个元素执行函数,创建并返回一个新数组。

var arr1 = [1,3,5,7,9];
arr1.map(function(cur){
    return 2*cur;
});
//(5) [2, 6, 10, 14, 18]

filter()

使数组中的每个元素执行函数,满足函数条件的元素将作为新数组中的一个元素,返回这个新数组。(过滤作用)

var arr1 = ["a",'asdsad',"p","ser","z"];
arr1.filter(function(cur){
    return cur.length == 1
});
//(3) ["a", "p", "z"]

forEach()

使数组中的每一个元素执行函数。

var arr1 = ['first','second','third'];
arr1.forEach(function(cur){
    console.log(cur);
});
//first
//second
//third

some()

检测数组中是否有元素满足函数条件。只要有一个满足条件即返回true,全部都不满足才返回false。

var arr1 = [111, 15, 25, 66, 789];
arr1.some(function(cur){
    return cur > 100;
});
//true
arr1.some(function(cur){
    return cur < 10;
});
//false

every()

检查数组中的元素是否全部满足函数条件。只有所有元素都满足条件才会返回true,只要有一个元素不满足则会返回false。

var arr1 = [1,3,5,7,8];
arr1.every(function(cur){
    return cur%2 == 0;
});
//false

如有错误,欢迎指正,感激不尽!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容