UDN-企业互联网技术人气社区

板块导航

浏览  : 439
回复  : 2

[原生js] JS针对Array的各种操作汇总

[复制链接]
刘莉莉11的头像 楼主
发表于 2017-1-3 12:12:00 | 显示全部楼层 |阅读模式
  这篇文章主要为大家详细介绍了JS针对Array的各种操作,如何创建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();---该方法就是获取数组的最尾部的一个数据项,该函数无需传递任何参数;
  
  如:
  1. var colors = new Array();//创建数组
  2. var count = colors.push("red","green");//推入两项
  3. console.log(count);

  4. var color = ["red","black"];
  5. color.push("brown");//推入另一项
  6. color[3]="yellow"; //添加一项
  7. console.log(color);
  8. console.log(color.push("blue"));
  9. console.log(color.pop());//取得最后一项
复制代码

  2)队列操作的方式:先进先出原则---通过从数组的头部插入数据和获取数据项来模拟实现
  
  push();--向数组末端添加数据项;
  
  shift();---获取数组的头部一项的数据信息;
  
  unshift();--与shift完全相反,就是向数组的头部插入数据项信息;
  1. var colorArr = new Array();//创建数组
  2. colorArr.push("red","yellow");//推入两项
  3. console.log(colorArr);
  4. var length = colorArr.push("blue");
  5. console.log(length);

  6. var item = colorArr.shift();//取得第一项
  7. console.log(item);
  8. console.log(colorArr.length);
复制代码

  2、检测验证数组
  
  在平时项目开发中,我们往往会遇到,判断一个对象是否为数组(函数的参数传递中),那么如果判断一个对象是否为数组呢,有以下两种方式
  
  1)第一种方法
  1.   if(value instanseof Array){

  2.    }
复制代码

  2)第二种方法
  1.   if(Array.isArray(value)){

  2.    }//该方法只使用与高版本的浏览器:IE9+、Firefox4+/Chrome
复制代码

  3、具体的编程实例
  
  1)添加元素(数组末尾添加元素)
  
  在数组 arr 末尾添加元素 item。不要直接修改数组 arr,结果返回新的数组 .
  
  方法一:slice()和push()结合
  1. function append(arr, item) {
  2.   var newArr = arr.slice(0); // slice(start, end)浅拷贝数组
  3.   newArr.push(item);
  4.   return newArr;
  5. };
复制代码

  方法二:普通的迭代拷贝
  1. function append(arr, item) {
  2.   var length = arr.length,
  3.     newArr = [];
  4.   
  5.   for (var i = 0; i < length; i++) {
  6.     newArr.push(arr[i]);
  7.   }
  8.   
  9.   newArr.push(item);
  10.   
  11.   return newArr;
  12. };
复制代码

  方法三:使用concat
  1. function append(arr, item) {
  2.   return arr.concat(item);
  3. }
复制代码

  2)添加元素(添加任意位置的元素)
  
  在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组。
  
  方法一:使用普通的迭代拷贝
  1. function insert(arr, item, index) {
  2.   var newArr=[];
  3.   for(var i=0;i<arr.length;i++){
  4.     newArr.push(arr[i]);
  5.   }
  6.   newArr.splice(index,0,item);
  7.   return newArr;
  8. }
复制代码

  方法二:slice()和splice()结合
  1. function insert(arr, item, index) {
  2.   var newArr=arr.slice(0);
  3.   newArr.splice(index,0,item);
  4.   return newArr;
  5. }
复制代码

  方法三:concat()和splice()结合
  1. function insert(arr, item, index) {
  2.   var newArr=arr.concat();
  3.   newArr.splice(index,0,item);
  4.   return newArr;
  5. }
复制代码

  3、删除元素(删除数组最后一个元素)
  
  删除数组 arr 最后一个元素。不要直接修改数组 arr,结果返回新的数组 。
  
  方法一:使用普通的迭代拷贝
  1. function truncate(arr, item) {
  2.   var newArr=[];
  3.   for(var i=0;i<arr.length-1;i++){
  4.     newArr.push(arr[i]);
  5.   }
  6.   return newArr;
  7. }
复制代码

  方法二:concat()和pop()结合
  1. function truncate(arr) {
  2.   var newArr = arr.concat();
  3.   newArr.pop();
  4.   return newArr;
  5. }
复制代码

  4、删除元素(删除数组第一个元素)
  
  删除数组 arr 第一个元素。不要直接修改数组 arr,结果返回新的数组 。
  
  方法一:使用普通的迭代拷贝
  1. function curtail(arr) {
  2.   var newArr=[];
  3.   for(var i=1;i<arr.length;i++){
  4.     newArr.push(arr[i]);
  5.   }
  6.   return newArr;
  7. }
复制代码

  方法二:concat()和shift()结合
  1. function curtail(arr) {
  2.   var newArr = arr.concat();
  3.   newArr.shift();
  4.   return newArr;
  5. }
复制代码
 
  方法三:slice()
  1. function curtail(arr) {
  2.   return arr.slice(1);
  3. }
复制代码

  5、合并数组
  
  合并数组 arr1 和数组 arr2。不要直接修改数组 arr,结果返回新的数组 。
  
  方法一:使用普通的迭代拷贝
  1. function concat(arr1, arr2) {
  2.   var newArr=[];
  3.   for(var i=0;i<arr1.length;i++){
  4.     newArr.push(arr1[i]);
  5.   }
  6.   for(var j=0;j<arr2.length;j++){
  7.     newArr.push(arr2[j]);
  8.   }
  9.   return newArr;
  10. }
复制代码

  方法二:concat()方法
  1. function concat(arr1, arr2) {
  2.   return arr1.concat(arr2);
  3. }
复制代码

  方法三:slice()和push()结合
  1. function concat(arr1, arr2) {
  2.   var newArr=arr1.slice(0);
  3.   for(var i=0;i<arr2.length;i++){
  4.     newArr.push(arr2[i]);
  5.   }
  6.   return newArr;
  7. }
复制代码

  5、移除数组中的元素
  
  移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组 。
  
  方法一:splice()方法
  1. function remove(arr, item) {
  2.       var newArr = arr.slice(0);
  3.       for(var i=0; i<newArr.length; i++) {
  4.         if(newArr[i] == item) {
  5.           newArr.splice(i, 1);
  6.         }
  7.       }
  8.       return newArr;
  9.     }
  10.     var arr = [1,2,3,4,2];
  11.     var item = 2;
  12.     console.log(remove(arr, item));
  13.     console.log(arr);
复制代码

  方法二:push()方法
  1. function remove(arr,item){
  2.   var newarr = [];
  3.   for(var i=0;i<arr.length;i++){
  4.     if(arr[i] != item){
  5.       newarr.push(arr[i]);
  6.     }
  7.   }
  8.   return newarr;
  9. }
复制代码

  以上就是本文的全部内容,希望对大家的学习有所帮助。
  
  原文链接:http://blog.csdn.net/u010297791/article/details/53000603
发表于 2017-1-3 12:12:32 | 显示全部楼层
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
使用道具 举报

回复

发表于 2017-1-7 04:53:27 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部