arr.concat()、arr.slice()、arr.splice()

arr.concat()

arr.concat()語法與定義:

concat() 方法用於連接兩個或多個數組。
arrayObject.concat(arrayX,arrayX,......,arrayX)必需。arrayX該參數可以是具體的值,也可以是數組對象。可以是任意多個。
基於當前數組中的所有項創建一個新數組。簡單的說,concat()先給當前數組創建一個副本,然後將接收到的參數添加到這個副本(數組)的末尾,最後返回一個新的數組。

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
// 輸出:1,2,3,4,5

concat()還可以傳遞空值(也就是說沒有傳遞參數),此時它只是複製當前數組,並且返回一個副本。如下所示:

var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = arr.concat();
console.log(arr2); // [1, 2]

不難看出:concat()方法是在數組的副本上進行操作並返回新構建的數組,所以並不會影響到原來的數組。

concat() vs. push():

push()方法可以也可以給數組傳參數,同樣是在數組的末尾添加一個或多個值(數組)。那麼與concat()有什麼不同之處呢?別的先不多說,先來看一個示例:


// push()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push('c','d');
console.log(arr); // ["a", "b", "c", "d"]
 
// concat()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.concat('c','d');
console.log(arr); // ["a", "b"]
var arr2 = arr.concat('c','d');
console.log(arr2); // ["a", "b", "c", "d"]

push()concat()方法都可以將傳的參數添加到數組的後面,只不過push()是在原數組上操作(改變的是原數組),concat()不會改變原數組,創建原數組的副本,並且把傳的參數添加到新數組後面。

如果傳的是數組又將是一個什麼情形呢?

// push()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push(['c','d'],[1,2,3]);
console.log(arr); // ["a", "b", Array[2], Array[3]]
 
// concat()
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
var arr2 = arr.concat(['c','d'],[1,2,3]);
console.log(arr2); // ["a", "b", "c", "d", 1, 2, 3]

push()傳遞的參數是數組時,將整個數組傳給原數組末尾,如示例中得到的結果["a", "b", Array[2], Array[3]],而concat()傳遞的參數是數組時,將參數中數組的每一個數組項添加到原數組的末尾,如示例中得到的結果["a", "b", "c", "d", 1, 2, 3]

arr.slice()語法與定義:

slice()方法可以在原數組基礎上創建一個副本數組,而且對原數組也並不會有任何影響。
slice()接受一個或兩個參數,即要返回項的起始和結束位置。當只給slice()傳遞一個參數時,該方法返回從該參數指定位置開始到當前數組末尾的所有項。如下面示例:

// 測試數組函數,將輸出數組的length和第個key:value
var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};
 
var arr = [0,1,2,3,4,5,6];
test(arr);  // [0, 1, 2, 3, 4, 5, 6]
var arr2 = arr.slice(3);
test(arr); // [0, 1, 2, 3, 4, 5, 6]
test(arr2);// [3, 4, 5, 6]

slice()還可以傳兩個參數,該方法返回起始和結束位置之間的項,但不包括結束位置的項,如:

var arr = [0,1,2,3,4,5,6];
var arr2 = arr.slice(2,5);
console.log(arr2);  // [2, 3, 4]

slice()傳遞的參數還可以是負值。當參數中有一個負值時,則用數組長度加上該數來確定相應的位置。比如傳遞的值是-3,數組的length爲6,此時slice(-3)對應的就是slice(3)。或者可以從數組的末尾開始計算起,最末尾的是-1。來看看示例:

var arr = [0,1,2,3,4,5,6];
var arr2 = arr.slice(-3);
console.log(arr2);  // [4, 5, 6]

結束位置小於或等於開始位置,將返回一個空數組。

var arr = [0,1,2,3,4,5,6];
var arr2 = arr.slice(-3,4);
console.log(arr2);  // []

slice()方法和concat()方法類似,會在原數組上構建一個新數組,並不會影響原數組。

arr.splice()語法與定義

splice()方法在處理數組的各方法中恐怕是最強大的了,它有很多種用法:

  1. 刪除: 可以刪除任意數量的數組項
  2. 插入:可以向指定位置插入任意數量的數組項
  3. 替換: 可以向指定位置插入任意數量的數組項,且同時刪除任意數量的數組項

刪除

在splice()方法中指定兩個參數,第一個參數是指定開始刪除數組項位置,第二個數是指刪除數組項的個數。如下面這個示例:

var arr = [0,2,3,4,5,6];
var arr2 = arr.splice(2,3);
console.log(arr); // [0, 2, 6]
console.log(arr2);  // [3, 4, 5]
注意:splice()方法做刪除動作之後,將會影響原數組

插入

splice()方法指定三個參數,第一個參數爲插入的起始位置,第二個參數爲0(要刪除的數組項數量,因爲刪除數量是爲0,所以不做刪除),第三個參數是要插入的數組項。如果要插入多個項,可以再傳入第四、第五、以至任意多個項。如下面的示例:

var arr = [0,1,2,3,4,5,6];
console.log(arr);  // [0, 1, 2, 3, 4, 5, 6]
var arr2 = arr.splice(2,1,'a','b','c','d');
console.log(arr);  // [0, 1, "a", "b", "c", "d", 3, 4, 5, 6]
console.log(arr2); // [2]

替換

splice()方法做替換其實和做插入非常類似,只是將第二參數設置爲大於0(刪除數的數量)。如下例所示:

var arr = [0,1,2,3,4,5,6];
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]
var arr2 = arr.splice(-2,4,'a','b','c','d');
console.log(arr); // [0, 1, 2, 3, 4, "a", "b", "c", "d"]
console.log(arr2); // [5, 6]

總結

concat()slice()splice()concat()slice()方法都不會影響原數組,會在原數組上構建出一個新數組。其中concat()方法在原數組末尾添加所傳的數組項(簡單點看有類似於push()方法),構建一個新數組;slice()方法可以從指定的位置開始刪除指定的數組項,並且將刪除的數組項構建成一個新數組。splice()方法就更強大了,可以對一個數組做刪除、插入和替換。而且splice()方法還會影響原數組,並且將返回的值構建出一個新數組。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章