Vue中常用的数组方法.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()

news/2024/7/10 2:51:24 标签: vue

原文:https://blog.csdn.net/wang_xiao_ye/article/details/89385023?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=44e510f7-b322-419e-a755-520c3d78e373&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

.filter()

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
是否改变原数组:否
是否对空数组进行检测:否

语法:

const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr)   // [32, 33, 16, 40]
console.log(arr1)  // [32, 33, 40]

.map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
是否改变原数组:否
是否对空数组进行检测:否

语法:

const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr)   // [4, 9, 16, 25]
console.log(arr1)  // [6, 11, 18, 27]

.forEach()

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
tips: forEach()中不支持使用break(报错)和return(不能结束循环),有需要时可使用常规的for循环。

语法:

const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr)   // [4, 9, 16, 25]
console.log(arr1)  // [4, 9, 16, 25]

.find()

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。

语法:

const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 16
console.log(c)  // undefined

.findIndex()

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

语法:

const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 2
console.log(c)  // -1

.some()

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。

语法:

const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // true
console.log(c)  // false

.every()

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。

语法:

const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // false
console.log(c)  // true

http://www.niftyadmin.cn/n/1691417.html

相关文章

python按比例拆分数据集成训练跟验证集。使用glob、os.walk来获取路径进行数据集粗分。

好的工具可以让工作完成的事半功倍&#xff0c;非常完美。 1、通过代码把各种把已经分好类别的按比例划分未训练集、测试集&#xff1a; # ratio是测试集的比例 def split_train_test(path,ratio):#列出当前文件从夹下的所有文件名称&#xff0c;包括文件跟文件夹dirs os.li…

Mybatis Plus中的lambdaQueryWrapper条件构造图介绍

原文&#xff1a;https://www.cnblogs.com/javagg/p/12654305.html

Vue + Element UI 使用SheetJS解析上传的xls或xlsx文件表格

SheetJS文档&#xff1a;https://github.com/SheetJS/sheetjs#installation 中文版&#xff08;距上次更新已经挺久&#xff09;&#xff1a;https://github.com/rockboom/SheetJS-docs-zh-CN 需求一&#xff1a;客户点击上传对应格式的生产计划表格文件&#xff0c;点击确定…

yeild、keras深度通过numpy初始化variable、merge,pytorch训练可视化visdom、进行数据的深拷贝

最好的yeild解释网站&#xff1a;Python yield 使用浅析 其里面有解释怎么判断一个函数是不是generator https://www.jianshu.com/p/d09778f4e055 1、yeild的使用&#xff0c;代码例子如下&#xff1a; def yield_test(n, index):for i in range(n):# 每次迭代运行到yeild处…

System.out::print 与 System.out.print的区别

原文&#xff1a;https://blog.csdn.net/Sky786905664/article/details/80060648?utm_mediumdistribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id2630ecd1-3972-4432-9795-29d548f50de8&depth_1-utm_sourcedistribu…

opencv的初始化Mat、SVM、画多线条polylines

1、通过数组指针进行初始Mat变量&#xff1a; 例如&#xff1a; uchar arr[4][3] { { 1, 1,1 },{ 2, 2,2 },{ 3, 3,3 },{ 4,4, 4 } };cv::Mat srcData(4, 3, CV_8UC1, arr);cout << "srcData\n" << srcData << endl;另一个&#xff1a; //这里通…

精简CNN模型以ShuffleNet v2 为例子解释,移动端网络设计的需要的规则ARM、GPU上对比,各种卷积方式的演变跟介绍

参考博客&#xff1a;深度学习【57】ShuffleNet V2 --最好的&#xff0c;下面的文章有些公式显示不了。看这个链接最好 shufflenet部分网络结构 - 变形卷积核、可分离卷积&#xff1f;卷积神经网络中十大拍案叫绝的操作。 --要看 介绍 才不久才刚刚写了MobileNet v2的博客…

.sync修饰符与v-model的区别

https://segmentfault.com/a/1190000015388871 https://blog.csdn.net/liushijun_/article/details/92426854 https://www.jianshu.com/p/6b062af8cf01 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6