將指定的元素添加到數組的末尾，并返回新的數組長度

const arr = ['春', '夏', '秋']console.log('arr', arr.push('冬'), arr)

?1.2 pop

從數組中刪除最后一個元素，并返回該元素的值

const arr = ['春', '夏', '秋']console.log('arr新的長度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)

1.3 shift

從數組中刪除第一個元素，并返回該元素的值

const arr = ['春', '夏', '秋']console.log('arr新的長度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)console.log('shift方法', arr.shift(), 'arr', arr)

?1.4 unshift

向數組首位添加一個或多個元素，并返回新的數組長度

const arr = ['春', '夏', '秋']console.log('arr新的長度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)console.log('shift方法', arr.shift(), 'arr', arr)console.log('unshift', arr.unshift('春'), 'arr', arr)console.log('unshift', arr.unshift('四季', '天氣'), 'arr', arr)

?1.5 concat

合并多個數組或值，返回一個新的數組

console.log('concat會返回新的值不改變原數據', arr.concat('數據拼接'), 'arr', arr)

?1.6 slice

截取數組的一部分，返回一個新的數組

const arr1 = ['0', '1', '2', '3', '4']const arr2 = ['0', '1', '2', '3', '4']console.log('slice的使用', arr1.slice(2), '截一個而且只截下標為4', arr2.slice((1, 4)))

1.7 splice

刪除、替換或添加數組的元素，并返回被刪除的元素

const name = ['前', '端', '百', '草', '閣']name.splice(2, 0, '你好') // 從第三個元素開始刪，刪0個，并且在第三個元素前加上 '你好'console.log('name', name)

1.8 fliter

過濾數組中的元素，返回一個新的數組)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']const result = words.filter(word => word.length > 6) // 循環篩選出 長度大于6的 并返回一個新的數組console.log(result) //  ["exuberant", "destruction", "present"]

1.9 map

對數組中的每個元素進行操作，返回一個新的數組

const array1 = [1, 4, 9, 16]const map1 = array1.map(item => item * 2) // 循環進行一個每一項都乘以2的操作 并返回一個 新數組console.log(map1) // [2, 8, 18, 32]

?1.10 sort

對數組進行排序

const arr3 = [1000,10,1,4,3,2,77]const arr4 = [1000,10,1,4,3,2,77]arr3.sort((x,y) => x - y) // 正序console.log(arr3) //  [1, 2, 3, 4, 10, 77, 1000]arr4.sort((x,y) => y - x) // 倒序console.log(arr4) // [1000, 77, 10, 4, 3, 2, 1]

?1.11 reverse

翻轉數組中的元素

const arr5 = [1, 2, 3, 4, 5]arr5.reverse()console.log(arr5) //  [5, 4, 3, 2, 1]

?1.12 indexOf

查找數組中指定元素的索引

const arr6 = [1, 2, 3, 4, 5, 3]const num = arr6.indexOf(3) // 查找 3 出現的索引 只能查找到首次出現的索引console.log(num) // 2const num1 = arr6.indexOf(6) // 查找 6 出現的索引 找不到為-1console.log(num1) // -1

?1.13 find

查找數組中符合條件的第一個元素

const array2 = [5, 12, 8, 130, 44]const found = array2.find(item => item > 10) // 找到第一個大于10的元素console.log(found) // 12

?1.14 findIndex

查找數組中符合條件的第一個元素的索引

const array3 = [5, 12, 8, 130, 44]console.log('findIndex', array3.findIndex(i => i > 10))

?1.15 includes

判斷一個數組是否包含一個指定的值

const array4 = [1, 2, 3, 4, 5]console.log('includes', array4.includes(4))

?1.16 every

判斷數組內的所有元素是否都能通過指定函數的測試

const array5 = [1, 30, 39, 29, 10, 13];const res = array5.every(item => item > 0) // 判斷數組中每一個元素是否都大于0console.log(res); // trueconst res2 = array5.every(item => item > 30) // 判斷數組中每一個元素是否都大于30console.log(res2); 

?1.17 some

判斷數組中是否至少有一個元素通過了指定函數的測試

const array5 = [1, 30, 39, 29, 10, 13];const res = array5.some(item => item > 0) // 判斷數組中每一個元素是否都大于0console.log(res); // trueconst res2 = array5.some(item => item > 100) // 判斷數組中每一個元素是否都大于30console.log(res2); // false

1.18 join

將一個數組的所有元素連接成一個字符串并返回這個字符串

const elements = ['Fire', 'Air', 'Water'];const res6 = elements.join() // 將數組中每一個元素用逗號連接console.log(res6); // Fire,Air,Waterconst res4 = elements.join('-') // 將數組中每一個元素用-連接console.log(res4); // Fire-Air-Waterconst res5 = elements.join('') // 將數組中每一個元素用''連接console.log(res5); // FireAirWater

?1.19 reduce

計算數組所有元素的總和

const array10 = [1, 2, 3, 4];const initialValue = 0;// 0+1+2+3+4const sumWithInitial = array10.reduce((accumulator, currentValue) => accumulator + currentValue,initialValue);// initialValue 是初始值console.log(sumWithInitial); // 10

?1.20 forEach

數組循環遍歷

const array11 = ['春', '夏', '秋', '冬'];array11.forEach(element => console.log(element));

1.21 fill?

此方法通過用靜態值填充數組來更改原始數組。你可以將所有元素更改為靜態或少數選定元素。

const arr = ['1', '2', '3', '4']console.log('fill的使用', arr.fill('0', 1, 3)) // ['1', '0', '0', '4']const arr1 = ['1', '2', '3', '4']console.log('fill的使用', arr1.fill('0')) // ['0', '0', '0', '0']

二、 將平鋪的數組結構轉換為tree型數組結構

這里先給出平鋪的數組結構，其中pid是他的父親，id是他自己

[{"id": "604e21feb205b95968e13129","pid": "","name": "總裁辦","code": "1001","manager": "管理員","introduce": "公司戰略部","createTime": "2021-03-14 22:47:25"},{"id": "604e222bb205b95968e1312a","pid": "","name": "行政部","code": "XZB","manager": "管理員","introduce": "行政部","createTime": "2021-03-14 22:47:25"},{"id": "604e223fb205b95968e1312b","pid": "","name": "人事部","code": "RSB","manager": "管理員","introduce": "人事部","createTime": "2021-03-14 22:47:25"},{"id": "604e2251b205b95968e1312c","pid": "","name": "財務部","code": "CWB","manager": "管理員","introduce": "財務部","createTime": "2021-03-14 22:47:25"},{"id": "604e2262b205b95968e1312d","pid": "604e2251b205b95968e1312c","name": "財務核算部","code": "CWHSB","manager": "管理員","introduce": "財務核算部","createTime": "2021-03-14 22:47:25"},{"id": "604e227db205b95968e1312e","pid": "604e2251b205b95968e1312c","name": "稅務管理部","code": "SWGLN","manager": "管理員","introduce": "稅務管理部","createTime": "2021-03-14 22:47:25"},{"id": "604e2297b205b95968e1312f","pid": "604e2251b205b95968e1312c","name": "薪資管理部","code": "XZGLB","manager": "管理員","introduce": "薪資管理部","createTime": "2021-03-14 22:47:25"},{"id": "6051ad90e93db6522c1d00d2","pid": "","name": "技術部","code": "JSB","manager": "孫財","introduce": "技術部","createTime": "2021-03-17 15:18:23"},{"id": "6051adb6e93db6522c1d00d3","pid": "6051ad90e93db6522c1d00d2","name": "Java研發部","code": "JYFB","manager": "管理員","introduce": "JAVA研發部","createTime": "2021-03-17 15:18:23"},{"id": "6051add6e93db6522c1d00d4","pid": "6051ad90e93db6522c1d00d2","name": "Python研發部","code": "PYFB","manager": "羅曉曉","introduce": "Python研發部","createTime": "2021-03-17 15:18:23"},{"id": "6051adefe93db6522c1d00d5","pid": "6051ad90e93db6522c1d00d2","name": "Php研發部","code": "PhpYFB","manager": "孫財","introduce": "Php研發部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae03e93db6522c1d00d6","pid": "","name": "運營部","code": "YYB","manager": "孫財","introduce": "運營部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae15e93db6522c1d00d7","pid": "","name": "市場部","code": "SCB","manager": "孫財","introduce": "市場部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae28e93db6522c1d00d8","pid": "6051ae15e93db6522c1d00d7","name": "北京事業部","code": "BJSYB","manager": "孫財","introduce": "BJSYB","createTime": "2021-03-17 15:18:23"},{"id": "6051ae3de93db6522c1d00d9","pid": "6051ae15e93db6522c1d00d7","name": "上海事業部","code": "SHSYB","manager": "文吉星","introduce": "上海事業部","createTime": "2021-03-17 15:18:23"}]

將平鋪結構轉換為樹形結構

function tranListToTreeData(list) {// 定義兩個變量 一個用來解決映射關系 更快速的匹配到id對應的數據const map = {}// 存放最后生成的樹形數組const treeList = []// 目前數組還是平鋪狀態，先做好映射關系list.forEach(item => {// 這樣map這個對象里面的鍵值對 就是id和數據的對應關系map[item.id] = item})list.forEach(item => {// 無論是item 還是parent 都是一個對象 涉及淺拷貝 拿的都是地址const parent = map[item.pid]if (parent) {if (!parent.children) {parent.children = []}parent.children.push(item)} else {treeList.push(item)}})return treeList
}

之前的數據結構

現在的數據結構

三、對數組相關的查詢常見方法。

1、找出數組中的最大數

const arr = ['1', '2', '3', '4']console.log('找出來最大值', Math.max.apply(null, arr))

2、找出數組中的最小數

const arr = ['1', '2', '3', '4']console.log('找出來最小值', Math.min.apply(null, arr))

四、數組常見的一些工作場景

前端工作常見數組數據處理的一些場景總結_碼路老默007的博客-CSDN博客