Vue中数组的常用方法

2023-11-20

数组的方法分为变更方法和替换数组

变更方法

  1. push()
    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

  2. pop()
    pop() 方法用于删除数组的最后一个元素并返回删除的元素。改变数组的长度

  3. shift()
    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。改变数组的长度

  4. unshift()
    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。该方法将改变数组的数目

  5. splice()
    splice() 方法用于添加或删除数组中的元素。

name.splice(2,0,"Lemon","Kiwi"); 
其中splice(索引号,删除个数,插入内容)
  1. sort()

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。
当数字是按字母顺序排列时"40"将排在"5"前面。

注意 使用数字排序,你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。

  1. reverse()
    reverse()方法用于颠倒数组中元素的顺序。

替换数组

变更方法,顾名思义,会变更调用了这些方法的原始数组。相比之下,也有非变更方法,例如 filter()、concat() 和 slice()。它们不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组:

  1. filter()
    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
  1. concat()
    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
  1. slice()

slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue中数组的常用方法 的相关文章

  • 类型错误:类扩展值未定义不是函数或 null

    尝试创建这些实体时出现以下错误 TypeError Class extends value undefined is not a function or null 我假设这与循环依赖有关 但是在使用表继承和一对多关系时应该如何避免这种情况
  • 如何判断一个网页是否支持jquery?

    确定网页是否启用 jquery 的最佳方法是什么 如果这是确定它的最佳方法 则使用 jquery 本身 if jQuery jquery object exists jQuery 并不神奇 它本质上只是一个大对象 您可以像检查任何其他对象一
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何在不阻止触摸启动的情况下防止“过度滚动历史导航”?

    我正在实现基于滑动的导航 但我在使用 Chrome 时遇到了麻烦 当页面向右拖动时 会触发新实现的功能 过度滚动历史导航 从而导致跳回 到 历史 1 为了防止这种情况 我必须打电话 preventDefault on touchstart
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 检测 Google 验证码的挑战窗口何时关闭

    我正在使用谷歌隐形验证码 有没有办法检测挑战窗口何时关闭 我所说的挑战窗口是指您必须选择一些图像进行验证的窗口 目前 我在按钮上放置了一个旋转器 一旦单击按钮 就会呈现验证码挑战 无法向用户提示另一个质询窗口 我以编程方式调用渲染函数 gr
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 当我多次调用 requestAnimationFrame 时会发生什么

    我的意思是一次调用多个具有相同功能的 requestAnimationFrame function Draw DoSomething function AFunc prepare something requestAnimationFram
  • 如何使用 window.onerror 捕获所有 javascript 错误? (包括道场)

    这个问题是后续问题javascript 如何在弹出警报中显示脚本错误 https stackoverflow com questions 2604976 javascript how to display script errors in
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w
  • 摩纳哥:如何添加内联自动完成/代码建议?

    我找不到任何有关如何添加内联自动完成功能的示例 如下图所示 有人可以指导我如何在摩纳哥做到这一点吗 这可以在 v1 66 中启用 现在在 Insiders 中 The editor quickSuggestions设置现在接受内联为 配置值
  • 为什么 Node.js 应用程序只能从 127.0.0.1/localhost 访问?

    我本来打算教我的朋友介绍 Node 但是后来 我想知道为什么这个代码来自nodejs org var http require http http createServer function req res res writeHead 20
  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a

随机推荐

  • 抖音SEO矩阵系统源码开发部署(二)技术搭建+二次开发

    抖音SEO矩阵系统源码开发 是一项技术密集型工作 需要对大数据处理 人工智能等领域有深入了解 该系统开发过程中需要用到多种编程语言 如Java Python等 同时 需要使用一些框架和技术 如Hadoop Spark PyTorch等 以提
  • 文件搜索工具(Python实现)

    文章目录 文件搜索工具介绍 代码实现 实现思路 os walk函数 os path join函数 代码整体编写 打包成exe程序 效果展示 文件搜索工具介绍 文件搜索工具能够基于名称快速定位匹配的文件和文件夹位置 比如Everything就
  • 原来实现GCP用客户端登录这么简单啊

    充满活力的一天开始了 GCP 就是谷歌的一个云服务 进入VM实例列表通过 SSH 点击 在浏览器窗口打开 进入VPS服务器 下图 切换到管理员用户 sudo i 编辑sshd config文件 vi etc ssh sshd config
  • 一个jq投票,无论成功与否3秒后自动关闭提示框

    原文地址 http blog csdn net zjb574 article details 7759447
  • 超详细的Vue-router (路由)

    由于Vue在 开发时对路由支持的不足 于是官方补充了vue router插件 vue的单页面应用是基于路由和组件的 路由用于设定访问路径 并将路径和组件映射起 来 传统的页面应用 是用一些超链接来实现页面切换和跳转的 在vue router
  • 解决vCharts不兼容Echarts5+版本问题

    背景 在实际开发项目中 发现老项目里同时用到了vCharts和Echarts 此时的Echarts是低版本 并不会出现问题 但在漏洞扫描中Echarts需升级 此时项目开始报错 v charts 不能和echarts5 版本同时存在 当时的
  • 如何快速构建CMBD系统-glpi

    脚本后续更新及迭代将由kkitDeploy项目代替 https github com luckman666 kkitdeploy server 请大家持续关注kkitDeploy 一 CMBD系统构建步骤 起初 开发这套CMBD系统是为了帮
  • 华为OD机试真题-最大平分数组【2023Q1】

    题目描述 给定一个数组nums 可以将元素分为若干个组 使得每组和相等 求出满足条件的所有分组中 最大的平分组个数 输入描述 第一行输入 m 接着输入m个数 表示此数组 数据范围 1 lt M lt 50 1 lt nums i lt 50
  • Go语言里面的各种疑难杂症

    什么是闭包 闭包有什么缺陷 func AddUpper func int int var n int 10 return func x int int n n x return n func main f AddUpper fmt Prin
  • System Poles and Zeros 系统零点和极点

    LTI系统 连续的有s传递函数 离散的有z传递函数 s jw 所以连续传递函数的零极点都对应频率值 零点的物理意义是 某个频率的输入信号 正弦信号 不会产生任何输出 被block掉了 极点的物理意义是 某个频率的输入信号会产生无穷大的输出
  • C语言void指针(void*)

    Void指针 void 是一种通用指针类型 可以用来存储任何类型的指针 但不能直接解引用 在C语言中 void指针可以用来实现对类型不确定的数据的操作 或者用作函数的参数和返回类型 以便于处理不同类型的数据 以下是一些常见的void指针的用
  • 微信小程序消息订阅推送消息后端服务(.net core)

    废话不多说直接上代码 分为三部分 第一获取微信模板信息需要token 第二步发送微信模板信息 注意 该方法不需要进行任何修改 参数 access token 是第一步获取到的token 参数 body 是json字符串格式提示信息内容 第三
  • Cannot read property bindings of null 解决方法

    安装 babel preset env yarn add babel preset env 或 npm install babel preset env webpack config js presets env 替换成 presets b
  • rabbitmq基础2——rabbitmq二进制安装和docker安装、基础命令

    文章目录 一 RabbitMQ安装 1 1 二进制安装 1 2 rabbitmqctl工具 1 3 docker安装 二 rabbitmq基础命令 2 1 多租户与权限类 2 1 1 创建虚拟主机 2 1 2 查看虚拟主机信息 2 1 3
  • 泛微最新漏洞汇总

    泛微OA e cology前台接口SQL注入漏洞 POST mobile browser WorkflowCenterTreeData jsp node wftype 1 scope 2333 HTTP 1 1 Host Content T
  • 个人技术总结——uview-plus下的Http请求基本使用及相关使用

    这个作业属于哪个课程 软件工程 23年春季学期 这个作业要求在哪里 软件工程实践总结 个人技术总结 这个作业的目标 个人技术总结 其他参考文献 构建之法 CSDN社区 uni app官方文档 uview plus官方文档 目录 一 写在前面
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • mapState的使用(常用)

    mapState作用 可以辅助获取到多个state的值 怎么使用 1 在 vue组件中引入 在js块中引入 import mapState from vuex 2 在 vue组件中computed下定义一个对象 computed mapSt
  • Go中 Redis Client的使用

    文章目录 常见操作 List 操作 Pipeline 使用 在 Go 语言中使用 Redis 时 可以使用第三方库实现 Redis Client 的封装 本文介绍如何使用 Go 语言的 redisClient 去连接 Redis 服务器 并
  • Vue中数组的常用方法

    数组的方法分为变更方法和替换数组 变更方法 push push 方法可向数组的末尾添加一个或多个元素 并返回新的长度 pop pop 方法用于删除数组的最后一个元素并返回删除的元素 改变数组的长度 shift shift 方法用于把数组的第