【Javascript】高阶函数，JSON，forEach，map，filter，reduce等高阶函数，函数绑定

李小浦

已于 2023-03-17 10:33:56 修改

阅读量787

点赞数

分类专栏： # Javascript 文章标签： javascript

于 2023-01-09 22:18:56 首次发布

本文链接：https://blog.csdn.net/partworld/article/details/128616469

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

高阶函数

把函数作为参数，或者返回一个函数，就当作高阶函数

<script>
//定义
  function forEach(ary,action/*是一个函数，表达我们要对数组每一项要做的事情*/){
    for(var i = 0 ; i < ary.length ; i++){
      action(ary[i]，i)
    }
  }
//调用
	forEach([1,2,3,4],function(item,idx){
	sum += item + idx
	})
	console.log(sum)
</script>

forEach函数，有两个参数，第一个参数是传的值，第二个参数是传的下标

<script>
  var sum = 0;/*注意这个要加分号，否则后面就是逗号表达式了*/
  [1, 2, 3, 4, 5].forEach(function (it,idx) {
    sum += it
  })
  console.log(sum)
</script>

高阶函数离不开闭包，下面这个函数就是闭包，闭包的作用域不会被销毁，返回值中还使用着外部作用域的变量，那么外部作用域就不会被销毁，什么时候还使用着外部作用域的变量呢，但返回的函数中需要使用外部作用域的变量，也就是高阶函数。

<script>
  function greaterThan(n) {
    return function (m) { return m > n }
  }
  var greaterThan10 = greaterThan(10)
  console.log(greaterThan10(11))
</script>

在这里插入图片描述

箭头函数

把function去掉，改成一个剪头=>

<script>
  // var a = function (a, b) { return a * a + b }
  var a = (a, b) => { return a * a }
    [1, 2, 3].forEach(it => {
    console.log(it)
  })
</script>

apply函数

下面这段代码的值为15，和es6中的…用法几乎相同

<script>
  var max = Math.max.apply(null,ary)
  console.log(max)
</script>

JSON

属性名中不能有tab符号，并且属性名必须用双引号括起来

{
  "photos" :[
  {
    "url":"a1.jpg",
    "width":100,
    "height":225
  },
  {
    "url":"a2.jpg",
    "width":100,
    "height":225
  },
  {
    "url":"a3.jpg",
    "width":100,
    "height":225
  }],
  "rest" : 8
}

JSON.parse(xxx)，这个可以将一段json转成js语言中的对象或者数组，json中的值没有undifined，NaN，这是一个反序列化的方法
如果一个数组或者对象想转成JSON格式，使用JSON.stringify(xxx)即可实现，这个一个序列化的方法
stringify对于undifined的值是直接略过的，正则的话直接是空对象，对于date的话返回的也不是一个date的实例

在这里插入图片描述

<script>
  function stringify(val){ 
    if(Array.isArray(val)){
      return '[' + val.map(stringify) + ']'
    }
    if(val && typeof val == 'object'){
      var result = '{'
      for(var k in val){
        var v = val[k]
        result += '"' + k +'":' + stringify(v) + ','
      }
      result = result.slice(0,-1)
      result  += '}'
      return result
    }
    if(val === null){
      return "null"
    }
    if(val === true){
      return "true"
    }
    if(val === false){
      return "false"
    }
    if(typeof val === 'string'){
      return '"'+ val +'"'
    }
    if(typeof val === 'number'){
      return '' + val
    }
  }
</script>

filter函数

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let filteredNumbers = numbers.filter(function(element) {
  return element < 5;
});
console.log(filteredNumbers); // [1, 2, 3, 4]

map函数

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function map(ary, transform) {
    var result = []
    for (var i = 0; i < ary.length; i++) {
      result.push(transform(ary[i], i, ary))
    }
    return result
  }
</script>

const fruits = ["apple", "banana", "orange"];
const uppercaseFruits = fruits.map(function(fruit) {
    return fruit.toUpperCase();
});
console.log(uppercaseFruits); // ["APPLE", "BANANA", "ORANGE"]

总结

forEach函数是对每一个数组项做一件事情，filter是根据某种条件将数组里的内容过滤，map是将数组里的每一项元素转换为另一个元素
例:ancestry.filter(it => it.born > 1930).map(it => it.name)意思是找到1930年之后出生的人的名字。

reduce函数

由一个数组求出一个单一的值，用作一个累加的作用

<script>
  function f(ary){
    //max表示负无穷大
    var max = -Infinity
    for(var i = 0;i < ary.length;i++){
      max = ary[i] > max ? ary[i] : max
    }
    return max
  }
</script>

修改成reduce函数后

<script>
  function reduce(ary, reducer, result) {
  	var start = 0
    for (var i = start; i < ary.length; i++) {
      result = reducer(result, ary[i],i,ary)
    }
    return result
  }

  reduce([1, 2, 3, 4], (max, it) => it > max ? it : max, max = -Infinity)
</script>

reduce传的参数有 [1,2,3,4].reduce((result,item,idx,ary) => {})

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  ancestry.filter(it => it.sex == 'm').map(it =>
    it.died - it.born).reduce((a, b) => a + b)
</script>

find/findIndex函数

在数组中找到第一个满足条件的值，这个条件是一个函数，[1,2,3,4,5,6,7,8].find(it => it > 3)，返回值是找到的内容
findIndex就是返回第一个满足的下标

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function find(ary,predicate){
    for(var i = 0 ;i < ary.length;i++){
      if(predicate(ary[i],i,ary)){
        return ary[i]
      }
    }
  }
</script>

every/some函数

数组中的每一项都满足条件，这个条件也是一个函数，every如果都满足就返回真，否则返回假，some是其中一个满足就返回真

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function every(ary, test) {
    for (var i = 0; i < ary.length; i++) {
      if(test(ary[i],i,ary)){
        return false
      }
    }
    return true
  }

  function some(ary,test){
    for (var i = 0; i < ary.length; i++) {
      if(test(ary[i],i,ary)){
        return true
      }
    }
    return false
  }
</script>

keyBy函数

keyBy() 函数将原数组中的对象按照其 id 属性的值作为键名，生成了一个新的对象。

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function keyBy(array, property) {
    var obj = {}
    for (var i = 0; i < array.length; i++) {
      var item = array[i]
      obj[item[property]] = item
    }
    return obj
  }
</script>

函数绑定

bind是一个函数方法，f2就相当于f的参数a绑定为了2
bind是创建了一个新的函数，该函数的this关键字被绑定到传入bind()函数的第一个参数中。

<script>
  function bind(f,...fixedArgs){
    return function(...args){
     return f(...fixedArgs,...args)
    }
  }
  function f(a,b,c){
    return a+b+c
  }
  var f2 = bind(f,3,5)
</script>

练习

把数组扁平化

<script>
  function flatten(ary) {
    ary.reduce((result, item,) => {
      if (Array.isArray(item)) {
        return result.concat(flatten(item))
      } else {
        return result.concat(item)
      }
    }, [])
  }
</script>