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 相关文章推荐
jquery实用代码片段集合
Aug 12 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
用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 curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python线程的两种编程方式
2015/04/14 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
2013年高中生自我评价
2013/10/23 职场文书
求职信写作要突出重点
2014/01/01 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
社保委托书怎么写
2014/08/02 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
安全教育片观后感
2015/06/17 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书