JavaScript 数组纯函数

作者: Nian糕 | 来源:发表于2020-05-08 16:58 被阅读0次
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

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

相关文章

  • JavaScript 数组纯函数

    1. 常用的数组 API forEach 遍历所有元素,item 对应的是元素的值,index 对应的是元素的位置...

  • React 常见 hook

    React 创建组件的方式: 类组件 函数式组件a. 纯函数组件没有状态b. 纯函数组件没有生命周期c. 纯函数组...

  • 5.纯函数

    理解JavaScript纯函数 函数式编程中有一个非常重要的概念叫纯函数,JavaScript符合函数式编程的范式...

  • JS纯函数 柯里化函数 组合函数

    1.纯函数(Pure Function) 函数式编程中有一个非常重要的概念叫做纯函数,javascript符合函数...

  • JavaScript中对象数组函数区别及区分

    一、对象、数组、函数区别  javaScript中对象包括狭义对象(object)、数组(array)、函数(fu...

  • 2018-04-22

    javascript基础 一.函数的arguments 伪数组:像数组,但不是数组 可以动态添加参数 二.函数的其...

  • 实战+源码 带你快速掌握React Hooks

    大纲 ? 函数式编程? 什么是纯函数? 什么是副作用(Effect)? 为什么要使用纯函数 ? React函数组件...

  • JavaScript - 纯函数

    纯函数,一个通常出现在函数式编程中的概念。 一. 纯函数的特点是什么? 1. 纯函数结果只依赖于参数,与函数外部变...

  • JavaScript 纯函数

    你可能听过一个术语叫纯函数,它是一个非常重要的概念,我们下面将来介绍它。 两项标准 纯函数必须满足两个条件: 对于...

  • 箭头函数和JavaScript中map函数

    JavaScript的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很...

网友评论

    本文标题:JavaScript 数组纯函数

    本文链接:https://www.haomeiwen.com/subject/mebfnhtx.html