JS针对Array的各种操作汇总

网络编程 2024/11/16 佚名

3 1 2

Array应该是我们在平时写js代码中，使用频率最高的，在平时的项目中，很多数据都是可以通过Array来存储、操作等任务。除了Object之外，Array类型应该是js中最常用的类型了。

今天总结一下Array的一些简单和基本的操作，也来巩固下自己的基础知识。

一、如何创建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）添加元素（数组末尾添加元素）

在数组 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; 
}

5、移除数组中的元素
移除数组 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; 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,Array

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JS针对Array的各种操作汇总”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JS针对Array的各种操作汇总

如何使用headjs来管理和异步加载js

用headjs来管理和加载js 提高网站加载速度

评论“JS针对Array的各种操作汇总”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JS针对Array的各种操作汇总

如何使用headjs来管理和异步加载js

用headjs来管理和加载js 提高网站加载速度

评论“JS针对Array的各种操作汇总”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存