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

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

持续更新~~~