JavaScript数组的常用方法总结

不改变原数组的方法:

1.indexOf()lastIndexOf()

1.1 indexOf() : 返回元素在数组的索引,从0开始。若数组不存在该元素,则返回-1

var arr = [1, 2];
arr.indexOf(1); //0
arr.indexOf(10); //-1

1.2 lastIndexOf():
返回元素在数组中最后一次出现的索引,如果没有出现则返回-1.

var arr = [1, 2, 3, 4, 2];
arr.lastIndexOf(2); // 4

2.slice(): 与字符串substring()方法一样,截取数组的一部分,返回一个新的数组。

2.1 通常,接受2个参数作为一个左闭右开区间,即包括开始索引位置的元素,但不包括结束索引位置的元素。

var arr = [1, 2, 3,4,5,6];
arr.slice(0,2)    //[1, 2] 只返回索引0,1位置的元素

2.2 可以省略第二个参数,即截取到原数组的最后一个元素。

arr.slice(2,);    //[3, 4, 5, 6] 

2.3 如果没有传参数,则返回一个从头到尾截取所有元素的新数组。可以用来复制一个数组。

var copyArr = arr.slice();
copyArr;   //[1, 2, 3, 4, 5, 6]

3.concat(): 合并数组。把当前的数组和另一个数组连接起来,并返回一个新的数组。

3.1 concat()方法的参数可以有多个,也可以任意任意类型,数值字符串布尔值数组对象 都可以,参数会被被添加到新的数组中。

var arr1 =  [1, 2, 3,4,5,6];
var arr2 = ['a','b','c'];
var arr3 = arr1.concat(arr2);
arr3;   //[1, 2, 3, 4, 5, 6, "a", "b", "c"]

3.2 注意,如果参数是数组, 会被拉平一次,即数组会被拆开来,加入到新的数组中。具体看示例:

var arr1 = [1, 2, 3];
var arr2 = arr1.concat(66,'abc',true,[10,20],[30,[31,32]],{x:100});
arr2;  //[1, 2, 3, 66, "abc", true, 10, 20, 30, [31,32], {x:100}]

4.join(): 转成字符串。它会把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串。

4.1 参数是用来指定连接的字符串。见示例代码:

var arr = [1, 2, 3];
arr.join('*')   //"1*2*3"

4.2 如果没有指定参数,默认是用,连接。

var arr = [1, 2, 3];
arr.join()   //"1,2,3"

5.toString(): 返回数组的字符串形式

var arr = [1, 2, 3];
arr.toString() // "1,2,3"

6.valueOf():返回数组本身

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

7.map():

7.1 对数组的所有成员依次调用一个函数,返回值是一个新数组。

var arr = [1, 2, 3];
arr.map(function(elem){
    return elem*2;
});
//[2, 4, 6, 8]
arr; //[1, 2, 3]

7.2 map方法接受一个函数作为参数,该函数调用时,map方法会将其传入3个参数,分别是当前成员、当前位置和数组本身(后2个参数可选)。

arr.map(function(elem, index, arr) {
    return elem * index;
}); 
//[0, 2, 6]

7.3 map方法还可以接受第2个参数,表示回调函数执行时this所指向的对象。

8.forEach(): 与map方法很相似,也是遍历数组的所有成员,执行某种操作。注意forEach方法一般没有返回值

var arr = [1, 2, 3];
function log(element, index, array) {
    console.log('[' + index + '] = ' + element);
}
arr.forEach(log);
// [0] = 1
// [1] = 2
// [2] = 3

注意: forEach方法无法中断执行,总是会将所有成员遍历完。如果希望符合某种条件时,就中断遍历,要使用for循环

9.filter():

9.1 筛选数组的元素,返回值是符合筛选条件元素组成的一个新数组。

var arr = [1, 2, 3, 4, 5];
arr.filter(function (elem) {
  return (elem > 3);
});
//[4, 5]

9.2 filter方法接受一个函数作为参数,该函数调用时,fitler方法会将其传入3个参数,分别是当前成员、当前位置和数组本身(后2个参数可选)。

var arr = [1, 2, 3, 4, 5];
arr.filter(function (elem, index, arr) {
  return index % 2 === 1;
});
//[2, 4]

9.3 filter方法还可以接受第2个参数,指定测试函数所在的上下文对象(即this对象)。

10.some()every(): 类似“断言”(assert),用来判断数组成员是否符合某种条件。

10.1 接受一个函数作为参数,所有数组成员依次执行该函数,返回一个布尔值。该函数接受三个参数,依次是当前位置的成员、当前位置的序号和整个数组。

10.2 some方法是只要有一个数组成员的返回值是true,则整个some方法的返回值就是true,否则false。

var arr = [1, 2, 3, 4];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

10.3 every方法则是所有数组成员的返回值都是true,才返回true,否则false。

var arr = [1, 2, 3, 4];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

10.4 注意,对于空数组some方法返回false,every方法返回true

10.5 someevery方法还可以接受第2个参数,用来绑定函数中的this关键字

11.reduce()reduceRight(): 依次处理数组的每个成员,最终累计为一个值。

11.1reduce从左到右处理(从第一个成员到最后一个成员)

arr.reduce(function(x, y){
  console.log(x, y)
  return x + y;
});
// 1 2
// 3 3
// 6

11.2reduceRight则是从右到左处理(从最后一个成员到第一个成员)

arr.reduceRight(function(x, y){
  console.log(x, y)
  return x + y;
});
// 3 2
// 5 1
// 6

改变原数组的方法:

1.push(): 向数组的末尾添加若干元素。返回值是改变后的数组长度。

var arr = [1, 2];
arr.push(3) ;// 3
arr; //  [1, 2, 3]
arr.push('b','c'); //5
arr; //[1, 2, 3, "b", "c"]
arr.push([10,20]); //6
arr; //[1, 2, 3, "b", "c", [10,20]]

2.pop(): 删除数组最后一个元素。返回值是删除的元素。

var arr =[1, 2, 3, "b", "c", [10,20]];
arr.pop(); //[10, 20]
arr;  // [1, 2, 3, "b", "c"]

3.unshift(): 向数组头部添加若干元素。返回值是改变后的数组长度。

var arr = [1, 2];
arr.unshift(3,4 );  //4
arr;  // [3, 4, 1, 2]

4.shift(): 删除数组最后一个元素。返回值是删除的元素。

var arr = ['a', 'b', 1, 2];
arr.shift(); //'a'
arr;  //['b', 1, 2]

5.sort(): 数组排序。

5.1 注意:默认是将所有元素转换成字符串,再按字符串Unicode码点排序。返回值是新的数组。

var arr = [1, 2, 12, 'a', 'b', 'ab', 'A', 'B']
arr.sort();  //[1, 12, 2, "A", "B", "a", "ab", "b"] 注意:12排在了2的前面

5.2 如果元素都是数字,要按从小到大排序,可以传入一个回调函数作为参数。

var arr = [1, 2, 12, 100]

arr.sort(function(a,b){
    return a-b;
});
// [1, 2, 12, 100]

5.3 如果想要从大到小排序:

arr.sort(function(a,b){
    return b-a;
});
//[100, 12, 2, 1]

6.reverse(): 颠倒数组中元素的位置

var arr = [1, 2, 12, 'a', 'b', 'ab', 'A', 'B'];
arr.reverse();
//["B", "A", "ab", "b", "a", 12, 2, 1]

7.splice(): 修改数组元素(新增、删减、替换)。从指定的索引开始删除若干个元素,然后再从该位置添加若干个元素。返回值是删除的元素组成的数组。参数1是删除元素的起始索引,参数2是删除的元素个数,之后的参数为待添加的元素。

7.1 只删除,不添加。可以传入2个参数:

var arr = ['Alibaba', 'Tencent', 'Baidu', 'XiaoMi', '360'];

// 从索引2开始删除3个元素
arr.splice(2, 3); // 返回删除的元素 ['Baidu', 'XiaoMi', '360']
arr; // ['Alibaba', 'Tencent']

7.2 只添加,不删除。第2个参数设为0,即不删除元素。

arr.splice(2, 0, 'Toutiao', 'Meituan', 'Didi'); // 返回[],因为没有删除任何元素
arr; //["Alibaba", "Tencent", "Toutiao", "Meituan", "Didi"]

7.3 先删除若干元素,然后在删除的位置上在添加若干个元素。

var  arr =["Alibaba", "Tencent", "Toutiao", "Meituan", "Didi"]
arr.splice(2,2,'Apple','Google');  //["Toutiao", "Meituan"]
arr; //["Alibaba", "Tencent", "Apple", "Google", "Didi"]

Array.isArray()

用来判断一个值是否为数组, 如果参数为数组,返回true,否则,返回false.

var arr = [1,2]
Array.isArray(arr);  //true;

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

推荐阅读更多精彩内容