JavaScript學(xué)習(xí)筆記-Array相關(guān)方法的使用

sort()方法的使用

在默認(rèn)情況下，sort()是按升序排列數(shù)組钝尸，sort()方法會調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法括享，比較得到的字符串，以確定如何排序珍促。即使數(shù)組中的每一項(xiàng)都是數(shù)值,sort()方法比較的也是字符串铃辖。

var values = [0, 1, 5, 10, 15]
values.sort()
console.log(values) // [0, 1, 10, 15, 5]
// 例子中值得順序本身沒有問題，調(diào)用sort()方法也會根據(jù)字符串的結(jié)果改變原來的順序猪叙。
// 數(shù)值5雖然小于10娇斩，但在進(jìn)行字符串比較的時(shí)候"10" 在 "5" 的前面，所以數(shù)組的順序就被修改了

sort()方法可以接收一個(gè)函數(shù)作為參數(shù)穴翩，我們自己來指定如何進(jìn)行排序
比較函數(shù)接收2個(gè)參數(shù)犬第，如果第1個(gè)參數(shù)應(yīng)該位于第2個(gè)參數(shù)之前返回-1，如果2個(gè)參數(shù)相等返回0藏否，如果第1個(gè)參數(shù)應(yīng)該位于第2個(gè)參數(shù)之后返回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]

需求：根據(jù)年齡大小充包，對對象數(shù)組進(jìn)行升序排列

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()方法的作用：可以給數(shù)組刪除元素副签、替換元素、插入元素基矮。該方法可以傳遞3個(gè)參數(shù)淆储，傳遞參數(shù)的不同可以達(dá)到不同的效果
刪除元素：傳入2個(gè)參數(shù)，splice(起始位置的索引家浇，要?jiǎng)h除的元素個(gè)數(shù))本砰。

const names = ["姚明", "王治郅", "易建聯(lián)", "科比", "詹姆斯"]
names.splice(1, 2)
console.log(names) // ["姚明", "科比", "詹姆斯"]

替換元素：傳入3個(gè)參數(shù)，splice(起始位置的索引, 要替換的元素個(gè)數(shù), 要替換的元素（可以傳多個(gè)）)
這里注意钢悲，第3個(gè)參數(shù)是一個(gè)可變參數(shù)点额，可以傳入多個(gè)值。

const names = ["姚明", "王治郅", "易建聯(lián)", "科比", "詹姆斯"]
names.splice(1, 2, "霍華德", "安東尼")
console.log(names) // ["姚明", "霍華德", "安東尼", "科比", "詹姆斯"]

插入元素莺琳，傳入3個(gè)參數(shù)还棱，splice(起始位置的索引，0惭等，要插入的元素（可以傳多個(gè)）)
這里注意：第2個(gè)參數(shù)傳0

const names = ["姚明", "王治郅", "易建聯(lián)", "科比", "詹姆斯"]
names.splice(1, 0, "霍華德", "安東尼")
console.log(names) // ["姚明", "霍華德", "安東尼", "王治郅", "易建聯(lián)", "科比", "詹姆斯"]

高階函數(shù)的使用

定義3個(gè)需求：

需求1：定義一個(gè)數(shù)字?jǐn)?shù)組nums珍手，找出數(shù)組中數(shù)值小于100的數(shù)字，放入一個(gè)新數(shù)組中newNums

需求2：將新數(shù)組(newNums)中的數(shù)字都乘以2，放入新的數(shù)組doubleNums

需求3：將doubleNums中的數(shù)字進(jìn)行匯總求和

傳統(tǒng)做法(使用for循環(huán))

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

使用數(shù)組的高階函數(shù)
filter()
- filter()函數(shù)接收一個(gè)回調(diào)函數(shù)作為參數(shù)琳要，該回調(diào)函數(shù)接收一個(gè)參數(shù)寡具，這個(gè)參數(shù)就是遍歷數(shù)組時(shí)的每一個(gè)元素
- 回調(diào)函數(shù)必須要返回一個(gè)boolean類型
- 如果返回的是true，那么就將傳遞過來的參數(shù)稚补，加入到一個(gè)新的數(shù)組中
- 如果返回的是false童叠，那么就將傳遞過來的參數(shù)忽略掉
- 當(dāng)filter()函數(shù)執(zhí)行完畢后，會返回過濾后的新的數(shù)組课幕。

// 使用filter()函數(shù)改寫需求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()函數(shù)接收一個(gè)回調(diào)函數(shù)作為參數(shù)拯钻，該回調(diào)函數(shù)同樣接收一個(gè)參數(shù)，這個(gè)參數(shù)是遍歷數(shù)組時(shí)的每一個(gè)元素
- 回調(diào)函數(shù)同樣有一個(gè)返回值撰豺，map()函數(shù)會將回調(diào)函數(shù)的返回值放入到一個(gè)新的數(shù)組
- 當(dāng)map()函數(shù)執(zhí)行完畢之后粪般，將新的數(shù)組作為返回值返回

// 使用map()函數(shù)改寫需求2
const doubleNums = newNums.map((n) => {
  return n * 2
})
console.log(doubleNums) // [20, 40, 60, 80]

reduce()：可以用來匯總結(jié)果
- reduce()函數(shù)接收2個(gè)參數(shù)，第1個(gè)參數(shù)接收一個(gè)回調(diào)函數(shù)作為參數(shù)污桦，該回調(diào)函數(shù)接收2個(gè)參數(shù)亩歹，該回調(diào)函數(shù)執(zhí)行的次數(shù)就是遍歷的次數(shù)
- 回調(diào)函數(shù)的第1個(gè)參數(shù)，上一次遍歷匯總的結(jié)果
- 回調(diào)函數(shù)的第2個(gè)參數(shù)凡橱，每次遍歷的數(shù)組的元素
- 第2個(gè)參數(shù)是匯總的初始值
- reduce()函數(shù)執(zhí)行完畢后小作，返回匯總后的值

// 使用reduce()函數(shù)改寫需求3
const total = doubleNums.reduce((previousValue, n) => {
  return previousValue + n
}, 0)
console.log(total)  // 200

通過使用高階函數(shù)，可以進(jìn)行鏈?zhǔn)秸{(diào)用稼钩，將三個(gè)函數(shù)連在一起顾稀，完成上面的三個(gè)需求，這種編程范式就是函數(shù)式編程

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

持續(xù)更新~~~