前端Js常见的数组函数集合

前端Js常见的数组函数集合

1、instanceof() : 检测一个对象是否是数组(用来对付复杂数据类型)

var arr = [1,2,3];

console.log(arr instanceof Array);  // 返回值为: ture  arr属不属于Array(数组)类型   

2、valueOf(): 返回数组本身

var arr = ["aaa","bbb","ccc"];

console.log(arr.valueOf());  // 返回值为: ["aaa","bbb","ccc"]

3、把数组变成字符串

(1).toString() 

var arr = ["aaa","bbb","ccc"];

console.log(arr.toString());  // 返回值为: aaa,bbb,ccc

(2).join()    把数组中的所有元素放入一个字符串

var arr = ["aaa","bbb","ccc"];

var array = arr.join('');  // ' ' 中加间隔符  为空默认不加

console.log(array);  //返回值为:aaabbbccc

4-1、push(): 在数组的最末尾添加元素

var arr = [1,2,3];

var aaa = arr.push("abc"); //在数组的最末尾添加一个元素

console.log(arr); // 返回值为: [1,2,3,abc]

console.log(aaa); // 返回值为: 4  返回值是数组的长度

4-2、pop(): 在数组的最末尾删除一项(不需要参数)

var arr = [1,2,3];

var aaa = arr.pop(); // 在数组的最末尾删除一个元素

console.log(arr); // 返回值为: [1,2]

console.log(aaa); // 返回值为: 3  返回值是被删除的那一项

5-1、unshift(): 在数组的最前面添加一个元素

var arr = [1,2,3];

var aaa = arr.unshift("abc"); //在数组的最前面添加一个元素

console.log(arr); // 返回值为: [abc,1,2,3] 

console.log(aaa); // 返回值为: 4  返回值是数组的长度

5-2、shift(): 在数组的最前面删除一项(不需要参数)

var arr = [1,2,3];

var aaa = arr.shift(); // 在数组的最前面删除一个元素

console.log(arr); // 返回值为: [2,3]

console.log(aaa); // 返回值为: 1  返回值是被删除的那一项

6、reverse(): 数组反向输出

var arr1 = [1,2,3,4,5];

var aaa = arr1.reverse(); // 返回值为: [5,4,3,2,1]

7、sort(): 数组排序 (默认顺序:按照首个字符的Unicode编码排序,从小到大)

(1).默认排序

var arr1 = [4,5,1,3,2,7,6];

var aaa =arr1.sort();

console.log(aaa);  // 返回值为: [1, 2, 3, 4, 5, 6, 7]

(2).自定义排序

var arr2 = [4,5,1,13,2,7,6];

//回调函数里面返回值如果是: 参数1-参数2:升幂;  参数2-参数1:降幂

arr.sort(function (a,b) {

return a-b; // 升序

    // return b-a; // 降序

});

console.log(arr2); // a-b返回值为:[1, 2, 4, 5, 6, 7, 13]  b-a返回值为:

8、concat() 拼接数组

var arr1 = [1,2,3];

var arr2 = ["a","b","c"];

var arr3 = arr1.concat(arr2);

console.log(arr3)  // 返回值为: [1, 2, 3, "a", "b", "c"]

9、slice() 数组截取  形式:slice(开始位置的数组下标 ,结束位置的数组下标)

var arr = [1, 2, 3, "a", "b", "c"];

console.log(arr.slice(3));  // 返回值为: ["a", "b", "c"]  从下标为3(包括第3个)的开始截取到最后

console.log(arr.slice(0,3)); // 返回值为:[1, 2, 3]  从下标为0(包括第0个)的开始截取3个

console.log(arr.slice(-2)); // 返回值为: ["b", "c"]  负数是从最后往前截取 -2就是截取到倒数第二个

console.log(arr.slice(3,0)); // 返回值为: [ ]  如果前面的比后面的大,那么就是[ ];

10、splice() 数组的替换和删除  形式:splice(开始下标值,删除个数,替换内容1,替换内容2,...)

(1).删除

var arr = [1,2,3,4,5,6,"a", "b", "c"]

arr.splice(5);  // 从下标值为5(包括第5个)的开始删除到最后

console.log(arr); // 返回值为: [1, 2, 3, 4, 5]

console.log(arr);  // 返回值为:[1,4,5,6,"a", "b", "c"]

(2).替换

var arr = [1,2,3,4,5,6,"a", "b", "c"];

console.log(arr.splice(3,3,"aaa","bbb","ccc"));  //从下标值为3(包括第3个)的开始删除3个并且替换掉删除的

console.log(arr);  // 返回值为:[1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]

11、indexOf() / lastIndexOf()  查元素在数组中的下标值

var arr = ["a","b","c","d"];arr.splice(1,2);  // 从下标值为1(包括第1个)的开始删除2个(删除指定位置指定个数)

console.log(arr.indexOf("b")); //返回值为:1  (从前往后查询)查到以后立刻返回

console.log(arr.lastIndexOf("d")); //返回值为:6  (从后往前查询)查到以后立刻返回

console.log(arr.indexOf("xxx")); // 返回值为:-1  查不到就返回-1

12、filter()  数组过滤函数

var arr = [111,222,333,444,555];

var newArr = arr.filter( function (element, index, array) {

    //筛选能被2整除的元素  组成新数组

    if( element%2 === 0 ){

      return true;

    }else{

      return false;

    }

})

console.log( newArr ); // 返回值为:[222, 444]

13、forEach()  数组循环(和for循环一样;没有返回值;)

var arr = [111,222,333,444,555];

var sum = 0;

var aaa = arr.forEach(function (element,index,array) {

    console.log(element); // 返回值为:输出数组中的每一个元素

    console.log(index); // 返回值为:数组元素对应的索引值

    console.log(array); // 返回值为:[111, 222, 333, 444, 555]

    sum += element; // 数组中元素求和;

});

console.log(sum); // 返回值为:1665 数组元素加起来的和

console.log(aaa); // 返回值为:undefined  因为没有返回值 所以返回undefined

14、map()  对数组中每一项运行回调函数,返回该函数的结果组成的新数组(return什么新数组中就有什么; 不return返回undefined; 对数组二次加工)

var arr = [111,222,333,444,555];

var newArr = arr.map(function (element, index, array) {

    if(index == 2){

      return element; // 这里return了 所以下面返回的值是333

    }

    console.log(newArr); // 返回值为: [undefined, undefined, 333, undefined, undefined]

    return element*100; // 返回的元素值都乘上100后的值

})

console.log(newArr); // 返回值为:[11100, 22200, 333, 44400, 55500]

15、some()  对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true

var arr = [111,222,333,444,555];

var bool = arr.some(function (ele,i,array) {

    //判断数组中是否有3的倍数(只要有一个是就返回true)

    if(ele%3 == 0){

      return true;

    }

    return false;

})

console.log(bool); //返回值为:true ; 有一个成功就是true


如有补充欢迎留言!

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

推荐阅读更多精彩内容