Javascript - 数组常见方法使用

简单介绍一下javascript中数组常见方法的使用

  • concat
    通过合并(连接)现有数组来创建一个新数组,说明不会改变原数组;
var arr1 = ['1', '2', '3'];
var arr2 = ['a', 'b', 'c'];

var result = arr1.concat(arr2);

console.log("result:", result);
console.log("arr1:", arr1);
console.log("arr2:", arr2);

//注意concat后面可以多个参数,如:
var result1 = arr1.concat(arr2, "I", "II");
console.log("result1:", result1);
结果.png
  • join
    将所有数组元素结合为一个字符串,元素是通过指定的分隔符进行分隔的,默认使用','号分割,不改变原数组
var arr1 = ['1', '2', '3'];
var arr2 = ['a', 'b', 'c'];

var result = arr1.concat(arr2);
var joinResultNoParams = result.join();
var joinResultParams = result.join('-');

console.log("joinResultNoParams:", joinResultNoParams);
console.log("joinResultParams:", joinResultParams);
结果.png
  • push
    在数组结尾处向数组添加一个新的元素,改变原数组,返回新数组的长度;
var arr = ['1', '2', '3'];
//push后可以添加多个参数,都会依次添加到数组后面
var result = arr.push('4');
console.log("arr:", arr);
console.log("result:", result);
结果.png
  • pop
    从数组中删除最后一个元素,改变原数组,返回“被删除”的元素;
var arr = ['1', '2', '3'];
var result = arr.pop();
console.log("arr:", arr);
console.log("result:", result);
结果.png
  • shift
    删除首个数组元素,并返回首个元素的值。改变原数组
var arr = ['1', '2', '3'];
var result = arr.shift();
console.log("arr:", arr);
console.log("result:", result);
结果.png
  • unshift
    向数组的开头添加一个或更多元素,并返回新的长度。改变原数组
var arr = ['1', '2', '3'];
var result = arr.unshift('10', '11');
console.log("arr:", arr);
console.log("result:", result);
结果.png
  • slice
    用数组的某个片段切出新数组,返回选定的元素(数组),不改变原数组
    参数说明
/**
 * start:要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推
 * end:紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置
 * 
 * */
array.slice(start,end)
var arr = ['1', '2', '3', '4', '5'];
var result = arr.slice(0, 3);
console.log("arr:", arr);
console.log("result:", result);
image.png
  • splice
    用于添加或删除数组中的元素。改变原数组
    参数说明
/**
 * index : 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
 * howmany: 可选。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
 * item1,.....,itemX: 可选。要添加到数组的新元素
 * 
 * return : 如果从 array 中删除了元素,则返回的是含有被删除的元素的数组。
 * */
 array.splice(index,howmany,item1,.....,itemX)
//1.删除元素  一个或者多个,如果第二个参数为0,那么等于没有删除
var arr = ['1', '2', '3', '4', '5'];
var result = arr.splice(0, 3);
console.log("删除元素  一个或者多个");
console.log("原来的数组:", arr);
console.log("返回的数组:", result);

//2.插入元素 
var otherArr = ['1', '2', '3', '4', '5'];
var otherResult = otherArr.splice(1, 2, '6', '7');
console.log("插入元素 ");
console.log("原来的数组:", otherArr);
console.log("返回的数组:", otherResult);

这里分别解释一下:

  1. 删除元素,删除元素只需要两个参数;
    arr.splice(0, 3);
    第一个参数代表要从什么地方开始删除;
    第二个参数代表,要删除的元素个数;

  2. 插入元素,插入元素至少需要三个参数;
    otherArr.splice(1, 2, '6', '7');
    第一个参数代表从什么地方开始插入;
    第二个参数代表删除几个元素;
    后面的参数代表将第三个开始的参数全部插入;

  • sort
    按照 Unicode code 位置排序,默认升序,改变原数组
var arr = [2, 3, 11, 5, 4];
arr.sort();
console.log("原来的数组:", arr);
结果.png

因为默认是通过Unicode code来进行排序,所以 11在2前面;

另外可以通过自己的条件来进行排序,在sort方法加入一个回到函数

var arr = [2, 3, 11, 5, 4];
arr.sort(function(a, b) {
    return a - b;
});
console.log("原来的数组:", arr)
结果.png

上面的结果是升序排序,如果你想要的是降序,那么

return b - a;

即可。
如果数组的是对象元素,那么根据自己的条件进行判断即可。
解释一下返回值:
如果 a-b 小于 0 ,那么 a 会被排列到 b 之前;
如果 a-b 等于 0 , 那么 a 和 b 的相对位置不变。
如果 a-b 大于 0 , 那么 b 会被排列到 a 之前。

  • reverse
    用于颠倒数组中元素的顺序。返回的是颠倒后的数组,改变原数组
var arr = [2, 3, 11, 5, 4];
arr.reverse();
console.log("原来的数组:", arr);
结果.png
  • indexOf和lastIndexOf
    都接受两个参数:查找的值、查找起始位置
    不存在,返回 -1 ;
    存在,返回位置。
    indexOf 是从前往后查找, lastIndexOf 是从后往前查找。
var arr = [2, 3, 11, 5, 4];
console.log(arr.indexOf(3));
console.log(arr.indexOf(10));
console.log(arr.lastIndexOf(5));
console.log(arr.lastIndexOf(10));
image.png
  • forEach
    数组的每个元素执行一次提供的函数。不会改变原数组
    返回值:undefined
    语法:
arr.forEach(callback[, thisArg]);

参数说明:

/*
callback
为数组中每个元素执行的函数,该函数接收三个参数:
    currentValue 数组中正在处理的当前元素。
    index可选,数组中正在处理的当前元素的索引。
    array可选,forEach() 方法正在操作的数组。
    thisArg可选,可选参数。当执行回调函数时用作 this 的值(参考对象)。
*/

注意:没有办法中止或者跳出 forEach() 循环,除了抛出一个异常。

var arr = [2, 3, 11, 5, 4];
arr.forEach(function(value, index, array) {
    console.log(value, index, array);
});
console.log("原来的数组:", arr);
结果.png
  • every
    对数组的每一项都运行给定的函数,每一项都返回 ture,则返回 true;返回一个布尔值,不改变原数组

参数与forEach一样。

var arr = [2, 3, 11, 5, 4];
var result = arr.every(function(value, index, array) {
    return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
  • some
    对数组的每一项都运行给定的函数,任意一项都返回 ture,则返回 true;返回一个布尔值,不改变原数组

参数与forEach一样。

var arr = [2, 3, 11, 5, 4];
var result = arr.some(function(value, index, array) {
    return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
  • filter
    对数组的每一项都运行给定的函数,返回 结果为 ture 的项组成的数组;返回一个过滤后的新数组,不改变原数组

参数与forEach一样。

var arr = [2, 3, 11, 5, 4];
var result = arr.filter(function(value, index, array) {
    return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
  • map
    对数组的每一项都运行给定的函数,返回每次函数调用的结果组成一个新数组;返回一个map后的新数组,不改变原数组

参数与forEach一样。

var arr = [2, 3, 11, 5, 4];
var result = arr.map(function(value, index, array) {
    return value * 2;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
image.png

ES6中新增的数组方法,后续学习到在补充。

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

推荐阅读更多精彩内容