includes()

// 該方法用於判斷陣列是否存在某個元素
const arr = [1, 2, 3, 4, 5]
const includeNum4 = arr.includes(4)
const includeNum7 = arr.includes(7)
console.log(includeNum4) // true
console.log(includeNum7) // false

forEach()

// 這是最常用的用來遍歷陣列的方法，需要注意的是該方法不會改變原陣列，而且沒有返回值。

const arr = [1,3,4,5,6,8]
arr.forEachI(item => {
  console.log(item)
})
 

map()

// map() 也是常用來遍歷的方法，該方法會返回一個新的陣列，但不會改變原陣列，預設返回 undefined

const arr = [1,5,3,2,66]
const newArr = arr.map(item => item + 1)

console.log(newArr) // [2,6,4,3,67]

// 如果沒有顯式跟隱式返回值的話，得到的陣列是所有元素都為 undefined 的陣列

const arr = [1,5,3]
const newArr = arr.map((item, index)=> {console.log(item, index)})

console.log(newArr)
 
// [undefined, undefined, undefined]

// 在 react 中這也常用來遍歷生成 dom 節點，相信都很熟悉

const data = [1,2,3,7]

{
  data.map((item, index) => (
    <div key={index + Math.random()}>{item}</div>
  ))
}

// map 遍歷之後儘量不用 index 作為返回值，最好用元素的 id 等

fin()

// 該方法根據檢索條件，找到陣列中第一個滿足條件的元素，若找不到則返回 undefined

const arr 
 
= [1,5,3,22,6]
const bigNum = arr.find(item => item > 6)

console.log(bigNum) // 22

findIndex()

// 該方法與find()類似根據檢索條件，不同的是該方法返回的是索引

const arr = [1, 5, 3, 22, 6 ];
const bigNumIndex = arr.findIndex(item => item > 6)

console.log(bugNumIndex) // 3

filter()

 // 該方法顧名思義，這個方法就是用來過濾的，該方法返回一個新陣列，不改變原陣列

const arr = [1, 3, 5, 22, 6]
const filterItem = arr.filter(item => item % 2 === 0)

console.log(filterItem) // [22, 6]

push()和pop()

// push() 方法在陣列末尾新增一個元素，返回陣列的長度
const arr = [1,3,5]
const pushArrLen = a.push(7)

console.log(arr) // [1,3,5,7]  
console.log(pushArrLen) //   4

// pop() 方法刪除陣列最後一個元素並返回該元素
const arr = [1,3,5]
const popArrLen = a.pop()

console.log(arr) //  [1,3]  
console.log(popArrLen) // 5

unshift()和shift()

// unshift() 方法在陣列開頭新增一個元素，返回陣列的長度
const arr = [1,3,5]
const unshiftArrLen = arr.unshift(7)

console.log(arr) // [7,1,3,5]  
console.log(unshiftArrLen) // 4

// shift() 方法刪除陣列第一個元素並返回該元素
const arr = [1,3,5]
const shiftArrLen = a.pop()

console.log(arr) // [3,5]  
console.log(shiftArrLen) // 1

concat()

// concat() 方法在一個數組後面拼接新的元素，可接收 n 個引數，引數可以是任意資料型別，如果是陣列，則將陣列跟原陣列拼接，如果是其他資料型別，則將該元素新增到原陣列後面

// 該方法不改變原陣列，會返回拼接好的新陣列，因此可以 執行 鏈式操作

const arr = [1,3,5]

const concatArr = arr.concat(2,4).concat(6,7,8).concat('hello world').concat(() => {}, [9,10,[11,12]])

console.log(arr) // [1,3,5]
console.log(concatArr) // [1, 3, 5, 2, 4, 6, 7, 8, 'hello world', () => {}, 9, 10, [11, 12]]

reverse()

// reverse() 方法將一個數組倒置，該方法返回新的陣列，且會改變原陣列

const arr = [1, 2, 3, 4]
const reverseArr = arr.reverse()

console.log(arr) // [4, 3, 2, 1] 
console.log(reverseArr) // [4, 3, 2, 1]

sort()

// sort() 方法用於將陣列排序，可以接收一個函式作為引數，當不傳遞引數時，sort 將按照內部定義的生序的規則進行排序，該方法返回排序後的陣列，原陣列將被改變。

const arr = [[() => {}], [12], '4', [11], 123, 'hello', n => n + 1, () => {}, 1, []]

const sortArr = a.sort()

console.log(sortArr) // [[], () => {}, [() => {}], 1, [11], [12], 123, '4', n => n + 1, 'hello']

// 預設的排序演算法是呼叫每個陣列項的 toString() 轉型方法，比較得到的字串的編碼大小，按照最小值在前面，最大值在後面的方式排序。也就是正序，與 

sortArr = arr.sort((c, d) => c - d)

// 等價，倒序為

sortArr = arr.sort((c, d) => d - c)

// 舉例：

const arr = [
  { id: 4, name: 'michael' },
  { id: 2, name: 'kangkang' },
  { id: 3, name: 'meria' },
  { id: 1, name: 'jane' },
]

const newArr = arr.sort((a, b) => b.id - a.id)

console.log(newArr) // [{ id: 4, name: 'michael' },{ id: 3, name: 'meria' },{ id: 2, name: 'kangkang' },{ id: 1, name: 'jane' }]

join()和split()

// join() 方法將陣列的元素組起一個字串，以separator為分隔符，省略的話則用預設用逗號為分隔符，該方法只接收一個引數：即分隔符，該方法返回拼接後的字串，不改變原陣列。

const arr = [1, 3, 'hello']

const newArr = arr.join('-')

console.log(newArr) // '1-3-hello'

// 通過join()方法可以實現重複字串，只需傳入字串以及重複的次數，就能返回重複後的字串

const repeatStr = (str, n) => new Array(n).join(str)

const newStr = repeatStr('hi', 3)

console.log(newStr) // 'hihihi'


// split() 方法將一個字串分割為陣列，接收一個引數，以該引數為分割符

const str = 'charming javascript'

const strArr1 = str.split('')
const strArr2 = str.split('j')
      
console.log(strArr1) // ["c", "h", "a", "r", "m", "i", "n", "g", " ", "j", "a", "v", "a", "s", "c", "r", "i", "p", "t"]
console.log(strArr2) //  ['charming ', 'avascript']

every()和some()

// every() 方法接收一個函式作為引數，判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。
const arr = [1,5,2,4,11]
const isBig = arr.every(item => item > 5)
const isSmall = arr.every(item => item < 20)
console.log(isBig) //  true 
console.log(isSmall) // false

// some() 方法接收一個函式作為引數，陣列中只要有一項滿足條件，則返回 true，如果都不滿足條件，則返回 false
const arr = [
    { price: 10, name: 'apple' },
    { price: 20, name: 'orange' },
    { price: 15, name: 'banana' }
]
const isCheap = arr.some(item => item.price < 15)
const isExpensive = arr.some(item => item.price > 20)
console.log(isCheap) // true 
console.log(isExpensive) // false

indexOf()和lastIndexOf()

// 兩個方法都用來查詢索引，接收兩個引數，第一個引數是要查詢的元素，第二個引數是查詢的起始位置(預設第一項和最後一項的位置)。都會返回該元素的正索引，不同的是當有第二個引數時，indexOf() 只查詢該元素之後的元素，lastIndexOf() 只查詢該元素之前的元素。若找到該元素則返回索引，若找不到則返回 -1

const arr = [1, 3, 5, 7, 9]
const index = arr.indexOf(7, 0)
const lastIndex = arr.lastIndexOf(7, 2)

console.log(index) // 3
console.log(lastIndex) // -1

slice()

// splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。該方法會改變原始陣列。

splice(index, howmany, item1, item2...itemx)
const arr = [1, 2, 3, 4, 5]
const spliceArr = arr.splice(2, 3, 6, 7, 8)

console.log(arr) // [1, 2, 6, 7, 8]  
console.log(spliceArr) // [3, 4, 5]

reduce()

// reduce() 方法很強大
// 語法arr.reduce(callback, initialValue)
// reduce 為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或從未被賦值的元素，接受四個引數：初始值（或者上一次回撥函式的返回值），當前元素值，當前索引，呼叫 reduce 的陣列。也就是：
arr.reduce((prev, current, index, array) => {}, initialValue)
// 下面看一些 reduce 的應用
// 陣列求和：
const arr = [1,2,3,4,5]
const sum = arr.reduce((prev, current) => prev + current, 0)        console.log(sum) // 15

// 陣列求積：
const arr = [1,2,3,4,5]
const pow = arr.reduce((prev, current) => prev * current, 1)        console.log(pow) // 120

// 陣列去重：
const arr = [1,3,4,2,5,3,4]
const slimArr = arr.reduce((prev, current) => {
  if(prev.includes(current)) {
    return prev
  } else {
    return prev.concat(current)
  }
}, [])

// 求字串的位元組長度：
const str = 'charming javascript'
const byteLen = str.split('').map(item => item.charCodeAt() > 255 ? 2 : 1).reduce((prev, current) => prev + current, 0)

// 求物件裡的數乘積再求和：
const fruitArr = [
 { name: 'apple', price: 10, quantity: 2 },
 { name: 'orange', price: 15, quantity: 4 },
 { name: 'banana', price: 5, quantity: 3 },
]
const totalPrice = fruitArr.reduce((prev, current) => {
 return prev + current.price * current.quantity
}, 0)

有任何補充請聯絡我及時新增