本文例項講述了JS陣列方法shift()、unshift()用法。分享給大家供大家參考，具體如下：

shift()方法

1. 定義：從陣列中刪除第一個元素，並返回該元素的值。此方法更改陣列的長度。
2. 語法： arr.shift()
3. 引數：/
4. 返回值：從陣列中刪除的元素(當陣列為空時返回undefined)。

程式碼如下：

方法一：

var arr1 = [1,2,3,4,'A','B','C']; 
var arr2 = [];
Array.prototype.copyShift = function() {
  var result = [],newArr = [];
  result = this[0];
  for(var i = 1; i < this.length; i++) {// 將陣列的第二個至最後一項的值賦值給newArr
    newArr[newArr.length] = this[i];
  }
  for(var i = 0; i < newArr.length; i++) { //newArr賦值給原陣列
    this[i] = newArr[i];
  }
  this.length = newArr.length;
  return result;
};
console.log(arr1.copyShift());  // 1
console.log(arr1); // [2,'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []

執行結果：

方法二：將上述程式碼修改為如下：（去掉中間陣列newArr，直接在原陣列上操作）

var arr1 = [1,'C']; 
var arr2 = [];
Array.prototype.copyShift = function() {
  var result = [];
  result = this[0];
/* 
  for(var i = 1; i < this.length; i++) {// 將陣列的第二個至最後一項的值賦值給newArr
    newArr[newArr.length] = this[i];
  }
  for(var i = 0; i < newArr.length; i++) { //newArr賦值給原陣列
    this[i] = newArr[i];
  }
  this.length = newArr.length;
 */
  // 將陣列的後一項賦值給前一項
  for(var i = 0; i < this.length; i++) {
    this[i] = this[i + 1];
  }
  if(this.length > 1) {//去掉陣列最後一項
    this.length = this.length - 1;
  }
  return result;
};
console.log(arr1.copyShift());  // 1
console.log(arr1); // [2,'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []

執行結果：

unshift()方法

1. 定義：將一個或多個元素新增到陣列的開頭，並返回新陣列的長度。
2. 語法：arr.unshift(element1,...,elementN)
3. 引數：陣列前端新增任意個項
4. 返回值：當一個物件呼叫該方法時，返回其 length 屬性值。

程式碼如下：

方法一：

var arr1 = [1,'C']; 
var arr2 = [1,4];
Array.prototype.copyUnshift = function() {
  var newArr = [],argLen = arguments.length,len = argLen + this.length;
  for(var i = 0; i < len; i++) {
/* 
    if(i < argLen) {
      newArr[i] = arguments[i];
    }
    else {
      newArr[i] = this[i - argLen];
    }
 */
    // 上述程式碼也可寫為：
    newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
  }
  for(var i = 0; i < len; i++) {
    this[i] = newArr[i];
  }
  return len;
};
console.log(arr1.copyUnshift('XXX','YYY','ZZZ'));  // 10
console.log(arr1); // ['XXX','ZZZ',1,'B']
console.log(arr2.copyUnshift()); // 4
console.log(arr2); // [1,4]

執行結果：

//同方法一一樣，只不過是for迴圈以遞減的形式
var arr1 = [1,len = argLen + this.length;
  //同方法一一樣，只不過是for迴圈以遞減的形式
  for(var i = len - 1; i >= 0; i--) {
/*     if(i < argLen) {
      newArr[i] = arguments[i];
    }
    else {
      newArr[i] = this[i - argLen];
    } */
    // 上述程式碼也可寫為：
    newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
  }
  for(var i = 0; i < len; i++) {
    this[i] = newArr[i];
  }
  return len;
};

接上遞減形式的for迴圈，進一步可修改為：

方法二： 直接修改原陣列，不借助中間陣列

var arr1 = [1,4];
Array.prototype.copyUnshift = function() {
  var argLen = arguments.length,len = argLen + this.length;
  for(var i = len - 1; i >= 0; i--) {
/*     if(i > argLen - 1) {
      this[i] = this[i - argLen];
    }
    else {
      this[i] = arguments[i];
    }
 */
    this[i] = (i > argLen - 1) ? this[i - argLen] : arguments[i]; 
  }
  return len;
};
console.log(arr1.copyUnshift('XXX',4]

執行結果：

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

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

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