陣列一些常用方法
阿新 • • 發佈:2022-03-29
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);