最實用的JS數(shù)組函數(shù)整理

更新時間：2017年12月05日 10:56:35 投稿：laozhang

本篇文章小編給大家整理了非常全的JS數(shù)組函數(shù)以及相關(guān)的寫法規(guī)則，希望能夠?qū)ψx者們起到幫助和參考。

腳本之家以前就給大家整理過關(guān)于JS數(shù)組相關(guān)的內(nèi)容，這次我們給大家整理的是非常實用的JS數(shù)組操作技巧和寫法，學(xué)習(xí)下吧。

instanceof

檢測一個對象是否是數(shù)組;(用來對付復(fù)雜數(shù)據(jù)類型;)
// 簡單數(shù)據(jù)類型 typeof ;
A instanceof B // A是不是B造出來的;
例：
  var arr = [1,2,3];
  console.log(arr instanceof Array); //arr屬不屬于Array類型;

Array.isArray( )

Array.isArray(參數(shù)); // 判斷參數(shù)是不是數(shù)組,返回布爾值;
例：
  var arr = [1,2,3];
  var num = 123;
  console.log(Array.isArray(arr)); //true
  console.log(Array.isArray(num)); //false

toString( )

數(shù)組.toString(); // 把數(shù)組變成字符串,去除了[],內(nèi)容用逗號鏈接;
例：
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.toString());   //返回 aaa,bbb,ccc

valueOf( )

數(shù)組.valueOf(); //返回數(shù)組本身;  
例：
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.valueOf());   //返回數(shù)組本身 ["aaa","bbb","ccc"]

數(shù)組.join(參數(shù))

數(shù)組.join(參數(shù)); // 數(shù)組中的元素可以按照參數(shù)進行鏈接變成一個字符串;
console.log(arr.join()); //和toString()一樣用逗號鏈接
console.log(arr.join("|")); //用參數(shù)鏈接
console.log(arr.join("&")); //用參數(shù)鏈接
console.log(arr.join(" ")); //如果是空格，真的用空格鏈接
console.log(arr.join("")); //空字符是無縫連接

數(shù)組元素的添加和刪除

push( )和pop( )

1. 數(shù)組.push() //在數(shù)組的最末尾添加元素;
2. 數(shù)組.pop() //不需要參數(shù);在數(shù)組的最末尾刪除一項;
例：
  var arr = [1,2,3];
  var aaa = arr.push("abc");//在數(shù)組的最末尾添加一個元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是數(shù)組的長度;

  aaa = arr.pop();//不需要參數(shù);在數(shù)組的最末尾刪除一項;
  console.log(arr);//元素被修改了
  console.log(aaa);//被刪除的那一項

unshift( )和shift( )

1. 數(shù)組.unshift() //在數(shù)組的最前面添加一個元素;
2. 數(shù)組.shift() //不需要參數(shù);在數(shù)組的最前面刪除一項;
例：
  var arr = [1,2,3];
  aaa = arr.unshift("abc");//在數(shù)組的最前面添加一個元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是數(shù)組的長度;

  aaa = arr.shift();//不需要參數(shù);在數(shù)組的最前面刪除一項;
  console.log(arr);//元素被修改了
  console.log(aaa);//被刪除的那一項

數(shù)組元素排序

reverse( )

reverse()  //翻轉(zhuǎn)數(shù)組
例:
  var arr1 = [1,2,3,4,5];
  var aaa = arr1.reverse(); // [5,4,3,2,1]

sort( )

sort() // 數(shù)組中元素排序;(默認：從小到大)
   // 默認：按照首個字符的Unicode編碼排序;如果第一個相同那么就比較第二個...
例：    
  var arr = [4,5,1,3,2,7,6];
  var aaa =arr.sort();
  console.log(aaa);     // [1, 2, 3, 4, 5, 6, 7]
  console.log(aaa === arr);// true 原數(shù)組被排序了(冒泡排序)
  //默認還可以排列字母;
  var arr2 = ["c","e","d","a","b"];
  var bbb = arr2.sort();
  console.log(bbb);     // ["a", "b", "c", "d", "e"]
  console.log(bbb===arr2); // true 原數(shù)組被排序了(冒泡排序)

sort() //數(shù)值大小排序方法,需要借助回調(diào)函數(shù);
例：
   var arr = [4,5,1,13,2,7,6];
   //回調(diào)函數(shù)里面返回值如果是：參數(shù)1-參數(shù)2;升冪；  參數(shù)2-參數(shù)1;降冪；
   arr.sort(function (a,b) {
    return a-b; //升序
    //return b-a; //降序
    //return b.value-a.value; //按照元素value屬性的大小排序;
   });
   console.log(arr); // [1, 2, 4, 5, 6, 7, 13]

sort( )底層原理

  var aaa = bubbleSort([1,12,3], function (a,b) {
//    return a-b;//實參：array[j]-array[j+1]；
    return b-a;//實參：array[j+1]-array[j]；
  });
  console.log(aaa);

  function bubbleSort(array,fn){
    //外循環(huán)控制輪數(shù)，內(nèi)循環(huán)控制次數(shù)，都是元素個數(shù)-1;
    for(var i=0;i<array.length-1;i++){
      for(var j=0;j<array.length-1-i;j++){//次數(shù)優(yōu)化，多比較一輪，少比較一次;
        //滿足條件交換位置;
//        if(array[j]>array[j+1]){//大于升冪排序；否則降冪;
        //a-b>0 和 a>b是一個意思;
        //b-a>0 和 a<b是一個意思;
//        if(array[j]-array[j+1]>0){//升冪排序
//        if(array[j+1]-array[j]>0){//降冪排序
        //把兩個變量送到一個函數(shù)中;
        if(fn(array[j],array[j+1])>0){
          var temp = array[j];
          array[j] = array[j+1];
          array[j+1] = temp;
        }
      }
    }
    //返回數(shù)組
    return array;
  }

數(shù)組元素的操作

concat( )

數(shù)組1.concat(數(shù)組2); // 鏈接兩個數(shù)組;
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3)  //  [1, 2, 3, "a", "b", "c"]

slice( )

數(shù)組.slice(開始索引值，結(jié)束索引值);   //數(shù)組截取;
例 ：
   var arr = [1, 2, 3, "a", "b", "c"];
   console.log(arr.slice(3));      //從索引值為3截取到最后;["a", "b", "c"]
   console.log(arr.slice(0,3));      //包左不包右;[1, 2, 3]
   console.log(arr.slice(-2));      //負數(shù)是后幾個;["b", "c"]
   console.log(arr.slice(3,0));      //如果前面的比后面的大，那么就是[];[]
   console.log(arr);             //原數(shù)組不被修改;[1, 2, 3, "a", "b", "c"]

splice( )

數(shù)組.splice(開始索引值，刪除幾個，替換內(nèi)容1，替換內(nèi)容2，...); // 替換和刪除;
                           //改變原數(shù)組;返回值是被刪除/替換的內(nèi)容
例:
  var arr = [1,2,3,4,5,6,"a", "b", "c"]
  arr.splice(5);    //從索引值為3截取到最后;(刪除)
  console.log(arr);   // [1, 2, 3, 4, 5]
  arr.splice(1,2);  //(刪除指定個數(shù))從索引為1的開始刪除2個
  console.log(arr);  //[1, 4, 5]

//替換
  var arr = [1,2,3,4,5,6,"a", "b", "c"];
  console.log(arr.splice(3,3,"aaa","bbb","ccc"));  //(刪除指定數(shù)并替換)
  console.log(arr);   // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
//  添加
  arr.splice(3,0,"aaa","bbb","ccc");//(刪除指定個數(shù))
//
  console.log(arr);//截取或者替換之后的;  [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]

indexOf / lastIndexOf

數(shù)組.indexOf(元素);   // 給元素，查索引(從前往后)
數(shù)組.lastIndexOf(元素); // 給元素，查索引(從后往前)
例：
  var arr = ["a","b","c","d","c","b","b"];
  console.log(arr.indexOf("b"));    // 1 查到以后立刻返回
  console.log(arr.lastIndexOf("b"));  // 6 找到以后立刻返回
  console.log(arr.indexOf("xxx"));  // -1; 查不到就返回-1；

數(shù)組迭代(遍歷)

every()

對數(shù)組中每一項運行回調(diào)函數(shù)，如果都返回true，every返回true，
如果有一項返回false，則停止遍歷 every返回false；不寫默認返回false
像保鏢失誤一次，游戲結(jié)束?。。?
例：
1.  var arr = [111,222,333,444,555];
  arr.every(function (a,b,c) {
    console.log(a);  //元素
    console.log(b);  //索引值
    console.log(c);  //數(shù)組本身;
    console.log("-----");  //數(shù)組本身;
    //數(shù)組中元素賦值：c[b] = 值;   a=有時候無法賦值;
    return true;
  });

2. //every返回一個bool值，全部是true才是true；有一個是false，結(jié)果就是false
  var bool = arr.every(function (element, index, array) {
    //判斷：我們定義所有元素都大于200;
    //if(element > 100){
    if(element > 200){
      return true;
    }else{
      return false;
    }
  })
  alert(bool); //false

filter()

//  對數(shù)組中每一項運行回調(diào)函數(shù)，該函數(shù)返回結(jié)果是true的項組成的新數(shù)組
//   新數(shù)組是有老數(shù)組中的元素組成的，return為ture的項;
例：
  var arr = [111,222,333,444,555];
  var newArr = arr.filter(function (element, index, array) {
    //只要是奇數(shù)，就組成數(shù)組;(數(shù)組中辨別元素)
    if(element%2 === 0){
      return true;
    }else{
      return false;
    }
  })

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

forEach()

// 和for循環(huán)一樣；沒有返回值;
例：
  var arr = [111,222,333,444,555];
  var sum = 0;
  var aaa = arr.forEach(function (element,index,array) {
    console.log(element); // 輸出數(shù)組中的每一個元素
    console.log(index); // 數(shù)組元素對應(yīng)的索引值
    console.log(array); // 數(shù)組本身 [111, 222, 333, 444, 555]
    sum += element; //數(shù)組中元素求和;
  });
  console.log(sum); // 數(shù)組元素加起來的和
  console.log(aaa);//undefined；沒有返回值 所以返回undefined

map()

// 對數(shù)組中每一項運行回調(diào)函數(shù)，返回該函數(shù)的結(jié)果組成的新數(shù)組
//  return什么新數(shù)組中就有什么; 不return返回undefined; 對數(shù)組二次加工
例：
  var arr = [111,222,333,444,555];
  var newArr = arr.map(function (element, index, array) {
    if(index == 2){
      return element; // 這里return了 所以下面返回的值是333
    }
    return element*100; // 返回的元素值都乘上100后的值
  })
  console.log(newArr); // [11100, 22200, 333, 44400, 55500]

some()

//對數(shù)組中每一項運行回調(diào)函數(shù)，如果該函數(shù)對某一項返回true，則some返回true; 像殺手，有一個成功，就勝利了?。?！
例：
  var arr = [111,222,333,444,555];
  var bool = arr.some(function (ele,i,array) {
    //判斷：數(shù)組中有3的倍數(shù)
    if(ele%3 == 0){
      return true;
    }
    return false;
  })
  alert(bool); //true ; 有一個成功就是true

數(shù)組清空

  1. arr.length = 0; // (不好，偽數(shù)組無法清空)
  2. arr.splice(0); // 偽數(shù)組沒有這個方法;
  3. arr = [];   // 可以操作偽數(shù)組; (推薦!)

// 偽數(shù)組: 就是長的像數(shù)組，但是沒有數(shù)組的方法;也不能添加和刪除元素;
例： // arguments
    fn(111,222,333);
    function fn(){
      arguments.length = 0; // 無法清空 返回 [1, 2, 3]
      arguments.splice(0); // 會報錯 arguments.splice is not a function
      arguments = []; // 可以清空,返回空數(shù)組[] 
      console.log(arguments);
    }

數(shù)組案例

1.將一個字符串數(shù)組輸出為|分割的形式，比如“劉備|張飛|關(guān)羽”。使用兩種方式實現(xiàn)

    var arr = ["劉備","張飛","關(guān)羽"];
    var separator = "|";
    //通過for循環(huán)累加
    var str = arr[0];
    for(var i=1;i<arr.length;i++){
      str += separator+arr[i];
    }
    console.log(str); // 劉備|張飛|關(guān)羽
    //join()可以把數(shù)組中的元素鏈接成字符串;
    console.log(arr.join("|")); // 劉備|張飛|關(guān)羽

2.將一個字符串數(shù)組的元素的順序進行反轉(zhuǎn)。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實現(xiàn)。提示：第i個和第length-i-1個進行交換

 // 數(shù)組.reverse() 方法
      var arr = ["a", "b", "c", "d"];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
    
    // 三種：1.正向遍歷，反向添加; 2.反向遍歷，正向添加;  3.元數(shù)組元素交換位置;
      for(var i=0;i<arr.length/2;i++){
        var temp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = temp;
      }
      console.log(arr);

3.工資的數(shù)組[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除

  var arr = [1500, 1200, 2000, 2100, 1800];
  //利用filter()形成一個數(shù)組;return true;組成的數(shù)組;
  var newArr = arr.filter(function (ele, i, array) {
    //2000以上返回false;
    if(ele<2000){
      return true;
    }else{
      return false;
    }
  });
  console.log(newArr); // [1500, 1200, 1800]

4.["c", "a", "z", "a", "x", "a"]找到數(shù)組中每一個a出現(xiàn)的位置

  var arr = ["c", "a", "z", "a", "x", "a"];
  //遍歷數(shù)組(for/while/do...while)  forEach();
  arr.forEach(function (ele, index, array) {
    //如果元素等于“a”，那么就輸出索引值；
    if("a" === ele){
      console.log(index);
    }
  });

5.編寫一個方法去掉一個數(shù)組的重復(fù)元素 (數(shù)組去重)

    var arr = ["鳴人","鳴人","佐助","佐助","小櫻","小櫻"];
  // 方法1： 思路：定義一個新數(shù)組，遍歷老數(shù)組，判斷，如果新數(shù)組里面沒有老數(shù)組的元素就添加，否則就不添加；
    var newArr = [];
    //遍歷老數(shù)組
    arr.forEach(function (ele,index,array) {
      //檢測老數(shù)組中的元素，如果新數(shù)組中存在就不添加了，不存在才添加;
      if(newArr.indexOf(ele) === -1){//不存在就添加;（去新數(shù)組中查找元素索引值，如果為-1就是沒有）
        newArr.push(ele);
      }
    });
    console.log(newArr); // ["鳴人", "佐助", "小櫻"]

您可能感興趣的文章: