JS数组方法shift()、unshift()用法实例分析

本文实例讲述了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, 3, 4, 'a', 'b']
console.log(arr2.copyshift()); // undefined
console.log(arr2); // []

运行结果：

方法二：将上述代码修改为如下：（去掉中间数组newarr，直接在原数组上操作）

var arr1 = [1, 2, 3, 4, 'a', 'b', '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, 3, 4, 'a', 'b']
console.log(arr2.copyshift()); // undefined
console.log(arr2); // []

运行结果：

unshift()方法

1. 定义：将一个或多个元素添加到数组的开头，并返回新数组的长度。
2. 语法：arr.unshift(element1, ..., elementn)
3. 参数：数组前端添加任意个项
4. 返回值：当一个对象调用该方法时，返回其 length 属性值。

代码如下：

方法一：

var arr1 = [1, 2, 3, 4, 'a', 'b', 'c']; 
var arr2 = [1, 2, 3, 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', 'yyy', 'zzz', 1, 2, 3, 4, 'a', 'b']
console.log(arr2.copyunshift()); // 4
console.log(arr2); // [1, 2, 3, 4]

运行结果：

//同方法一一样，只不过是for循环以递减的形式
var arr1 = [1, 2, 3, 4, 'a', 'b', 'c']; 
var arr2 = [1, 2, 3, 4];
array.prototype.copyunshift = function() {
  var newarr = [],
    arglen = arguments.length,
    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, 2, 3, 4, 'a', 'b', 'c']; 
var arr2 = [1, 2, 3, 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', 'yyy', 'zzz'));  // 10
console.log(arr1); // ['xxx', 'yyy', 'zzz', 1, 2, 3, 4, 'a', 'b']
console.log(arr2.copyunshift()); // 4
console.log(arr2); // [1, 2, 3, 4]

运行结果：

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。