小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。
A journey of a thousand miles begins with single step
前言
昨晚在逛朋友圈的时候看到一位大佬发了上面的这张图片,感觉特完美的诠释了数组的这8种常方法。这里就写了一篇文章分享给大家分享一下,毕竟独乐乐不如众乐乐,话不多说,我们进入正题。
map()
作用:map()
方法返回一个新数组,数组中的元素为原始数组中元素调用函数处理后的值。
返回值:新数组
语法:
array.map(function(currentValue,index,arr), thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行这个函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
注意:
map() 方法按照原始数组元素顺序依次处理元素
map() 不会对空数组进行检测
map() 不会改变原始数组
案例:
let nums = [1, 2, 3, 4]
let newNums = []
newNums = nums.map(item => {
return item * 2
})
console.log(newNums)
// [ 2, 4, 6, 8 ]
console.log(nums)
// [1, 2, 3, 4]
复制代码
filter()
作用:filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
返回值:新数组
语法:
array.filter(function(currentValue,index,arr), thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行这个函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
注意:
filter() 不会对空数组进行检测
filter() 不会改变原始数组
案例:
// 使用filter进行数组去重
const unique = oldArr => {
return oldArr.filter((item, index, arr) => {
// 当前元素,在原始数组中的第一个索引等于当前索引值,否则返回当前元素
return arr.indexOf(item, 0) === index
})
}
var options = [5, 'vience', 5,'vience', true, 15, true]
var newArr = unique(options)
console.log(options)
// [ 5, 'vience', 5, 'vience', true, 15, true ]
console.log(newArr)
// [ 5, 'vience', true, 15 ]
复制代码
every()
作用:every()
方法用于检测数组中所有元素都符合指定条件(函数) every()
方法使用指定函数检测数组中的所有元素
如果数组中检测到一个元素不满足,则整个表达式返回 fasle
,且剩余元素不会进行检测
如果数组中所有元素都满足条件,则表达式返回 true
返回值:布尔值 true/fasle
语法:
array.every(function(currentValue,index,arr), thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行这个函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
注意:
every() 不会对空数组进行检测
every() 不会改变原始数组
案例:
let ages = [18, 20, 33, 15, 23]
let isAllAdult = ages.every(item => {
return item >= 17
})
console.log(ages)
// [ 18, 20, 33, 15, 23 ]
console.log(isAllAdult)
// false
复制代码
some()
作用:some()
方法用于检测数组中所有元素是否满足指定条件(函数) some()
方法会依次执行数组的每个元素
如果数组中有一个元素满足条件,则整个表达式返回 true
,且剩余元素不会进行检测
如果数组中没有元素都满足条件,则表达式返回 false
返回值:布尔值 true/fasle
语法:
array.some(function(currentValue,index,arr),thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行这个函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
注意:
some() 不会对空数组进行检测
some() 不会改变原始数组
案例:
let ages = [18, 20, 33, 15, 23]
let haveChildLabor = ages.some(item => {
return item < 18
})
console.log(ages)
// [ 18, 20, 33, 15, 23 ]
console.log(haveChildLabor)
// true
复制代码
fill()
作用:fill()
方法用于将一个固定值替换数组的元素
返回值:改变后的数组
语法:
array.fill(value, start, end)
复制代码
参数:
value
:填充的值 必需start
:开始填充的位置 可选end
:停止填充的位置(默认为array.length) 可选
注意:
fill() 会改变原始数组
案例:
let fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.fill("Pears", 1)
console.log(fruits)
// [ 'Banana', 'Pears', 'Pears', 'Pears' ]
复制代码
findIndex()
作用:findIndex()
方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置
findIndex()
方法为数组中的每个元素都调用一次函数执行
当数组汇总的元素在测试条件时返回true
时,findIndex()
返回符合条件的元素的索引位置,之后的值不会再调用执行函数
如果没有符合条件的元素返回 -1
返回值:返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1
。
语法:
array.findIndex(function(currentValue, index, arr), thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行的函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
案例:
let ages = [18, 20, 33, 15, 23]
let haveChildLaborIndex = ages.findIndex(item => {
return item < 18
})
console.log(ages)
// [ 18, 20, 33, 15, 23 ]
console.log(haveChildLaborIndex)
// 3
复制代码
find()
作用:find()
方法返回通过测试(函数内判断)的数组的第一个元素的值。
find()
方法为数组中的每个元素都调用一次函数执行
当数组汇总的元素在测试条件时返回true
时,find()
返回符合条件的元,之后的值不会再调用执行函数
如果没有符合条件的元素返回 undefined
返回值:返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined
。
语法:
array.find(function(currentValue, index, arr),thisValue)
复制代码
参数:
function(currentValue, index, arr)
:数组中的每个元素都会执行的函数(一般使用箭头函数) 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
thisValue
:对象作为该执行回调时使用,传递给函数,用作this
的值。可选
注意:
find() 对于空数组,函数是不会执行的。
find() 并没有改变数组的原始值。
案例:
let ages = [18, 20, 33, 15, 23]
let haveChildLaborAge = ages.find(item => {
return item < 18
})
console.log(ages)
// [ 18, 20, 33, 15, 23 ]
console.log(haveChildLaborAge)
// 15
复制代码
reduce()
作用:reduce()
方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
reduce()
作为一个高阶函数,用于函数的 compose
当数组汇总的元素在测试条件时返回true
时,find()
返回符合条件的元,之后的值不会再调用执行函数
如果没有符合条件的元素返回 undefined
返回值:返回计算结果
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
复制代码
参数:
function(total, currentValue, currentIndex, arr)
:用于执行每个数组元素的函数(一般使用箭头函数) 必需total
: 初始值,或者计算结束后的返回值 必需currentValue
:当前元素的值 必需index
:当前元素的索引值 可选arr
:当前元素属于的数组对象 可选
initialValue
:传递给函数的初始值 可选
注意:
find() 对于空数组时不会执行回调函数的。
find() 并没有改变数组的原始值。
案例:
let salarys = [18, 20, 34, 15, 23]
let totalSalary = 0
totalSalary = salarys.reduce((total, item) => {
return total + item
}, 40)
console.log(salarys)
// [ 18, 20, 33, 15, 23 ]
console.log(totalSalary)
// 150
复制代码