数组的操作方法简介

一、排序方法

reverse():倒序

改变数组本身,返回值也是改变后的数组

var a = [1, 2, 3, 4, 5];
a.reverse();
console.info(a);            //[5, 4, 3, 2, 1]

sort():重排序

改变数组本身,返回值也是改变后的数组

  • 默认情况下按升序排列,会对数组中每项调用 toString() 转型后将字符串对比(就算数组中是数字,对比的也是字符串)
var b = [0, 1, 5, 10, 15];
b.sort();
console.info(b);       // [0, 1, 10, 15, 5]
  • 可接收一个比较函数,两两比较,以便指定哪个值位于哪个值前面
    比较函数,返回负数,则正序,返回正数则倒序;
function compare(value1, value2) {
    if (value1<value2) {
        return -1;
    } else if(value>value2) {
        return 1;
    } else {
        return 0;
    }
}
var b = [0, 1, 10, 5, 15];
b.sort(compare);          // [0, 1, 5, 10, 15]
  • 可简化比较函数
function compare(value1, value2) {
    return value1 - value2;
}
var b = [0, 1, 10, 5, 15];
b.sort(compare);          // [0, 1, 5, 10, 15]

二、操作方法

concat():数组合并

不会改变原来的数组,返回合并好的新数组
参数:拼接在后面的数组

var a = [1, 2, 3, 4, 5];
var b = ['a', 'b', 'c', 'd', 'e'];
var c = a.concat(b);        // a 后面拼接 b
console.info(a);            // [1, 2, 3, 4, 5]
console.info(b);            // ["a", "b", "c", "d", "e"]
console.info(c);            // [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]

缺点:占用双倍内存;

slice():截取数组

不会改变原来数组,返回截取的项组成的数组
参数:
1、返回项的起始索引(包含)
2、返回项的结束索引(不包含)(可选,若无则截取到最后)

var c = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"];
var d = c.slice(1, 5);
console.info(c);            // [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]
console.info(d);            // [2, 3, 4, 5]
  • 如果参数是负数则用数组长度加上参数来确定位置;
  • 如果结束位置小于起始位置,返回空数组;

splice():增删改查

改变原来数组,返回被删除项组成的数组
参数:
1、操作起始位置的索引(包含)
2、删除的项数(从起始位置往后删)
3、后面的所有参数都是插入的项(插入项的第一项位置就是起始位置索引)

删除:

var num = [1, 2, 3, 4, 5];
var removed = num.splice(1, 1);                 // 从位置 1 开始删除一项
console.info(num);                              // [1, 3, 4, 5]
console.info(removed);                          // [2]

插入:

var num = [1, 2, 3, 4, 5];
var removed = num.splice(1, 0, 3);              // 从位置 1 开始删除一项
console.info(num);                              // [1, 3, 2, 3, 4, 5]
console.info(removed);                          // []

替换:

var num = [1, 2, 3, 4, 5];
var removed = num.splice(1, 2, 5, 5, 5);
console.info(num);                  // [1, 5, 5, 5, 4, 5]
console.info(removed);              // [2, 3]

三、位置方法

indexOf() 和 lastIndexOf():查询目标在数组中的位置

不改变原来数组,返回目标位置索引,若未查到,返回 -1
indexOf() 方法从数组开头向后查找,lastIndexOf() 方法从数组末尾向前查找
查找时会用全等操作符
参数:
1、查找目标(可为字符串或正则)
2、查找起始位置索引

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.info(num.indexOf(4));                // 3
console.info(num.indexOf('4'));              // -1
console.info(num.lastIndexOf(4));            // 5
console.info(num.indexOf(4, 4));             // 5
console.info(num.lastIndexOf(4, 4));         // 3

四、迭代方法

every():

对数组每一项使用回调函数,如果该函数对每一项都返回 true,才返回 true,否则返回 false
参数:
1、数组项的值
2、该项在数组中的索引
3、数组对象本身

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyResult = num.every(function(item, index, array) {
    return item > 2;
});
console.info(everyResult);              // false

some():

对数组每一项使用回调函数,如果该函数对任意一项返回 true,就返回 true,否则返回 false
参数:
1、数组项的值
2、该项在数组中的索引
3、数组对象本身

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var someResult = num.some(function(item, index, array) {
    return item > 2;
});
console.info(someResult);              // true

filter():

对数组每一项使用回调函数,返回该函数会返回 true 的项组成的数组

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var filterResult = num.filter(function(item, index, array) {
    return item > 2;
});
console.info(filterResult);           // [3, 4, 5, 4, 3]

map():

对数组每一项使用回调函数,返回每次函数调用后返回的结果组成的数组

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = num.map(function(item, index, array) {
    return item + 2;
});
console.info(mapResult);            // [3, 4, 5, 6, 7, 6, 5, 4, 3]

forEach():

对数组每一项使用回调函数,这个方法没有返回值也不需要回调函数返回(不改变原来数组)

var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var newNum = [];
var forEachResult = num.forEach(function(item, index, array) {
    newNum.push(item + 2);
});
console.info(num);                        // [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.info(newNum);                     // [3, 4, 5, 6, 7, 6, 5, 4, 3]
console.info(forEachResult);              // undefined

五、归并方法

reduce() 和 reduceRight()

不改变数组本身,迭代数组的所有项,构建一个最终的返回值;
reduce() 方法从前往后逐个遍历
reduceRight() 方法从后往前逐个遍历
参数:
1、在每一项上调用的函数
2、作为并归基础的初始值(可选)
传入的函数参数:
1、前一个值(有初始值时从初始值开始)
2、当前值
3、项的索引
4、数组对象
传入函数的返回值会作为第一个参数传给下一次

/* 求所有值之和 */
var num = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var sum = num.reduce(function(prev, cur, index, array) {
    return prev + cur;
});
console.info(num);              // [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.info(sum);              // 25

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,197评论 0 4
  • 数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。 JavaScript...
    劼哥stone阅读 1,124评论 6 20
  • 本文总结了数组所有的方法。 1. 检测对象是不是数组 instanceof操作符 Array.isArray()方...
    胡不归vac阅读 659评论 0 1
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,956评论 0 16
  • 本章内容 使用对象 创建并操作数组 理解基本的 JavaScript 类型 使用基本类型和基本包装类型 引用类型的...
    闷油瓶小张阅读 674评论 0 0