vue03 es6中对数组的操作,vue对数据监控的原理(分别对对象和数组的监控)

news2024/7/4 5:44:00

在js中,对数组的操作一般都是固定的模式:常用的函数,具体的方法在这个文章中去看:
http://t.csdn.cn/Fn1Ik
一般会用到的函数有:
pop()
这个函数是表示把数组中的元素(数组)末尾移除最后一项,减少数组的length值,然后返回移除项(pop里面没有参数,即使有参数,也是删除最后一项,参数无效)
push()(顺序添加)
这个函数会可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的长度(也就是返回值是这个修改后的数组的长度)

/**
     * 2.push()和pop()
     * push()可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的长度
     * pop()数组末尾移除最后一项,减少数组的length值,然后返回移除项
     */
     var arr =['a','b','c'];
     var count = arr.push('d','e')
     console.log(arr);  // ['a', 'b', 'c', 'd', 'e']
     console.log(count);//   5
     
     var item = arr.pop()
     console.log(item); // e,也就是最后一项
     console.log(arr);  // ['a', 'b', 'c', 'd']

     var item2 = arr.pop('c','d');//带参数的pop函数
     console.log(item2); // d
     console.log(arr);   // ['a', 'b', 'c']
    //  注意: pop()里面没有参数,即使有参数,也是删除最后一项

shift():
shift()删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined

unshift():(从数组的开头添加)
将参数添加到原数组的开头,并返回数组的长度。

   /**
     * 3.shift()和unshift()
     * shift()删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined
     * unshift将参数添加到原数组的开头,并返回数组到长度。
     * 这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组 的结尾
    */
     var arr = ['c','d','e']
     var count = arr.unshift('a','b');
     console.log(arr);   // ['a', 'b', 'c', 'd', 'e']
     console.log(count); // 5

     var item = arr.shift();
     console.log(item);  //  a
     console.log(arr);   //  ['b', 'c', 'd', 'e']

sort():按升序排列数组项,即最小的值位于最前面,最大的值排在最后面。
在排序时,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。(这里会出现一个问题,也就是数字数组也会被按照字符串的比较方法去比较)

   var arr1 = ['d','b','a','c'];
   console.log(arr1.sort()); // ['a', 'b', 'c', 'd']

   arr2 = [13,24,51,3];
   console.log(arr2.sort()); // [13,24,3,51]
   console.log(arr2);  // [13,24,3,51] (原数组被改变),但是并没有达到相关的排序要求

js中的字符串的比较方法:
他们以字母数字顺序逐个比较字符串的字符,并在最后考虑字符串的长度。(两个字符串的比较,也就是从两个字符串的第一个字母开始,比较字符在 ASCII上的代表数字)

js用一个函数来完善功能:http://t.csdn.cn/sTCEs相关的文章在这里去看。
在这里插入图片描述
arrayObject.sort(sortby):参数可选。规定排序顺序。必须是函数。

可知参数是可选的,也就是有两种情况,一是不加参数,另外一种是加函数参数,参数必须是函数。函数就是比较函数。

先看第一种不加参数的情况:

var arr=[1,3,10,4,2];
arr.sort();
alert(arr);   //1,10,2,3,4

默认排序顺序是升序,在上面的例子当中,我们感觉排序的结果是:1,2,3,4,10。怎么出来10反而在前面呢?那是因为sort()排序是按照字符串的Unicode码,10的比后面的小,则他在前面,但是这个结果不是我们想要的,那怎么办?此时我们就要用到第二种情况:加函数参数。

第二种加函数参数的情况:

    var arr=[1,3,10,4,2];
    function compare(value1,value2) {
        if(value1<value2){return -1;}
        else if(value1>value2){return 1;}
        else {return 0}
    }
    arr.sort(compare);
    alert(arr)   //1,2,3,4,10

按照我的理解是,在对于一个数组使用sort()方法时,会逐项的将数组中的元素传入到compare函数中作为参数,也就是说在上面 var arr=[1,3,10,4,2]使用sort()方法时,按照顺序先把1,3分别传给value1和value2,再比较1和3的大小,显然1<3,那么根据判断函数返回-1;sort()方法在接受到函数返回的-1时,就做出按照升序的原理不换位置,现在虽然数组位置没有变,但是数组是刷新过一边的,sort()返回了一个新的数组,所以在第二次传入参数的时候,是传入的第二项3和第三项10(第一次换位置的话,那么第二项就是换过后的第二项)按着同样的原理进行比较返回-1;后面的步骤就一样了,在第三次比较的时候要注意,如果前面的返回值为-1,那么新数组的第一项和第二项不用再比较(升序,-1就不比较,因为-1表示大数本来就在后面 ),如上面所示:1<3,3<10,那么1<10;如果为1,比如,2<5,5>1第二个返回值是1,则排完的新数是:2,1,5;所以接下来就是2和1比较,最终的1,2,5……所以上面的结果是1,2,3,4,10

  // 为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便于我们指定那个值位于哪个值的前面
   // 比较函数接收两个参数,如果第一个参数应该位于第二个之前(第一个比第二个小)则返回一个负数,如果两个参数相等则返回0,
   // 如果第一个参数应该位于第二个之后则返回一个正数,以下就是一个简单的比较函数。
    function compare(value1,value2) {
      return value1-value2;
    }
   var arr = [13,54,3,10,87];
   console.log(arr.sort(compare)); // [3,10,13,54,87]

reverse()
反转数组项的顺序

代码如下(示例):

 var arr = [13,54,3,10,87];
 console.log(arr.reverse()); // [87, 10, 3, 54, 13]
 console.log(arr);   //  [87, 10, 3, 54, 13] 原数组改变 */

concat()
concat():将参数添加到原数组,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
在没有concat()方法,传递参数的情况下,它只是复制当前数组并返回副本。

var arr  =[1,3,5,7];
 var arrCopy = arr.concat(9,[11,13]);
 console.log(arrCopy); // [1,3,5,7,9,11,13]
 console.log(arr); // [1,3,5,7]  原数组未被修改
 从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面


slice()
slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,
slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

 var arr = [1,3,5,7,9,11];
 var arrCopy = arr.slice(1);
 var arrCopy2 = arr.slice(1,4);
 var arrCopy3 = arr.slice(1,-2);
 var arrCopy4 = arr.slice(-4,-2);
 console.log(arr);     // [1,3,5,7,9,11] 
 console.log(arrCopy);  
// [3,5,7,9,11] arrCopy只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。
 console.log(arrCopy2); // [3,5,7]  arrCopy2设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。    
 console.log(arrCopy3); // [3,5,7] arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。 
console.log(arrCopy4); // [5,7,9] arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)

splice()
很强大的数组方法,它有很多种用法,可以实现删除,插入和替换。

删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数
例如:splice(0,2)会删除数组中的前两项
插入(参数:起止,删除,增加):可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项数和要插入任意数量的项,
插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
替换(参数:起止,删除,替换):可以向指定位置插入任意数量的项,且同时删除任意数量的项
只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
注意:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组>代码如下(示例):

// 删除:可以删除任意数量的项,传入2个参数,要删除的第一项的位置和要删除的项数,
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);  
 // (0,2)表示删除前两项
console.log(arr); // [5,7,9,11];
console.log(arrRemoved); // [1,3]; 
 // 返回从原始数组中删除的项,若没有删除任何项,则返回空数组

// 插入:可以向指定位置插入任意数量的项,传3个参数,第一个为起始位置,第二个为要删除的项,第三个为要插入的项
var arrRemoved2 = arr.splice(2,0,4,6);   
// 例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
console.log(arr); //[5,7,4,6,9,11]
console.log(arrRemoved2);  // []

// 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,传入3个参数,第一个为起始位置,第二个要删除的项数,第三为要插入的任意数量的项,插入的项数不必与删除的项数相等
var arrRemoved3 = arr.splice(1,1,2,4);  
// 例如,splice (1,1,2,4)会删除当前数组位置 2 的项,然后再从位置 2 开始插入2和4。
console.log(arr);
  // [5,2,4,4,6,9,11]
console.log(arrRemoved3);
 // [7]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/821487.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Elasticsearch 全文检索 分词检索-Elasticsearch文章四

文章目录 官方文档地址refercence文档全文搜索体系match简单查询match 多词/分词单字段分词match多个词的逻辑控制match的匹配精度match_pharse_prefix分词前缀方式match_bool_prefixmulti_match多字段匹配 query string类型Interval类型DSL查询之Term详解聚合查询之Bucket聚合…

Java入门指南:Java语言优势及其特点

目录 1. Java语言简介及发展概述 2. Java语言的优势 2.1 可移植性 2.2 面向对象 2.3 安全性 2.4 大量类库 3. Java语言与C/C的区别 4. 初识Java程序入口之main方法 5. 注释、标识符、关键字 5.1 注释 5.2 标识符 5.3 关键字 1. Java语言简介及发展概述 Java是一种面…

天下风云出我辈,AI准独角兽实在智能获评“十大数字经济风云企业

时值盛夏&#xff0c;各地全力拼经济的氛围同样热火朝天。在浙江省经济强区余杭区这片创业热土上&#xff0c;人工智能助力数字经济建设正焕发出蓬勃生机。 7月28日&#xff0c;经专家评审、公开投票&#xff0c;由中共杭州市余杭区委组织部&#xff08;区委两新工委&#xff…

【Java】数据结构篇:经典链表OJ题 |超详细图解+代码

博主简介:努力学习的预备程序媛一枚~博主主页: @是瑶瑶子啦所属专栏: Java岛冒险记【从小白到大佬之路】文章目录 1、获取链表的中间节点⭐2、单链表的逆置⭐3、判定链表是否是回文⭐4、链表分割5、合并两个有序链表6、链表中倒数第k个结点⭐7、判定链表相交8、判断链表带环⭐…

15、两个Runner初始化器和 springboot创建非web应用

两个Runner初始化器 两个Runner初始化器——主要作用是对component组件来执行初始化 这里的Component组件我理解为是被Component注解修饰的类 Component //用这个注解修饰的类&#xff0c;意味着这个类是spring容器中的一个组件&#xff0c;springboot应用会自动加载该组件。 …

一文读懂浏览器本地存储:Web Storage

一、 简介 二、localStorage 和 sessionStorage 2.1、区别 2.2、浏览器兼容性 三、使用说明 3.1、API介绍 3.2、浏览器查看 3.3、监听 四、存储 4.1、存储容量 4.2、存储性能 五、应用 5.1、使用习惯记录 5.2、首次打开提示 5.3、减少重复访问接口 六、总结 一、 …

在 3ds Max 中使用相机映射将静止图像转换为实时素材

推荐&#xff1a; NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 在 Photoshop 中准备图像 步骤 1 这是我将在教程中使用的静止图像。 这是我的静态相机纸箱的快照。 静止图像 步骤 2 打开 Photoshop。将图像导入 Photoshop。 打开 Photoshop 步骤 3 单击套索工…

计算机网络基础(静态路由,动态路由,公网IP,私网IP,NAT技术)

文章目录 一&#xff1a;静态路由和动态路由二&#xff1a;静态路由的配置路由信息的方式演示三&#xff1a;默认路由四&#xff1a;公网IP和私网IP和NAT技术的基本理解 一&#xff1a;静态路由和动态路由 在说静态路由和动态路由前&#xff0c;我们需要来了解一下&#xff0…

近2年入侵13家电信公司的幕后黑手浮出水面

10月20日&#xff0c;网络安全公司赛门铁克刚披露了一个针对南亚电信公司的神秘APT&#xff08;高级持续威胁&#xff09;组织&#xff0c;一个名为 LightBasin 的黑客组织被确定为针对电信行业发起一系列攻击的幕后黑手&#xff0c;其目标是从移动通信基础设施中收集“高度特定…

【iOS】GCD深入学习

关于GCD和队列的简单介绍请看&#xff1a;【iOS】GCD学习 本篇主要介绍GCD中的方法。 栅栏方法:dispatch_barrier_async 我们有时候需要异步执行两组操作&#xff0c;而且第一组操作执行完之后&#xff0c;才能开始执行第二组操作&#xff0c;当然操作组里也可以包含一个或者…

JVM之三大垃圾回收算法

文章目录 前言一、复制算法二、标记清除三、标记整理 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器学习&#xff0c;本文就介绍…

Django实现音乐网站 ⑶

使用Python Django框架制作一个音乐网站&#xff0c;在系列文章2的基础上继续开发&#xff0c;本篇主要是后台单曲、专辑、首页轮播图表模块开发。 目录 后台单曲、专辑表模块开发 表结构设计 单曲表&#xff08;singe&#xff09;结构 专辑表&#xff08;album&#xff09…

安达发|APS生产派单系统对数字化工厂有哪些影响和作用

数字化工厂是当今制造业的热门话题&#xff0c;而APS软件则是这一领域的颠覆者。它以其独特的影响和作用&#xff0c;给制造业带来了巨大的改变。让我们一起来看看APS软件对数字化工厂有哪些影响和作用吧&#xff01; 提高生产效率的神器 1.APS软件作为数字化工厂的核心系统&a…

Jenkins工具系列 —— 启动 Jenkins 服务报错

错误显示 apt-get 安装 Jenkins 后&#xff0c;自动启动 Jenkins 服务报错。 排查原因 直接运行jenkins命令 发现具体报错log&#xff1a;Failed to start Jetty或Failed to bind to 0.0.0.0/0.0.0.0:8080或Address already in use 说明&#xff1a;这里提示的是8080端口号…

权威认可|云畅科技再次入选中国信通院「高质量数字化转型产品及服务全景图」

7月27日&#xff0c;由中国信通院主办的2023数字生态发展大会暨中国信通院“铸基计划”年中会议在北京成功召开。 会上&#xff0c;中国信通院重磅发布了「高质量数字化转型产品及服务全景图&#xff08;2023&#xff09;」&#xff0c;云畅科技凭借其自研产品「万应低代码」在…

【编程语言 · C语言 · 共用体指针】

【编程语言 C语言 共用体指针】https://mp.weixin.qq.com/s?__bizMzg4NTE5MDAzOA&mid2247491538&idx1&sne1941bffaa2b85d4a7932fa94bccc84d&chksmcfade32bf8da6a3d5fc729b29452259127a7ff63efd2ad77607b0d2f2c72250b86e1841e76d3&payreadticketHLky0Bq4…

从引入并集成多LLM到发布自研模型,RPA与LLM的融合进度怎样了?

RPA厂商对于大语言模型&#xff08;LLM&#xff0c;Large Language Model&#xff09;的应用&#xff0c;比大家想象的还要早一些。 毕竟&#xff0c;2019年兴起的这一波RPA热&#xff0c;背后都是因为AI技术。没有AI技术与RPA的融合&#xff0c;也就没有现在的RPA。 为了全力…

tinkerCAD案例:31. 3D 基元形状简介

tinkerCAD案例&#xff1a;31. 3D 基元形状简介 1 将一个想法从头脑带到现实世界是一次令人兴奋的冒险。在 Tinkercad 中&#xff0c;这将从一个新的设计开始。 在新设计中&#xff0c;简单的原始形状可以通过不同的方式组合成更复杂的形状。 在这个项目中&#xff0c;你将探索…

JNPF-一个真正可拓展的低代码全栈框架

一、前言 尽管现在越来越多的人开始对低代码开发感兴趣&#xff0c;但已有低代码方案的一些局限性仍然让大家有所保留。其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定。 显然这样的担忧是合理的&#xff0c;因为大家都不希望在实现特定功能的时候才发现低代码平台…

在win10下安装verilator

主要参考文章 Verilator简介及其下载安装卸载_徐晓康的博客的博客-CSDN博客https://blog.csdn.net/weixin_42837669/article/details/114505364上面的文章可以解决大部分问题,但是可能是方案有些老了,已经安装最新的版本,下面对最新的版本安装提供解决方案 一 预备工作 安…