Vue中常⽤的数组⽅法.filter（）、.map（）、.forEach（）、.find（。。。Vue中常⽤的数组⽅法
.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()、.fill()
本⽂仅为⾃⼰在项⽬中经常⽤到的⼀些数组⽅法的使⽤，以便随时查看。
.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]
filter过滤对象数组
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
.
fill()
fill() ⽅法⽤于将⼀个固定值替换数组的元素。
注意： fill() 不会对空数组进⾏填充。
注意： fill() 会改变原始数组。
语法：
const arr1= [4, 9, 16, 25];
const b = arr1.fill(100);
const arr2= [4, 9, 16, 25];
const c = arr2.fill(100, 2, 4)  // 2为开始填充的起始位置，4为结束位置（不包含）const arr3= [];
const d = arr3.fill(100);
console.log(arr1)  // [100, 100, 100, 100]
console.log(b)  // [100, 100, 100, 100]
console.log(arr2)  // [4, 9, 100, 100]
console.log(c)  // [4, 9, 100, 100]
console.log(arr3)  // []
console.log(d)  // []

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。