1. 程式人生 > 其它 >陣列一些常用方法

陣列一些常用方法

const arr = [1, 2, 3]
// map迴圈 當item是簡單資料型別時,不會修改原陣列,複雜型別時會修改
const newArr = arr.map(item => item*2)
console.log(arr, newArr);

const arr1 = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr1 = arr1.map(item => {
  item.age = 2
  return item
})
console.log(arr1, newArr1);

// some迴圈陣列中是否有這個值, 返回布林值
const arr2 = [1, 2, 3, 4]
const newArr2 = arr2.some(item => item === 2)
console.log(arr2, newArr2);

const arr3 = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr3 = arr3.some(item => item.age === 19)
console.log(arr3, newArr3);

// filter迴圈 過濾符合條件  返回新陣列 若不符合則返回空陣列
const arr4 = [1, 2, 3, 4]
const newArr4 = arr4.filter(item => item>=4);
console.log(arr4, newArr4)

// find迴圈   返回符合條件的那一項 剩餘不在繼續查詢  如果不符合返回undefined
const arr5 = [1, 2, 3, 4]
const newArr5 = arr5.find(item => item > 2);
console.log(arr5, newArr5)

const arr6 = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr6 = arr6.find(item => item.name === '李四');
console.log(arr6, newArr6)

// forEach 迴圈 和for迴圈差不多

// includes  返回布林值  判斷是否包含
const arr7 = [1, 2, 3, 4]
const newArr7 = arr7.includes(2);
console.log(arr7, newArr7)

const str = 'hello word'
const newStr = str.includes('word')
console.log(str, newStr);

// 陣列的的常用操作
const arr8 = [1, 2, 3, 4]
// 前面新增 返回陣列長度
const newArr8 = arr8.unshift(9)
// 前面刪除 返回被刪除的元素
const newArr8_ = arr8.shift()
// 想後面新增  返回陣列的長度
const newArr8__ = arr8.push(5)
// 後面刪除 返回被刪除的元素
const newArr8___ = arr8.pop()

console.log(arr8,newArr8,newArr8_,newArr8__, newArr8___)

// splice陣列擷取、替換 會改變原陣列  返回被擷取的元素  splice(start, n) start開始索引位置, n需要擷取的個數 若不填寫n,則表示從start索引位置開始擷取,直到結束
const arr9 = [1, 2, 3, 4]
const newArr9 = arr9.splice(1)
console.log(arr9, newArr9);
// 替換(本質是先刪除,在原索引位置新增)
const arr9_ = [1, 2, 3, 4]
const newArr9_ = arr9_.splice(1,1,5)
console.log(arr9_, newArr9_);

// slice陣列擷取 不會改變原陣列  返回被擷取的元素  slice(start, end)  start開始索引位置  end結束索引的位置 注意:[start, end)區間
const arr10 = [1, 2, 3, 4]
const newArr10 = arr10.slice(1, 3)
console.log(arr10, newArr10);

// every 用來檢測陣列是否每項都符合元素,返回布林值  不會修改原陣列  只要有一項不滿足則返回fasle,剩餘的不檢測
const arr11 = [1, 2, 3, 4]
const newArr11 = arr11.every(item => item > 2)
console.log(arr11, newArr11);

const arr11_ = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr11_ = arr11_.every(item => item.name)
console.log(arr11_, newArr11_);

// sort 排序 會修改原陣列 b-a 降序  a-b升序
const arr12 = [1, 3, 2, 5, 4]
const newArr12 = arr12.sort((a,b) => b - a)
console.log(arr12, newArr12);

// 根據某屬性排序
const arr12_ = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr12_ = arr12_.sort((a,b) => b.age - a.age)
console.log(arr12_, newArr12_);

// concat 數組合並 es6拓展運算子 不會修改原陣列  返回合併後的陣列
const arr13 = [1, 3, 2, 5, 4]
const newArr13 = arr13.concat([9,8,7,6])
console.log(arr13, newArr13);

const arr13_ = [1, 3, 2, 5, 4]
const newArr13_ = [...arr13_,...[9,8,7,6]]
console.log(arr13_, newArr13_);

const arr13__ = [{name: '李四', age: 18},{name:'張三', age: 19}]
const newArr13__ = arr13__.concat({name:'王五', age: 20})
console.log(arr13__, newArr13__);

// join 陣列轉換字串  返回拼接好的字串
const arr14 = [1, 3, 2, 5, 4]
const newArr14 = arr14.join('-')
console.log(arr14, newArr14);

// split 將字串轉為陣列 
const str1 = '1,2,3,4,5'
const newstr1 = str1.split(',') // newstr1:['1', '2', '3', '4', '5']
const newstr2 = str1.split('-') // newstr2:['1,2,3,4,5'] // 只有一項'1,2,3,4,5'
console.log(str1, newstr1, newstr2);

// toString、toLocalString 也可以將陣列轉化為字串  
const arr15 = [1, 3, 2, 5, 4]
const newArr15 = arr15.toString() // 只有一項'1,2,3,4,5'
const newArr15_ = arr15.toLocaleString() // 只有一項'1,2,3,4,5'
console.log(arr15, newArr15, newArr15_);
// 多維陣列也能轉化
const arr16 = [1,[2,3],[4,5],[6,[7,8,[9]]]]
const newArr16 = arr16.toString() // '1,2,3,4,5,6,7,8,9'
const newArr16_ = arr16.toLocaleString() // '1,2,3,4,5,6,7,8,9'
console.log(arr16, newArr16, newArr16_);

const num = 123456
const newNum = num.toString()
const newNum1 = num.toLocaleString()
console.log(num, newNum, newNum1);
// 區別:1:當是4位數以上的時候 toLocaleString會有千位化 toString不會。2:toLocaleString能對時間格式化,toString不會。

// flat 將二維陣列轉化為一維陣列,多維陣列需要寫成函式形式
const arr17 = [1,[2,3],[4,5],[6]]
const newArr17 = arr17.flat()
console.log(arr17, newArr17);

// indexOf 查詢值所在的位置 若找到則返回索引  若沒有找到返回-1 indexOf(start,index) start:需要找的值, index:從哪個索引開始找。預設0。    若找到,則剩餘不在查詢
const arr18 = [1, 3, 2, 5, 4]
const newArr18 = arr18.indexOf(2, 0)
console.log(arr18, newArr18);
// 若是字串
const str2 = 'hello word'
const newStr2 = str2.indexOf('o', 2)
console.log(str2, newStr2);

// findIndex 查找出第一個符合條件中的陣列元素,所在的索引位置 找不到則返回-1  若找到,則剩餘不在繼續查詢
const arr19 = [1, 3, 2, 5, 4]
const newArr19 = arr19.findIndex(item => item > 2)
console.log(arr19, newArr19);