当前位置: 首页 > news >正文

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

在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);//   5var item = arr.pop()console.log(item); // e,也就是最后一项console.log(arr);  // ['a', 'b', 'c', 'd']var item2 = arr.pop('c','d');//带参数的pop函数console.log(item2); // dconsole.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); // 5var item = arr.shift();console.log(item);  //  aconsole.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]

相关文章:

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

在js中&#xff0c;对数组的操作一般都是固定的模式&#xff1a;常用的函数&#xff0c;具体的方法在这个文章中去看&#xff1a; http://t.csdn.cn/Fn1Ik 一般会用到的函数有&#xff1a; pop&#xff08;&#xff09; 这个函数是表示把数组中的元素&#xff08;数组&#xff…...

微信小程序 - 解析富文本插件版们

一、html2wxml 插件版 https://gitee.com/qwqoffice/html2wxml 申请使用注意事项 插件版本解析服务是由 QwqOffice 完成&#xff0c;存在不稳定因素&#xff0c;如对稳定性有很高的要求&#xff0c;请自行搭建解析服务&#xff0c;或在自家服务器上直接完成解析。对于有关插…...

工厂方法模式(Factory Method)

工厂方法模式就是定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法模式将类的实例化&#xff08;具体产品的创建&#xff09;延迟到工厂类的子类&#xff08;具体工厂&#xff09;中完成&#xff0c;即由子工厂类来决定该实例化哪一个类。 Define a…...

js如何将图片转成BASE64编码,网页跟uniapp开发的app的区别?

Base64是一种用64个字符来表示任意二进制数据的方法&#xff0c;这篇文章主要为大家介绍了如何实现将图片转为base64格式&#xff0c;感兴趣的小伙伴可以学习一下 前言 前段时间在写我的VUE全栈项目的时候&#xff0c;遇到要把前端的照片上传到后端&#xff0c;再由后端存到数…...

1400*C. Computer Game

Example input 6 15 5 3 2 15 5 4 3 15 5 2 1 15 5 5 1 16 7 5 2 20 5 7 3 output 4 -1 5 2 0 1 解析&#xff1a; k个电&#xff0c; 第一种为 k>a 时&#xff0c;只玩游戏 k-a; 第二种&#xff0c;k>b,一边玩一边充电 k-b 问完成n轮游戏的情况下&#xff0c;优先第…...

windows10访问Ubuntu 18.04共享目录(已验证)

1、Ubuntu 18.04安装samba sudo apt-get install samba 2、创建一个共享目录文件夹&#xff0c;并设置777权限 ubt1804是用户名 mkdir/home/ubt1804/lsk sudo chmod 777 /home/ubt1804/lsk 3、添加用户及密码 sudo smbpasswd -a [用户名] 比如用户名为test sudo sm…...

Linux安装redis执行make命令报错:gcc not found和*** [adlist.o] Error 1

目录 第一章、问题分析与解决1.1&#xff09;报错11.2&#xff09;报错2 友情提醒 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置。 第一章、问题分析与解决 1.1&#xff09;报错1 报错问题1&#xff1a;gcc: Command n…...

R语言glmnet包详解:横截面数据建模

R语言glmnet包详解:横截面数据建模 glmnet适用的模型glmnet建模补充glmnet适用的模型 glmnet程序包即适用于线性模型,也适用于添加惩罚项项的线性模型。如果数据中的变量个数大于样本量并且想用线性模型解决问题,那么glmnet再合适不过了! 根据glmnet函数中参数family的指定…...

LeetCode257. 二叉树的所有路径

257. 二叉树的所有路径 文章目录 257. 二叉树的所有路径一、题目二、题解方法一&#xff1a;深度优先搜索递归方法二&#xff1a;迭代 一、题目 给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点…...

ajax、axios、fetch的区别

ajax、axios、fetch 的区别 参考答案&#xff1a; ajax 是指一种创建交互式网页应用的网页开发技术&#xff0c;并且可以做到无需重新加载整个网页的情况下&#xff0c;能够更新部分网页&#xff0c;也叫作局部更新。 使用 ajax 发送请求是依靠于一个对象&#xff0c;叫 XmlHtt…...

Liunx开发工具

Liunx开发工具 1.Linux编辑器-vim使用1.1vim的基本概念1.2vim的基本操作1.3命令模式命令集1.3.1光标定位1.3.2光标移动1.3.3文本复制1.3.4文本操作 1.4插入模式命令集1.5底行模式命令集 2.vim配置3.sudo配置4.Linux编辑器-gcc/g使用4.1背景知识4.2gcc如何操作 5.函数库5.1函数库…...

Docker入门之运行Nginx案例

运行镜像 如果你直接安装会比较慢, 建议参照附录内容配置镜像之后再执行 # 执行命令过程一&#xff1a;下载容器镜像 docker run -d nginx:latest 命令解释 docker run 启动一个容器 -d 把容器镜像中需要执行的命令以daemon&#xff08;守护进程&#xff09;的方式运行 nginx…...

【深度学习环境】安装anaconda、tensorflow、pycharm

目录 1.安装anaconda 2.安装tensorflow-gpu 3.安装pycharm 4.VNC操作 5.安装Pytorch PS: linux下常见的操作&#xff1a; 1.Linux下强制关闭程序&#xff1a; 2.导出环境 2.1.pip导出 2.2.conda导出 2.3.其他 3.windows下的环境安装 & pycharm远程配置 4.bash…...

mockery 模拟

composer地址&#xff1a;mockery/mockery - Packagist github地址&#xff1a;地址 文档地址&#xff1a;Mockery — Mockery Docs 1.0-alpha documentation 根据文档介绍&#xff0c;mockery是php mock对象框架。根据js的mock框架的作用&#xff0c;估计mockery也是通过创…...

汽车后视镜反射率检测系统

随着社会的快速发展和物质生活的提供&#xff0c;机动车越来越普及&#xff0c;道路行车安全日益重要。为了保障机动车辆和行人的安全&#xff0c;在行车时不断观察后方和两侧的图像尤为重要。机动车后视镜通过反射镜面可以提供在规定视野内后方和两侧的图像&#xff0c;从而提…...

uni-app引用外部图标库(阿里矢量图)

uni-app引用外部图标库&#xff08;阿里矢量图&#xff09; 作为前端程序员&#xff0c;nui-app是必备的&#xff0c;但是有时候内置的图标&#xff0c;组件又不完全满足&#xff0c;这里就可以引进外部图标&#xff0c;这里引用的是阿里矢量图标 第一步&#xff0c;在项目目…...

day49-Todo List(待办事项列表)

50 天学习 50 个项目 - HTMLCSS and JavaScript day49-Todo List&#xff08;待办事项列表&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" co…...

寻找丢失数字:数学与位运算的解密之旅

本篇博客会讲解力扣“268. 丢失的数字”的解题思路&#xff0c;这是题目链接。 注意进阶中的描述&#xff1a;你能否实现线性时间复杂度、仅使用额外常数空间的算法解决此问题&#xff1f;这里我会讲解两种思路&#xff0c;它们的时间复杂度是O(N)&#xff0c;空间复杂度是O(1)…...

数论分块学习笔记

准备开始复习莫比乌斯反演&#xff0c;杜教筛这一部分&#xff0c;先复习一下数论分块 0.随便说说 数论分块可以计算如下形式的式子 ∑ i 1 n f ( i ) g ( ⌊ n i ⌋ ) \sum_{i1}^{n}f(i)g(\lfloor\frac{n}{i}\rfloor) ∑i1n​f(i)g(⌊in​⌋)。 利用的原理是 ⌊ n i ⌋ \lf…...

【基础理论】了解点过程

Maximum tsunami wave height generated by the 16 Sept. 2015 Chile earthquake, from the International Tsunami Information Center. Posted by Austin Elliott 一、说明 在这个世界上&#xff0c;会发生许多事件&#xff0c;其趋势可能遵循一种模式。在这篇博客中&#…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...