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 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
用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
php最简单的删除目录与文件实现方法
2014/11/28 PHP
搞定immutable.js详细说明
2016/05/02 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Django 路由控制的实现代码
2018/11/08 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python下简易的单例模式详解
2019/04/08 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python Pandas 箱线图的实现
2019/07/23 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python实现自动整理文件的脚本
2020/12/17 Python
python中remove函数的踩坑记录
2021/01/04 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
会计自我鉴定
2013/11/02 职场文书
大学校运会广播稿
2014/02/03 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
个人职业及收入证明
2014/10/13 职场文书
质量保证书
2015/01/17 职场文书
商务司机岗位职责
2015/04/10 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
nginx之内存池的实现
2022/06/28 Servers