JavaScript让前端飞Web前端之路

JavaScript 数组纯函数

2020-05-08  本文已影响0人  Nian糕
Unsplash

1. 常用的数组 API

forEach 遍历所有元素,item 对应的是元素的值,index 对应的是元素的位置

let arr = [4, 6, 8];
arr.forEach(function(item, index){
  console.log(index, item)
})
// 0 4
// 1 6
// 2 8

every 判断所有元素是否都符合条件

let arr = [4, 6, 8];
let result = arr.every(function(item, index){
  if(item < 10) {
    return true
  }
})
console.log(result) // true

some 判断是否有至少一个元素符合条件

let arr = [4, 6, 8];
let result = arr.some(function(item, index){
  if(item < 7) {
    return true
  }
})
console.log(result) // true

sort 排序
arr.sort([compareFunction]),如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前,如果没有指明 compareFunction,那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序

let arr = [4, 3, 6, 2, 8];
let result = arr.sort(function(a, b){
  return a - b
})
console.log(result) // [ 2, 3, 4, 6, 8 ]

map 对元素重新组装,生成新数组

let arr = [4, 3, 6, 2, 8];
let result = arr.map(function(item, index){
  return item
})
console.log(result) // [ 4, 3, 6, 2, 8 ]

filter 通过某一条件过滤数组

let arr = [4, 3, 6, 2, 8];
let result = arr.filter(function(item, index){
  if(item >= 5) {
    return true
  }
})
console.log(result) // [ 6, 8 ]

2. 纯函数

纯函数有两个特点:1. 不改变原数组(没有副作用);2. 返回一个数组

除了上面提到的 forEach, every, some, filter 属于非纯函数外,我们常用的 push, pop, shift, unshift 方法也属于非纯函数

const arr = [10, 20, 30, 40]

const popRes = arr.pop()
const shiftRes = arr.shift()
const pushRes = arr.push(50) // 返回 length
const unshiftRes = arr.unshift(5) // 返回 length

console.log(popRes, arr) // 40 [ 10, 20, 30 ]
console.log(shiftRes, arr) // 10 [ 20, 30 ]
console.log(pushRes, arr) // 3 [ 20, 30, 50 ]
console.log(unshiftRes, arr) // 4 [ 5, 20, 30, 50 ]

常用的数组纯函数除了 sort, map, filter 之外,还有 concatslice

const arr = [10, 20, 30, 40]

const concatRes = arr.concat([50, 60])
const sliceRes = arr.slice()

console.log(concatRes) // [10, 20, 30, 40, 50, 60]
console.log(sliceRes) // [ 10, 20, 30, 40 ]

需要区分 slicesplice 的区别,slice 为纯函数,splice 为非纯函数

const arr = [10, 20, 30, 40, 50]

// slice 纯函数
const sliceRes1 = arr.slice(1, 4)
const sliceRes2 = arr.slice(2)
const sliceRes3 = arr.slice(-3)

console.log(sliceRes1, arr) // [ 20, 30, 40 ] [ 10, 20, 30, 40, 50 ]
console.log(sliceRes2, arr) // [ 30, 40, 50 ] [ 10, 20, 30, 40, 50 ]
console.log(sliceRes3, arr) // [ 30, 40, 50 ] [ 10, 20, 30, 40, 50 ]


// splice 非纯函数
const spliceRes1 = arr.splice(1, 2, 'a')
const spliceRes2 = arr.splice(1, 2)
const spliceRes3 = arr.splice(1, 0, 'a')
console.log(spliceRes1, arr) // [ 20, 30 ] [ 10, 'a', 50 ]
console.log(spliceRes2, arr) // [ 'a', 40 ] [ 10, 'a', 50 ]
console.log(spliceRes3, arr) // [] [ 10, 'a', 50 ]
End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

上一篇下一篇

猜你喜欢

热点阅读