专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  Bun ... ·  昨天  
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性 ·  昨天  
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？ ·  2 天前  
程序员的那些事  ·  印度把 DeepSeek ... ·  3 天前  
OSC开源社区  ·  AI大模型如何影响基础软件行业中的开发工具与环境？ ·  5 天前  
51好读  ›  专栏  ›  SegmentFault思否

JS 中的数组操作

SegmentFault思否  · 公众号  · 程序员  · 2017-12-08 08:00

正文

什么是API

  • API：Application Programming Interface，应用程序编程接口

  • js中对象提供的方法就叫做API

instanceof

检测一个对象是否是数组，用来对付复杂数据类型（简单数据类型：typeof）：

A instanceof B // A是不是B造出来的;

例： 

  1.         var arr = [1,2,3];
  2.         console.log(arr instanceof Array); //arr属不属于Array类型;
Array.isArray( )

Array.isArray(参数); // 判断参数是不是数组,返回布尔值;

例： 

  1.         var arr = [1,2,3];
  2.         var num = 123;
  3.         console.log(Array.isArray(arr)); //true
  4.         console.log(Array.isArray(num)); //false
toString( )

数组.toString(); // 把数组变成字符串,去除了[],内容用逗号链接;

例： 

  1.         var arr = ["aaa","bbb","ccc"];
  2.         console.log(arr.toString());      //返回 aaa,bbb,ccc
valueOf( )

数组.valueOf(); //返回数组本身;

例： 

  1.         var arr = ["aaa","bbb"




    
,"ccc"];
  2.         console.log(arr.valueOf());      //返回数组本身  ["aaa","bbb","ccc"]
数组.join(参数)

数组.join(参数); // 数组中的元素可以按照参数进行链接变成一个字符串;

例： 

  1.     console.log(arr.join());    //和toString()一样用逗号链接
  2.     console.log(arr.join("|")); //用参数链接
  3.     console.log(arr.join("&")); //用参数链接
  4.     console.log(arr.join(" ")); //如果是空格，真的用空格链接
  5.     console.log(arr.join(""));  //空字符是无缝连接

数组元素的添加和删除

push( )和pop( )

  1. 数组.push() //在数组的最末尾添加元素;

  2. 数组.pop() //不需要参数;在数组的最末尾删除一项;

例： 

  1.         var arr = [1,2,3];
  2.         var aaa = arr.push("abc");//在数组的最末尾添加一个元素;
  3.         console.log(arr);//元素被修改了
  4.         console.log(aaa);//返回值是数组的长度;
  6.         aaa = arr.pop();//不需要参数;在数组的最末尾删除一项;
  7.         console.log(arr);//元素被修改了
  8.         console.log(aaa);//被删除的那一项
unshift( )和shift( )

  1. 数组.unshift() //在数组的最前面添加一个元素;

  2. 数组.shift() //不需要参数;在数组的最前面删除一项;

例： 

  1.         var arr = [1,2,3];
  2.         aaa = arr.unshift("abc");//在数组的最前面添加一个元素;
  3.         console.log(arr);//元素被修改了
  4.         console.log(aaa);//返回值是数组的长度;
  6.         aaa = arr.shift();//不需要参数;在数组的最前面删除一项;
  7.         console.log(arr);//元素被修改了
  8.         console.log(aaa);//被删除的那一项

数组元素排序

reverse( )

reverse() //翻转数组

例： 

  1.         var arr1 = [1,2,3,4,




    
5];
  2.         var aaa = arr1.reverse(); // [5,4,3,2,1]
sort( )

sort() // 数组中元素排序;(默认：从小到大) 默认：按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个...

例： 

  1.         var arr = [4,5,1,3,2,7,6];
  2.         var aaa =arr.sort();
  3.         console.log(aaa);          // [1, 2, 3, 4, 5, 6, 7]
  4.         console.log(aaa === arr);// true 原数组被排序了(冒泡排序)
  5.         //默认还可以排列字母;
  6.         var arr2 = ["c","e","d","a","b"];
  7.         var bbb = arr2.sort();




    

  8.         console.log(bbb);         // ["a", "b", "c", "d", "e"]
  9.         console.log(bbb===arr2); // true 原数组被排序了(冒泡排序)

sort() //数值大小排序方法,需要借助回调函数;

例： 

  1.           var arr = [4,5,1,13,2,7,6];
  2.           //回调函数里面返回值如果是：参数1-参数2;升幂；   参数2-参数1;降幂；
  3.           arr.sort(function (a,b) {
  4.             return a-b; //升序
  5.             //return b-a; //降序
  6.             //return b.value-a.value; //按照元素value属性的大小排序;
  7.           });
  8.           console.log(arr); // [1, 2, 4, 5, 6, 7, 13]
sort( )底层原理

例： 

  1.         var aaa = bubbleSort([1,12,3], function (a,b) {
  2.     //        return a-b;//实参：array[j]-array[j+1]；
  3.             return b-a;//实参：array[j+1]-array[j]；
  4.         });
  5.         console.log(aaa);
  7.         function bubbleSort(array,fn){
  8.             //外循环控制轮数，内循环控制次数，都是元素个数-1;
  9.             for(var i=0;i1;i++){
  10.                 for(var j=




    
0;j1-i;j++){//次数优化，多比较一轮，少比较一次;
  11.                     //满足条件交换位置;
  12.     //                if(array[j]>array[j+1]){//大于升幂排序；否则降幂;
  13.                     //a-b>0  和  a>b是一个意思;
  14.                     //b-a>0  和  a
  15.     //                if(array[j]-array[j+1]>0){//升幂排序
  16.     //                if(array[j+1]-array[j]>0){//降幂排序
  17.                     //把两个变量送到一个函数中;
  18.                     if(fn(array[j],array[j+1])>0){
  19.                         var temp = array[j];
  20.                         array[j] = array[j+1];
  21.                         array[j+




    
1] = temp;
  22.                     }
  23.                 }
  24.             }
  25.             //返回数组
  26.             return array;
  27.         }

数组元素的操作

concat( )

数组1.concat(数组2); // 链接两个数组;

例： 

  1.     var arr1 = [1,2,3];
  2.     




    
var arr2 = ["a","b","c"];
  3.     var arr3 = arr1.concat(arr2);
  4.     console.log(arr3)   //    [1, 2, 3, "a", "b", "c"]
slice( )

数组.slice(开始索引值，结束索引值); //数组截取;

例： 

  1.           var arr = [1, 2, 3, "a", "b", "c"];
  2.           console.log(arr.slice(3));            //从索引值为3截取到最后;["a", "b", "c"]
  3.           console.log(arr.slice(0,3));            //包左不包右;[1, 2, 3]
  4.           console.log(arr.slice(-2));            //负数是后几个;["b", "c"]




    

  5.           console.log(arr.slice(3,0));            //如果前面的比后面的大，那么就是[];[]
  6.           console.log(arr);                       //原数组不被修改;[1, 2, 3, "a", "b", "c"]
splice( )

数组.splice(开始索引值，删除几个，替换内容1，替换内容2，...); // 替换和删除; 改变原数组;返回值是被删除/替换的内容

例： 

  1.         var arr = [1,2,3,4,5,6,"a", "b", "c"]
  2.         arr.splice(5);        //从索引值为3截取到最后;(删除)
  3.         console.log(arr);     // [1, 2, 3, 4, 5]
  4.         arr.splice(1,2);    //(删除指定个数)从索引为1的开始删除2个
  5.         console.log(arr);   




    
//[1, 4, 5]
  7.     //替换
  8.         var arr = [1,2,3,4,5,6,"a", "b", "c"];
  9.         console.log(arr.splice(3,3,"aaa","bbb","ccc"));    //(删除指定数并替换)
  10.         console.log(arr);     // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
  11.     //    添加
  12.         arr.splice(3,0,




    
"aaa","bbb","ccc");//(删除指定个数)
  13.     //
  14.         console.log(arr);//截取或者替换之后的;   [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]
indexOf / lastIndexOf

数组.indexOf(元素); // 给元素，查索引(从前往后) 数组.lastIndexOf(元素); // 给元素，查索引(从后往前)

例： 

  1.         var arr = ["a","b","c","d","c","b","b"];
  2.         console.log(arr.indexOf("b"));      // 1 查到以后立刻返回
  3.         console.log(arr.lastIndexOf("b"));  // 6 找到以后立刻返回
  4.         console.log(arr.indexOf(




    
"xxx"));    // -1;  查不到就返回-1；

数组迭代(遍历)

every()

对数组中每一项运行回调函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；不写默认返回false。像保镖失误一次，游戏结束！！！

例： 1、 

  1.         var arr = [111,222,333,444,555];
  2.         arr.every(function (a,b,c) {
  3.             console.log(a);    //元素
  4.             console.log(b);    //索引值
  5.             console.log(c);    




    
//数组本身;
  6.             console.log("-----");    //数组本身;
  7.             //数组中元素赋值：c[b] = 值;      a=有时候无法赋值;
  8.             return true;
  9.         });

2、every返回一个bool值，全部是true才是true；有一个是false，结果就是false 

  1.         var bool = arr.every(function (element, index, array) {
  2.             //判断：我们定义所有元素都大于200;
  3.             //if(element > 100){
  4.             if(element > 




    
200){
  5.                 return true;
  6.             }else{
  7.                 return false;
  8.             }
  9.         })
  10.         alert(bool); //false
filter()

对数组中每一项运行回调函数，该函数返回结果是true的项组成的新数组 新数组是有老数组中的元素组成的，return为ture的项;

例： 

  1.         




    
var arr = [111,222,333,444,555];
  2.         var newArr = arr.filter(function (element, index, array) {
  3.             //只要是奇数，就组成数组;(数组中辨别元素)
  4.             if(element%2 === 0){
  5.                 return true;
  6.             }else{
  7.                 return false;
  8.             }
  9.         })




    

  11.         console.log(newArr); // [222, 444]
forEach()

和for循环一样；没有返回值;

例： 

  1.         var arr = [111,222,333,444,555];
  2.         var sum = 0;
  3.         var aaa = arr.forEach(function




    
 (element,index,array) {
  4.             console.log(element); // 输出数组中的每一个元素
  5.             console.log(index); // 数组元素对应的索引值
  6.             console.log(array); // 数组本身 [111, 222, 333, 444, 555]
  7.             sum += element; //数组中元素求和;
  8.         });
  9.         console.log(sum); // 数组元素加起来的和
  10.         console.log(aaa);//undefined；没有返回值 所以返回undefined
map()

对数组中每一项运行回调函数，返回该函数的结果组成的新数组。 return什么新数组中就有什么，不return返回undefined，对数组二次加工。

例： 

  1.         var arr = [111,222,333,444,555];
  2.         var newArr = arr.map(function (element, index, array) {
  3.             if(index == 2){
  4.                 return element; // 这里return了 所以下面返回的值是333
  5.             }
  6.             return element*100; // 返回的元素值都乘上100后的值
  7.         })




    

  8.         console.log(newArr); // [11100, 22200, 333, 44400, 55500]
some()

对数组中每一项运行回调函数，如果该函数对某一项返回true，则some返回true; 像杀手，有一个成功，就胜利了！！！

例： 

  1.         var arr = [111,222,333,444,555];
  2.         var bool = arr.some(function (ele,i,array) {
  3.             //判断：数组中有3的倍数
  4.             if(ele%3 == 0){
  5.                 return true;
  6.             }
  7.             return false;
  8.         })






请到「今天看啥」查看全文


推荐文章
OSC开源社区  ·  Bun 1.2.3带来全新Glob实现——引领性能突破
昨天
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性
昨天
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？
2 天前
程序员的那些事  ·  印度把 DeepSeek 告上法庭！三哥的“既要又要”病又犯了？
3 天前
OSC开源社区  ·  AI大模型如何影响基础软件行业中的开发工具与环境？
5 天前
王利芬  ·  为什么说绝大多数人都是“低品质勤奋者”？
8 年前
养花大全  ·  大全 | 130种常见家庭植物图谱，你养过多少种？
8 年前
36氪  ·  一个耍酷，一个爱美，Snap和美图的市值为何相差高达5倍？
7 年前
杂学杂问  ·  【戳心视频】论茶叶蛋在台湾的重要性！
7 年前
游戏葡萄  ·  从《阴阳师》中的觉醒材料说起：游戏资源过剩应该怎么办？
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!