vue中数组常用的六种循环方法、VUE中list的各种方法和运用

简单记录一下,常用的六种数组循环的方法,分别是for(),map(),forEach(),filter (),every(),some();

一、for循环

let data = [{name: '张三',age: 10}, {name: '李四',age: 20}, {name: '王五',age: 30}]for (let i = 0; i < data.length; i++) {console.log(data[i])}

二、map循环

let data = [{name: '张三'}, {name: '李四'}, {name: '王五'}]data.map((item, index) => {console.log(item) //表示的是每一项console.log(index) //表示的是数组的索引})

三、forEach

let data = [{name: '张三'}, {name: '李四'}, {name: '王五'}]data.forEach((item, index) => {console.log(item) //表示的是每一项console.log(index) //表示的是数组的索引})

四、 filter (过滤掉不满足条件的元素,把满足条件的元素返回一个新的数组,不会改变原来的数组)

let data = [{name: '张三'}, {name: '李四'}, {name: '王五'}]let a = data.filter((item, index) => {return item.name == '张三'})console.log(a)

五、every(遍历数组,当每一项都为true时返回true,否则为false)(遇到false停止执行,必须要有return值)

let data = [{name: '张三',age: 10}, {name: '李四',age: 20}, {name: '王五',age: 30}]let a = data.every((item, index) => {return item.age > 20})console.log(a)//输出 false

六、some(遍历数组, 当有一项为真(true)时, 就会停止循环)

let data = [{name: '张三',age: 10}, {name: '李四',age: 20}, {name: '王五',age: 30}]let a = data.some((item, index) => {return item.age > 20})console.log(a)//true

VUE中list的各种方法和运用

1、instanceof() : 检测一个对象是否是数组(用来对付复杂数据类型)

var arr = [1,2,3];

console.log(arr instanceof Array); // 返回值为: ture arr属不属于Array(数组)类型

2、valueOf(): 返回数组本身
var arr = ["aaa","bbb","ccc"];

console.log(arr.valueOf()); // 返回值为: ["aaa","bbb","ccc"]

3、toString():把数组变成字符串
(1).toString() var arr = ["aaa","bbb","ccc"];

console.log(arr.toString()); // 返回值为: aaa,bbb,ccc

(2).join() 把数组中的所有元素放入一个字符串

var arr = ["aaa","bbb","ccc"];

var array = arr.join(''); // ' ' 中加间隔符 为空默认不加

console.log(array); //返回值为:aaabbbccc

4-1、push(): 在数组的最末尾添加元素
var arr = [1,2,3];

var aaa = arr.push("abc"); //在数组的最末尾添加一个元素

console.log(arr); // 返回值为: [1,2,3,abc]

console.log(aaa); // 返回值为: 4 返回值是数组的长度

4-2、pop(): 在数组的最末尾删除一项(不需要参数)
var arr = [1,2,3];

var aaa = arr.pop(); // 在数组的最末尾删除一个元素

console.log(arr); // 返回值为: [1,2]

console.log(aaa); // 返回值为: 3 返回值是被删除的那一项

5-1、unshift(): 在数组的最前面添加一个元素
var arr = [1,2,3];

var aaa = arr.unshift("abc"); //在数组的最前面添加一个元素

console.log(arr); // 返回值为: [abc,1,2,3]

console.log(aaa); // 返回值为: 4 返回值是数组的长度

5-2、shift(): 在数组的最前面删除一项(不需要参数)
var arr = [1,2,3];

var aaa = arr.shift(); // 在数组的最前面删除一个元素

console.log(arr); // 返回值为: [2,3]

console.log(aaa); // 返回值为: 1 返回值是被删除的那一项

6、reverse(): 数组反向输出
var arr1 = [1,2,3,4,5];

var aaa = arr1.reverse(); // 返回值为: [5,4,3,2,1]

7、sort(): 数组排序 (默认顺序:按照首个字符的Unicode编码排序,从小到大)
(1).默认排序 var arr1 = [4,5,1,3,2,7,6];

var aaa =arr1.sort();

console.log(aaa); // 返回值为: [1, 2, 3, 4, 5, 6, 7]

(2).自定义排序 var arr2 = [4,5,1,13,2,7,6];

//回调函数里面返回值如果是: 参数1-参数2:升幂; 参数2-参数1:降幂

arr.sort(function (a,b) {

return a-b; // 升序

return b-a; // 降序

});

console.log(arr2); // a-b返回值为:[1, 2, 4, 5, 6, 7, 13] b-a返回值为:

8、concat(): 拼接数组
var arr1 = [1,2,3];

var arr2 = ["a","b","c"];

var arr3 = arr1.concat(arr2);

console.log(arr3) // 返回值为: [1, 2, 3, "a", "b", "c"]

9、slice():数组截取 形式:slice(开始位置的数组下标 ,结束位置的数组下标)
var arr = [1, 2, 3, "a", "b", "c"];

console.log(arr.slice(3)); // 返回值为: ["a", "b", "c"] 从下标为3(包括第3个)的开始截取到最后

console.log(arr.slice(0,3)); // 返回值为:[1, 2, 3] 从下标为0(包括第0个)的开始截取3个

console.log(arr.slice(-2)); // 返回值为: ["b", "c"] 负数是从最后往前截取 -2就是截取到倒数第二个

js模拟list和map application/x-rar

3星 超过45%的资源 2KB

下载 console.log(arr.slice(3,0)); // 返回值为: [ ] 如果前面的比后面的大,那么就是[ ];

10、splice():数组的替换和删除 形式:splice(开始下标值,删除个数,替换内容1,替换内容2,...)
(1).删除 var arr = [1,2,3,4,5,6,"a", "b", "c"]

arr.splice(5); // 从下标值为5(包括第5个)的开始删除到最后

console.log(arr); // 返回值为: [1, 2, 3, 4, 5]

arr.splice(5,1);
console.log(arr); // 返回值为:[1, 2, 3, 4, 5, "a", "b", "c"]

(2).替换 var arr = [1,2,3,4,5,6,"a", "b", "c"];

console.log(arr.splice(3,3,"aaa","bbb","ccc")); //从下标值为3(包括第3个)的开始删除3个并且替换掉删除的

console.log(arr); // 返回值为:[1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]

11、indexOf() / lastIndexOf():查元素在数组中的下标值
var arr = ["a","b","c","d"];arr.splice(1,2); // 从下标值为1(包括第1个)的开始删除2个(删除指定位置指定个数)

console.log(arr.indexOf("b")); //返回值为:1 (从前往后查询)查到以后立刻返回

console.log(arr.lastIndexOf("d")); //返回值为:6 (从后往前查询)查到以后立刻返回

console.log(arr.indexOf("xxx")); // 返回值为:-1 查不到就返回-1

12、filter():数组过滤函数
var arr = [111,222,333,444,555];

var newArr = arr.filter( function (element, index, array) {

 //筛选能被2整除的元素  组成新数组
 ​
 if( element%2 === 0 ){
 ​
   return true;
 ​
 }else{
 ​
   return false;
 ​
 }
})

console.log( newArr ); // 返回值为:[222, 444]

13、forEach(): 数组循环(和for循环一样;没有返回值;)
var arr = [111,222,333,444,555];

js中List、Tree互相转换 html

2星 超过35%的资源 2KB

下载 var sum = 0;

var aaa = arr.forEach(function (element,index,array) {

 console.log(element); // 返回值为:输出数组中的每一个元素
 ​
 console.log(index); // 返回值为:数组元素对应的索引值
 ​
 console.log(array); // 返回值为:[111, 222, 333, 444, 555]
 ​
 sum += element; // 数组中元素求和;
});

console.log(sum); // 返回值为:1665 数组元素加起来的和

console.log(aaa); // 返回值为:undefined 因为没有返回值 所以返回undefined

14、map(): 对数组中每一项运行回调函数,返回该函数的结果组成的新数组(return什么新数组中就有什么; 不return返回undefined; 对数组二次加工)
var arr = [111,222,333,444,555];

var newArr = arr.map(function (element, index, array) {

 if(index == 2){
 ​
   return element; // 这里return了 所以下面返回的值是333
 ​
 }
 ​
 console.log(newArr); // 返回值为: [undefined, undefined, 333, undefined, undefined]
 ​
 return element*100; // 返回的元素值都乘上100后的值
})

console.log(newArr); // 返回值为:[11100, 22200, 333, 44400, 55500]

15、some():对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true
var arr = [111,222,333,444,555];

var bool = arr.some(function (ele,i,array) {

 //判断数组中是否有3的倍数(只要有一个是就返回true)
 ​
 if(ele%3 == 0){
 ​
   return true;
 ​
 }
 ​
 return false;
})

console.log(bool); //返回值为:true ; 有一个成功就是true

16、find():查找数组里面的符合条件的项目
var arr = [111,222,333,444,555];

let obj = arr.find(it=>it==111)
console.log(obj)  // 111

17、findIndex():查找数组里面的符合条件的项目
var arr = [111,222,333,444,555];
let obj = arr.findIndex(it=>it==333)
console.log(obj) // 2

18、join():将数组转为字符串
var arr = [111,222,333,444,555];
let obj = arr.join("---")
console.log(obj)  // 111---222---333---444---555

19、copyWithin():将指定位置的元素复制到数组的其他位置
返回值为移动后数组。
原始数组的内容会被改变,原始数组的长度不会改变。
arr.copyWithin(index, startIndex, endIndex)
第一个参数为(必需),期望被复制的内容将要插入的位置。
第二个参数为(可选),数组中复制的内容起始的位置,默认为 0 。如果为负值,表示倒数。
第三个参数为(可选),数组中复制的内容截至的位置,默认等于数组长度。如果为负值,表示倒数。
var arr = [111,222,333,444,555];
arr.copyWithin(3,0,1) //将数组下标0-1的内容复制到数组下第三个及以后
console.log(arr) //[111, 222, 333, 111, 555]

arr.copyWithin(0,1) //[222,333,444,555,555]
arr.copyWithin(0,2) //[333,444,555,444,555]

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

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

相关文章

k8s 对外服务之 Ingress(七层代理)

一 Ingress 简介 理论方面 1&#xff0c; k8s service 作用 对集群内部&#xff1a; 它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制 对集群外部&#xff1a; 对集群外部&#xff0c;他类似负载均衡器&am…

JAVA家政系统小程序源码,家政系统源码,支持店铺入驻接单,师傅入驻接单:专业团队自主研发的一套上门家政APP系统成品源码,支持商用

JAVA家政系统小程序源码&#xff0c;家政系统源码&#xff0c;支持店铺入驻接单&#xff0c;师傅入驻接单&#xff1a;专业团队自主研发的一套上门家政APP系统成品源码&#xff0c;支持商用 家政系统是一套可提供上门家政的系统&#xff0c;可在线预约开荒保洁、上门维修、美容…

Android 如何保证开启debug模式之后再启动

很多时候会需要debug看Android启动时候的一些数据&#xff0c;但很多时候会存在自己开启debug后app已经过了自己要debug的那段代码的时机了。 那么怎么样可以保证一定能让启动后不会错过自己要debug的那段代码执行的时机呢&#xff1f; 可以用下面这行命令&#xff0c;其中co…

废品回收小程序开发,助力商家拓展回收市场

随着互联网的快速发展&#xff0c;废品回收行业也走向了数字化发展&#xff0c;废品回收小程序成为了拓展市场的重要方式。在当下万亿元下的回收市场中&#xff0c;废品回收小程序的发展也能够发挥重要作用&#xff0c;提高市场回收效率&#xff0c;提高大众的回收意识&#xf…

前端开发入门指南:掌握网页设计的第一课

UI设计与前端开发是相辅相成&#xff0c;UI设计可以视觉美化产品界面&#xff0c;而前端开发可以通过代码实现设计稿。作为UI设计师&#xff0c;如果画出来的图片美观方便对前端开发者非常有益。如果设计复比较难以实现&#xff0c;沟通就会变得更加困难。因此&#xff0c;UI设…

Django路由与会话深度探索:静态、动态路由分发,以及Cookie与Session的奥秘

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…

Python爬虫之保存图片到本地

Python爬虫之BeautifulSoup保存图片到本地 在网络爬虫的世界里&#xff0c;文字是丰富的养分&#xff0c;而图片则是色彩缤纷的果实。无论你是在收集艺术作品、建立产品目录&#xff0c;还是只是想保存那些令人惊叹的旅行照片&#xff0c;从网页上抓取并保存图片都是一项常见而…

高通开发系列 - 借助libhybris库实现Linux系统中使用Andorid库

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 返回:专栏总目录 目录 概述Android代码下载和编译aarch64开发环境libhybris下载和编译libhybris测试验证调用库中的函数概述 我主要是基于…

从函数开始学习ABAP01

从函数开始学习ABAP01 函数接口创建步骤实例1&#xff1a;供应商信息同步相关知识函数的属性DATA定义时TYPE 和LIKE的区别IN CORRESPONDING FIELDS OF TABLE表连接判断内表是否不为空FOR ALL ENTRIES INREAD TABLESY-SUBRCSELECT 关键字运算符CONVERSION_EXIT_ALPHA_OUTPUTCALL…

攻防世界---web---Web_php_unserialize

1、题目描述 2、 3、分析代码 class Demo { private $file fl4g.php; }&#xff1a;定义了一个名为Demo的类&#xff0c;该类有一个私有属性$file&#xff0c;默认值为fl4g.php。 $a serialize(new Demo);&#xff1a;创建了一个Demo类的实例&#xff0c;并对其进行序列化&a…

智能监测,无忧续航!Battery Indicator for Mac,让电池状态尽在掌握

Battery Indicator for Mac 是一款设计精良的电池状态监测软件&#xff0c;它极大地增强了Mac用户对电池使用情况的感知和管理能力。 首先&#xff0c;Battery Indicator for Mac 能够实时显示电池电量百分比。这意味着&#xff0c;无论你是在处理文件、浏览网页还是观看视频&…

【栈】736. Lisp 语法解析

本文涉及知识点 栈 LeetCode736. Lisp 语法解析 给你一个类似 Lisp 语句的字符串表达式 expression&#xff0c;求出其计算结果。 表达式语法如下所示: 表达式可以为整数&#xff0c;let 表达式&#xff0c;add 表达式&#xff0c;mult 表达式&#xff0c;或赋值的变量。表达…

电影推荐系统配置运行

电影推荐系统配置运行 代码地址项目介绍&#xff08;引自原文&#xff09; 环境创建新环境激活环境安装包创建管理员用户(可选)启动 代码地址 movie 项目介绍&#xff08;引自原文&#xff09; 本推荐系统采用的是分层模型设计思想&#xff0c;第一层为前端页面模型设计&…

C++ primer例子1实现

问题 代码 Sales_item.h #include<iostream> #include<string> class Sales_item {public:Sales_item(){};Sales_item(std::string insid, int num, double price);friend std::istream& operator>>(std::istream& is, Sales_item& item);frie…

springboot 图形验证码 前后端分离解决方案 easy-captcha

easy-captcha介绍 easy-captcha&#xff0c;提供了Java图形验证码&#xff0c;支持gif、中文、算术等类型&#xff0c;可用于Java Web、JavaSE等项目&#xff0c;是个很好用的工具库&#xff0c;文档比较完备。 用法 添加maven依赖 <!--图形验证码--><dependency&g…

支付系统-业务账单

target&#xff1a;离开柬埔寨倒计时-210day 前言 最近不知道该写什么了&#xff0c;很多东西要写起来非常耗时间&#xff0c;写作是真的不容易呀 我们的支付系统账单有两大类&#xff0c;一个是业务账单还有一个就是资金记录&#xff0c;都是引发资金流后的资金变动表现&…

高效数据处理的前沿:【C++】、【Redis】、【人工智能】与【大数据】的深度整合

目录 1.为什么选择 C 和 Redis&#xff1f; 2.人工智能与大数据的背景 1.大数据的挑战 2.人工智能的需求 3.C 与 Redis 的完美结合 1.安装 Redis 和 Redis C 客户端 2.连接 Redis 并进行数据操作 高级数据操作 列表操作 哈希操作 4.与大数据和人工智能结合 5.实际应…

机器学习18个核心算法模型

1. 线性回归&#xff08;Linear Regression&#xff09; 用于建立自变量&#xff08;特征&#xff09;和因变量&#xff08;目标&#xff09;之间的线性关系。 核心公式&#xff1a; 简单线性回归的公式为&#xff1a; , 其中 是预测值&#xff0c; 是截距&#xff0c; 是斜…

【C语言】结构体(及位段)

你好&#xff01;感谢支持孔乙己的新作&#xff0c;本文就结构体与大家分析我的思路。 希望能大佬们多多纠正及支持 &#xff01;&#xff01;&#xff01; 个人主页&#xff1a;爱摸鱼的孔乙己-CSDN博客 欢迎 互粉哦&#x1f648;&#x1f648;&#xff01; 目录 1. 声明结构…

解锁财富新篇章:消费增值模式引领未来消费趋势

你是否曾对日常消费感到一丝单调&#xff0c;认为它仅仅是一种物质上的交换&#xff0c;而非财富增长的途径&#xff1f;那么&#xff0c;让我们为你打开一扇全新的消费之门——消费增值模式。这不仅是一种全新的消费体验&#xff0c;更是一种让你的资金在消费过程中不断积累与…