1. 程式人生 > 程式設計 >JS陣列方法concat()用法例項分析

JS陣列方法concat()用法例項分析

本文例項講述了JS陣列方法concat()用法。分享給大家供大家參考,具體如下:

陣列方法concat()

  1. concat()可以基於當前陣列中的所有項建立一個新陣列。即這個方法會先建立當前陣列一個副本,然後將接收到的引數新增到這個副本的末尾,最後返回新構建的陣列。
    沒有給concat方法傳遞引數的情況下,它只是複製當前陣列並返回副本。
    如果傳遞的是一或多個數組,則該方法會將這些陣列中的每一項都新增到結果陣列中
    如果傳遞的值是不是陣列,這些值會被簡單的新增到陣列的末尾
    注意:該方法不會改變先後的陣列,而僅僅會返回被連線陣列的一個副本。

  2. 定義和用法:concat() 方法用於連線兩個或多個數組。

  3. 語法:arrayObject.concat(arrayX,arrayX,……,arrayX)
  4. 引數:arrayX 必需。該引數可以是具體的值,也可以是陣列物件。可以是任意多個。
  5. 返回值:返回一個新的陣列。該陣列是通過把所有 arrayX 引數新增到 arrayObject 中生成的。如果要進行 concat() 操作的引數是陣列,那麼新增的是陣列中的元素,而不是陣列。

方法一:

function connectArray() {
  var result = [];
  var len = 0;
  //獲取所有陣列的總長度
  for(var i = 0; i < arguments.length; i++) {
    len += arguments[i].length;
  }
  for(var i = 0; i < len; i++) {
    if(i < arguments[0].length) {
      result[result.length] = arguments[0][i];
    }
    else if( i < arguments[1].length + arguments[0].length) {
      result[result.length] = arguments[1][i - arguments[0].length];
    }
    else if(i < arguments[2].length + arguments[1].length + arguments[0].length)
    result[result.length] = arguments[1][i - arguments[0].length- arguments[1].length];
  }
  return result;
}
var arr1 = [1,2,3,4,5,6];
var arr2 = ['A','B','C'];
var arr3 = ['AAA','BBB','CCC'];
var arr4 = ['Hello','World'];
// 連線陣列
console.log(connectArray(arr1));
console.log(connectArray(arr1,arr2)); // [1,6,"A","B","C"]
console.log(connectArray(arr1,arr2,arr3)); // [1,"C","C"]

執行結果:

方法二:

var arr1 = [1,'World'];
// 以下未考慮複雜情況,僅供參考:
Array.prototype.copyConcat =function() {
  var result = [],len = this.length,argLen = arguments.length;
  // result = this;  //這樣將this的值直接賦值給result不行,因為是將this的引用賦值給result
  //將this的值複製給result
  for(var i = 0; i < this.length; i++) {
    result[result.length] = this[i];
  }
  // 不傳遞引數
  if(arguments.length == 0) {
    return result;
  }
  // 有引數的時候
  for(var i = 0; i < argLen; i++) {
    if(Array.isArray(arguments[i])) {// 引數是陣列項的時候
      for(var j = 0; j < arguments[i].length; j++) {
        result[result.length] = arguments[i][j];
      }
    }
    else { //引數不是陣列項的時候
      result[result.length] = arguments[i];
    }
  }
  return result;
};
// 不傳遞引數
var resultArr1 = arr1.copyConcat(); // [1,6]
console.log(resultArr1);
// 傳遞引數但不是陣列
console.log(arr1.copyConcat('xxx','yyy','zzz'));// [1,"xxx","yyy","zzz"]
// 傳遞引數,引數是陣列
console.log(arr1.copyConcat(arr2)); // [1,"C"]
console.log(arr1.copyConcat(arr2,arr3,arr4));// [1,"AAA","BBB","CCC","Hello","World"]
// 傳遞的引數:字串、數字和陣列
console.log(arr1.copyConcat('引數','999',arr3));// [1,"引數","999","CCC"]
console.log(arr1); // 1,6

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《JavaScript陣列操作技巧總結》、《JavaScript遍歷演算法與技巧總結》、《javascript面向物件入門教程》、《JavaScript數學運算用法總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。