美文网首页
JavaScript学习笔记-Array相关方法的使用

JavaScript学习笔记-Array相关方法的使用

作者: LazyLoad | 来源:发表于2020-09-22 09:27 被阅读0次

    sort()方法的使用

    • 在默认情况下,sort()是按升序排列数组,sort()方法会调用每个数组项的toString()方法,比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串。
    var values = [0, 1, 5, 10, 15]
    values.sort()
    console.log(values) // [0, 1, 10, 15, 5]
    // 例子中值得顺序本身没有问题,调用sort()方法也会根据字符串的结果改变原来的顺序。
    // 数值5虽然小于10,但在进行字符串比较的时候"10" 在 "5" 的前面,所以数组的顺序就被修改了
    
    • sort()方法可以接收一个函数作为参数,我们自己来指定如何进行排序
    • 比较函数接收2个参数,如果第1个参数应该位于第2个参数之前返回-1,如果2个参数相等返回0,如果第1个参数应该位于第2个参数之后返回1。
    var values = [0, 1, 5, 10, 15]
    values.sort((value1, value2) => {
      if (value1 < value2) {
        return -1
      } else if (value1 > value2) {
        return 1
      } else {
        return 0
      }
    })
    console.log(values)
    // [0, 1, 5, 10, 15]
    
    • 需求:根据年龄大小,对对象数组进行升序排列
    var objs = [
      {name: "Kobe", age: 42},
      {name: "YaoMing", age: 40},
      {name: "Lebron", age: 36}
    ]
    
    objs.sort((obj1, obj2) => {
      return obj1.age - obj2.age
    })
    
    console.log(objs)
    // 0: {name: "Lebron", age: 36}
    // 1: {name: "YaoMing", age: 40}
    // 2: {name: "Kobe", age: 42}
    

    splice()方法的使用

    • splice()方法的作用:可以给数组删除元素、替换元素、插入元素。该方法可以传递3个参数,传递参数的不同可以达到不同的效果

    • 删除元素:传入2个参数splice(起始位置的索引,要删除的元素个数)

    const names = ["姚明", "王治郅", "易建联", "科比", "詹姆斯"]
    names.splice(1, 2)
    console.log(names) // ["姚明", "科比", "詹姆斯"]
    
    • 替换元素:传入3个参数splice(起始位置的索引, 要替换的元素个数, 要替换的元素(可以传多个))
    • 这里注意,第3个参数是一个可变参数,可以传入多个值
    const names = ["姚明", "王治郅", "易建联", "科比", "詹姆斯"]
    names.splice(1, 2, "霍华德", "安东尼")
    console.log(names) // ["姚明", "霍华德", "安东尼", "科比", "詹姆斯"]
    
    • 插入元素,传入3个参数splice(起始位置的索引,0,要插入的元素(可以传多个))
    • 这里注意:第2个参数传0
    const names = ["姚明", "王治郅", "易建联", "科比", "詹姆斯"]
    names.splice(1, 0, "霍华德", "安东尼")
    console.log(names) // ["姚明", "霍华德", "安东尼", "王治郅", "易建联", "科比", "詹姆斯"]
    

    高阶函数的使用

    定义3个需求:

    需求1:定义一个数字数组nums,找出数组中数值小于100的数字,放入一个新数组中newNums

    需求2:将新数组(newNums)中的数字都乘以2,放入新的数组doubleNums

    需求3:将doubleNums中的数字进行汇总求和

    • 传统做法(使用for循环)
    const nums = [10, 20, 30, 289, 2332, 40]
    const newNums = []
    for (let n of nums) {
      if (n < 100) {
        newNums.push(n)
      }
    }
    console.log(newNums) // [10, 20, 30, 40]
    
    const doubleNums = []
    for (let n of newNums) {
      doubleNums.push(n * 2)
    }
    console.log(doubleNums) // [20, 40, 60, 80]
    
    let total = 0
    for (let n of doubleNums) {
      total += n
    }
    console.log(total) // 200
    
    • 使用数组的高阶函数
    • filter()
      • filter()函数接收一个回调函数作为参数,该回调函数接收一个参数,这个参数就是遍历数组时的每一个元素
      • 回调函数必须要返回一个boolean类型
      • 如果返回的是true,那么就将传递过来的参数,加入到一个新的数组中
      • 如果返回的是false,那么就将传递过来的参数忽略掉
      • filter()函数执行完毕后,会返回过滤后的新的数组
    // 使用filter()函数改写需求1
    const nums = [10, 20, 30, 289, 2332, 40]
    const newNums = nums.filter((n) => {
      return n < 100
    })
    console.log(newNums); // [10, 20, 30, 40]
    
    • map()
      • map()函数接收一个回调函数作为参数,该回调函数同样接收一个参数,这个参数是遍历数组时的每一个元素
      • 回调函数同样有一个返回值,map()函数会将回调函数的返回值放入到一个新的数组
      • map()函数执行完毕之后,将新的数组作为返回值返回
    // 使用map()函数改写需求2
    const doubleNums = newNums.map((n) => {
      return n * 2
    })
    console.log(doubleNums) // [20, 40, 60, 80]
    
    • reduce():可以用来汇总结果
      • reduce()函数接收2个参数,第1个参数接收一个回调函数作为参数,该回调函数接收2个参数,该回调函数执行的次数就是遍历的次数
      • 回调函数的第1个参数,上一次遍历汇总的结果
      • 回调函数的第2个参数,每次遍历的数组的元素
      • 第2个参数是汇总的初始值
      • reduce()函数执行完毕后,返回汇总后的值
    // 使用reduce()函数改写需求3
    const total = doubleNums.reduce((previousValue, n) => {
      return previousValue + n
    }, 0)
    console.log(total)  // 200
    
    • 通过使用高阶函数,可以进行链式调用,将三个函数连在一起,完成上面的三个需求,这种编程范式就是函数式编程
    const nums = [10, 20, 30, 289, 2332, 40]
    const total = nums.filter((n) => {
      return n < 100
    }).map((n) => {
      return n * 2
    }).reduce((previousValue, n) => {
      return previousValue + n
    }, 0)
    console.log(total) // 200
    

    持续更新~~~

    相关文章

      网友评论

          本文标题:JavaScript学习笔记-Array相关方法的使用

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