JS针对Array的各种操作汇总

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的各种操作汇总 的全部内容, 来源链接: utcz.com/z/353237.html

回到顶部