JS数组操作详解：创建、栈队列方法、类型检测及增删改示例

JavaScript数组操作概述

在JavaScript开发中，Array是使用频率极高的数据结构，绝大多数数据存储与处理任务都依赖它完成。除Object外，Array是JS中最基础且常用的类型之一。

本文旨在总结Array的基础与进阶操作，帮助开发者巩固核心知识体系。

数组的创建方式

一、数组的创建方式

创建数组主要包含两种途径：一是利用数组构造函数，二是采用数组字面量语法。

1、利用数组构造函数

示例代码为：var arr = new Array();

若已知数组预期长度，可直接向构造函数传入该数值作为参数。

例如：var arr = new Array(20);

若已知数组需包含的具体元素，可在构造时直接传入这些项。

例如：var arr = new Array(1,2,3);

2、利用数组字面量表示法

例如：var arr = [1,2,3,4];

或者创建空数组：var arr2 = [];

数组的核心操作方法

二、数组的核心操作方法

1、栈方法与队列方法

1）栈操作遵循先进后出原则：从数组尾部添加数据，并从尾部取出数据。

push()：用于在数组末尾添加一个或多个数据项，支持自定义参数个数；

pop()：用于获取并移除数组最后一个数据项，无需传递参数；

具体实现见下方代码示例。


var colors = new Array();//创建数组 
var count = colors.push("red","green");//推入两项 
console.log(count); 
 
var color = ["red","black"]; 
color.push("brown");//推入另一项 
color[3]="yellow"; //添加一项 
console.log(color); 
console.log(color.push("blue")); 
console.log(color.pop());//取得最后一项

2）队列操作遵循先进先出原则：通过在数组头部插入和取出数据来模拟实现。

push()：用于向数组末端添加数据项；

shift()：用于获取并移除数组第一个数据项；

unshift()：与shift相反，用于向数组头部插入数据项；


var colorArr = new Array();//创建数组 
colorArr.push("red","yellow");//推入两项 
console.log(colorArr); 
var length = colorArr.push("blue"); 
console.log(length); 
 
var item = colorArr.shift();//取得第一项 
console.log(item); 
console.log(colorArr.length);

数组类型检测

2、数组类型检测

在实际项目开发中，常需判断传入参数是否为数组对象。主要有两种检测方式：

1）第一种方法

if(value instanseof Array){

}

2）第二种方法

if(Array.isArray(value)){

//该方法仅适用于高版本浏览器：IE9+、Firefox4+/Chrome

数组增删改合并实战示例

3、具体的编程实例 1）添加元素（数组末尾添加元素）

1）在数组末尾添加元素要求：在数组 arr 末尾添加元素 item。不得直接修改原数组 arr，需返回新数组。

方法一：结合 slice() 和 push()


 function append(arr, item) { 
  var newArr = arr.slice(0); // slice(start, end)浅拷贝数组 
  newArr.push(item); 
  return newArr; 
};

方法二：通过普通迭代进行拷贝


 function append(arr, item) { 
  var length = arr.length, 
    newArr = []; 
  
  for (var i = 0; i < length; i++) { 
    newArr.push(arr[i]); 
  } 
  
  newArr.push(item); 
  
  return newArr; 
};

方法三：使用 concat()


function append(arr, item) { 
  return arr.concat(item); 
}

2）在数组任意位置添加元素要求：在数组 arr 的 index 处添加元素 item。不得直接修改原数组 arr，需返回新数组。

方法一：通过普通迭代进行拷贝


function insert(arr, item, index) { 
  var newArr=[]; 
  for(var i=0;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  newArr.splice(index,0,item); 
  return newArr; 
}

方法二：结合 slice() 和 splice()


function insert(arr, item, index) { 
  var newArr=arr.slice(0); 
  newArr.splice(index,0,item); 
  return newArr; 
}

方法三：结合 concat() 和 splice()


function insert(arr, item, index) { 
  var newArr=arr.concat(); 
  newArr.splice(index,0,item); 
  return newArr; 
}

3）删除数组最后一个元素要求：删除数组 arr 最后一个元素。不得直接修改原数组 arr，需返回新数组。

方法一：通过普通迭代进行拷贝


function truncate(arr, item) { 
  var newArr=[]; 
  for(var i=0;i<arr.length-1;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

方法二：结合 concat() 和 pop()


function truncate(arr) { 
  var newArr = arr.concat(); 
  newArr.pop(); 
  return newArr; 
}

4）删除数组第一个元素要求：删除数组 arr 第一个元素。不得直接修改原数组 arr，需返回新数组。

方法一：通过普通迭代进行拷贝


function curtail(arr) { 
  var newArr=[]; 
  for(var i=1;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

方法二：结合 concat() 和 shift()


function curtail(arr) { 
  var newArr = arr.concat(); 
  newArr.shift(); 
  return newArr; 
}

方法三：使用 slice()


function curtail(arr) { 
  return arr.slice(1); 
}

5）合并数组要求：合并数组 arr1 和数组 arr2。不得直接修改原数组 arr，需返回新数组。

方法一：通过普通迭代进行拷贝


function concat(arr1, arr2) { 
  var newArr=[]; 
  for(var i=0;i<arr1.length;i++){ 
    newArr.push(arr1[i]); 
  } 
  for(var j=0;j<arr2.length;j++){ 
    newArr.push(arr2[j]); 
  } 
  return newArr; 
}

方法二：使用 concat() 方法


function concat(arr1, arr2) { 
  return arr1.concat(arr2); 
}

方法三：结合 slice() 和 push()


function concat(arr1, arr2) { 
  var newArr=arr1.slice(0); 
  for(var i=0;i<arr2.length;i++){ 
    newArr.push(arr2[i]); 
  } 
  return newArr; 
}

6）移除数组中的指定元素要求：移除数组 arr 中所有与 item 相等的元素。不得直接修改原数组 arr，需返回新数组。

方法一：使用 splice() 方法


function remove(arr, item) { 
      var newArr = arr.slice(0); 
      for(var i=0; i<newArr.length; i++) { 
        if(newArr[i] == item) { 
          newArr.splice(i, 1); 
        } 
      } 
      return newArr; 
    } 
    var arr = [1,2,3,4,2]; 
    var item = 2; 
    console.log(remove(arr, item)); 
    console.log(arr);

方法二：结合 push() 方法


function remove(arr,item){ 
  var newarr = []; 
  for(var i=0;i<arr.length;i++){ 
    if(arr[i] != item){ 
      newarr.push(arr[i]); 
    } 
  } 
  return newarr; 
}

以上为本文全部内容，希望对各位的学习有所帮助，欢迎继续支持本站。

JavaScript数组操作全指南：创建、检测与常见增删改示例

JavaScript数组操作概述

数组的创建方式

数组的核心操作方法

数组类型检测

数组增删改合并实战示例

实用工具推荐