JS针对Array的各种操作汇总


Posted in Javascript onNovember 29, 2016

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; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Global对象
Aug 13 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 #Javascript
巧用数组制作图片切换js代码
Nov 29 #Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 #Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python中的super用法详解
2015/05/28 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
关于迟到的检讨书
2014/01/26 职场文书
电气个人求职信范文
2014/02/04 职场文书
个人近期表现材料
2014/02/11 职场文书
部队2015年终工作总结
2015/04/02 职场文书
大学体育课感想
2015/08/10 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python