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 相关文章推荐
JS编程小常识很有用
Nov 26 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
vue实现选中效果
Oct 07 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
php一个解析字符串排列数组的方法
2015/05/12 PHP
php常用表单验证类用法实例
2015/06/18 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
js实现移动端轮播图
2020/12/21 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
python简单猜数游戏实例
2015/07/09 Python
python处理html转义字符的方法详解
2016/07/01 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
Java面试笔试题大全
2016/11/23 面试题
《雷雨》教学反思
2014/02/20 职场文书
优秀护士演讲稿
2014/04/30 职场文书
公司会议策划方案
2014/05/17 职场文书
主题党日活动总结
2014/07/08 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
muduo TcpServer模块源码分析
2022/04/26 Redis
处理canvas绘制图片模糊问题
2022/05/11 Javascript