专栏首页web前端JavaScript之对数组中元素进行增删改

JavaScript之对数组中元素进行增删改

JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂。从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并不会因为一些关系(比如引用)而多出一部分你不知道的(比如方法、属性等);反之复杂,就是你看到的只是对方的冰山一角,而且这一角还戴了面纱(比如:你看见的只是一个指针,并不是对方本质所在)。

综上,简单类型的数据就是一个平常的不带方法、属性的数据(举个例子 var a=3; 这个a就是一个number类型<注意:js是弱类型语言,从值看类型>的数据,而number类型的数据包含在简单数据类型这个大类里)。复杂类型的数据就是给你一个指针(或者说你自己定义后得到一个指针),然后通过指针操作从而操作本质的一些方法或属性(这里不举例子,毕竟今天主题不是这个,有需要可留言共交流~)

简单类型:undefined、null、string、number、boolean

复杂类型:object

其中复杂类型object又可以延伸出许多子女:Array、Date、Function、RegExp、Math……

这里讲复杂类型中的一种:数组类型的数据的增删改。

经常遇到这种题目,给你一个string类型或者array类型的数据,让你对其中的某些元素进行操作(比如修改、删除或替换),做法其实很有一套固定流程:

1)找到它

2)操作它

思路非常清晰,并且在计算机中要找到某个数据,通常会用到数据结构里的一些查找算法(毕竟现在大数据来了,即使不是大数据,在现在的快餐社会,用户总是希望最快的速度达到目的),在空间和时间的权衡下找到最佳的查找算法并用上去就能完成第一步。

今天不讲数据结构,不求快速,只要找到它,很自然想到for循环,然后一个一个数据比对,找到就return。而操作它这一步只要学过js,就会知道数组中已经有许多方法属性帮你实现这个,不需要自己写最底层代码(非常佩服打底层代码大牛们,他们造轮子封装的方法、属性简直方便了全人类!)

上例子:

var colors=["red","blue","white"];  
//对象字面量的方法定义数组colors,比较简单只管,比较受欢迎
//var colors=new Array();    colors.push("red","blue","white");
//构造类型的方法创建数组,与上面对象字面量的方法能达到同样的效果,择一即可
//找到下标
Array.prototype.indexOf=function(val){  
  for(var i=0;i<this.length;i++){
    if(this[i]==val)  return i;
  }
  return -1;
};
//建立replace方法,加上增删改功能
Array.prototype.replace=function(val,len,item){
  var index=this.indexOf(val);
  this.splice(index,len,item);
};
//实际操作
colors.replace("blue",1);  //删除了blue
colors.replace("red",1,"green");  //将red替换成green
colors.replace("white",0,"gray");  //在white后增加了gray

注意:以上replace方法和indexOf方法是在Array的原型上操作的,增删改会影响到原本的数据,有任何问题欢迎共同交流~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuejs --02 Vue实例

    一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

    用户1148399
  • JavaScript基础学习--07函数的传参、重用、价格计算

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、函数传参      1、参数=js数据类型  ...

    用户1148399
  • JavaScript基础学习--13字符串、查找高亮显示

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、字符串      1、str.length; ...

    用户1148399
  • Docker容器实战(七) - 容器中进程视野下的文件系统

    这么一搞,进程就真的被“装”在了一个与世隔绝的房间里,而这些房间就是PaaS项目赖以生存的应用“沙盒”。

    JavaEdge
  • 百名记者走进全国首家腾讯联通智慧生活馆 体验5G新技术| 数字文旅周报20期(7.8-7.14)

    ? 百名记者走进全国首家腾讯联通智慧生活馆 体验5G新技术 7月5日上午,“文明与城市共成长——2019全国融媒体南昌行”采访团一行来到位于南昌高新区的全国首...

    腾讯文旅
  • 数字文旅周报49期 | 2020中国互联网大会开幕式观看量超1000万

    ? ? 1.中国互联网协会联合腾讯推出“中国互联网大会”小程序 中国互联网大会于7月23日-25日召开,并首次取消线下实体展馆。腾讯为本届中国互联网大会技...

    腾讯文旅
  • 超大规模云重塑网络的未来

    目前,数据中心网络正在面临着快速创新,但与此同时,成本问题却成了超大规模和主要的云基础设施服务提供商(后文简称云建设者)面临的一大难题。

    SDNLAB
  • mybatis 使用tips - 使用多个参数

    执行如下命令: mvn -Dmybatis.generator.overwrite=true mybatis-generator:generate 可以使用my...

    千往
  • FastTree:速度最快的最大似然法进化树构建软件

    FastTree 是基于最大似然法构建进化树的软件,它最大的特点就是运行速度快,支持几百万条序列的建树任务。官方的说法是,对于大的比对数据集,FastTree ...

    生信修炼手册
  • “一部手机游武隆”上线试运行 打通智慧旅游服务闭环 ​| 数字文旅周报27期(8.26-9.1)

    ? “一部手机游武隆”上线试运行 打通智慧旅游服务闭环 8月26日,全球关注的国际化、专业性盛会2019中国国际智能产业博览会(简称智博会)正式开幕,期间...

    腾讯文旅

扫码关注云+社区

领取腾讯云代金券