专栏首页Nian糕的私人厨房JavaScript 数组纯函数

JavaScript 数组纯函数

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ECMAScript6 数组去重

    数组去重这个问题无论是在面试当中,还是实际项目中,出现的频率都挺多的,而我们以往的解决方式,就是通过新建一个空的数组,通过 indexOf 方法进行新数组和原数...

    Nian糕
  • CSS 布局_3 Position元素定位

    我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

    Nian糕
  • jQuery 常用方法

    jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 ...

    Nian糕
  • 前端面试题解密:经典算法之冒泡算法(ES6版)及优化

    随着前端的飞速发展,前端业务开发给前端工程师提出了更高的要求,因而算法题也越来越高频次的出现在前端面试中。有很多的小伙伴找胡哥苦诉,在前端实际开发中(除了涉及游...

    胡哥有话说
  • 数组中的方法

    河湾欢儿
  • Python实现6种排序算法,快排只有6行?

    小萌哥
  • JavaScript常用排序算法

    3、对”基准”左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

    FinGet
  • 【追求极致】我是如何把easy级别的算法题做成hard级别的。

    2、如果你懂某些算法思想,这道题很简单,如果不懂,那么这道题顿时很难,例如有些需要dp来处理的。

    帅地
  • [-算法篇-] 排序

    张风捷特烈
  • 数组中重复的数

    先给数组排序,然后再遍历一遍有序数组,依次比较相邻元素,就很容易能找出数组中重复的值。使用快排排序的话时间复杂度为 O(nlogn) 。

    谭小谭

扫码关注云+社区

领取腾讯云代金券