數(shù)組去重
ES6提供了幾種簡(jiǎn)潔的數(shù)組去重的方法，但該方法并不適合處理非基本類型的數(shù)組。對(duì)于基本類型的數(shù)組去重，可以使用... new Set()來(lái)過(guò)濾掉數(shù)組中重復(fù)的值，創(chuàng)建一個(gè)只有唯一值的新數(shù)組。
|
1
2
3
4
5
|
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); > Result:(4) [1, 2, 3, 5] |
這是ES6中的新特性，在ES6之前，要實(shí)現(xiàn)同樣的效果，我們需要使用更多的代碼。該技巧適用于包含基本類型的數(shù)組：undefined、null、boolean、string和number。如果數(shù)組中包含了一個(gè)object,function或其他數(shù)組，那就需要使用另一種方法。
除了上面的方法之外，還可以使用Array.from(new Set())來(lái)實(shí)現(xiàn)：
|
1
2
3
4
|
const array = [1, 1, 2, 3, 5, 5, 1] Array.from(new Set(array)) > Result:(4) [1, 2, 3, 5] |
另外，還可以使用Array的.filter及indexOf()來(lái)實(shí)現(xiàn)：
|
1
2
3
4
|
const array = [1, 1, 2, 3, 5, 5, 1] array.filter((arr, index) => array.indexOf(arr) === index) > Result:(4) [1, 2, 3, 5] |
注意，indexOf()方法將返回?cái)?shù)組中第一個(gè)出現(xiàn)的數(shù)組項(xiàng)。這就是為什么我們可以在每次迭代中將indexOf()方法返回的索引與當(dāng)索索引進(jìn)行比較，以確定當(dāng)前項(xiàng)是否重復(fù)。
確保數(shù)組的長(zhǎng)度
在處理網(wǎng)格結(jié)構(gòu)時(shí)，如果原始數(shù)據(jù)每行的長(zhǎng)度不相等，就需要重新創(chuàng)建該數(shù)據(jù)。為了確保每行的數(shù)據(jù)長(zhǎng)度相等，可以使用Array.fill來(lái)處理
|
1
2
3
|
let array = Array(5).fill(''); console.log(array); > Result: (5) ["", "", "", "", ""] |
數(shù)組映射
不使用Array.map來(lái)映射數(shù)組值的方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const array = [ { name: '大漠', email: 'w3cplus@hotmail.com' }, { name: 'Airen', email: 'airen@gmail.com' }] const name = Array.from(array, ({ name }) => name) > Result: (2) ["大漠", "Airen"] |
數(shù)組截?cái)?/h2>
如果你想從數(shù)組末尾刪除值（刪除數(shù)組中的最后一項(xiàng)），有比使用splice()更快的替代方法。
例如，你知道原始數(shù)組的大小，可以重新定義數(shù)組的length屬性的值，就可以實(shí)現(xiàn)從數(shù)組末尾刪除值：
|
1
2
3
4
5
6
7
|
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(array.length) > Result: 10 array.length = 4 console.log(array) > Result: (4) [0, 1, 2, 3] |
這是一個(gè)特別簡(jiǎn)潔的解決方案。但是，slice()方法運(yùn)行更快，性能更好：
|
1
2
3
4
5
|
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array); > Result: [0, 1, 2, 3] |
過(guò)濾掉數(shù)組中的falsy值
如果你想過(guò)濾數(shù)組中的falsy值，比如0、undefined、null、false，那么可以通過(guò)map和filter方法實(shí)現(xiàn)：
|
1
2
3
4
5
6
|
const array = [0, 1, '0', '1', '大漠', 'w3cplus.com', undefined, true, false, null, 'undefined', 'null', NaN, 'NaN', '1' + 0] array.map(item => { return item }).filter(Boolean) > Result: (10) [1, "0", "1", "大漠", "w3cplus.com", true, "undefined", "null", "NaN", "10"] |
獲取數(shù)組的最后一項(xiàng)
數(shù)組的slice()取值為正值時(shí)，從數(shù)組的開始處截取數(shù)組的項(xiàng)，如果取值為負(fù)整數(shù)時(shí)，可以從數(shù)組末屬開始獲取數(shù)組項(xiàng)。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
let array = [1, 2, 3, 4, 5, 6, 7] const firstArrayVal = array.slice(0, 1) > Result: [1] const lastArrayVal = array.slice(-1) > Result: [7] console.log(array.slice(1)) > Result: (6) [2, 3, 4, 5, 6, 7] console.log(array.slice(array.length)) > Result: [] |
正如上面示例所示，使用array.slice(-1)獲取數(shù)組的最后一項(xiàng)，除此之外還可以使用下面的方式來(lái)獲取數(shù)組的最后一項(xiàng)：
|
1
2
|
console.log(array.slice(array.length - 1)) > Result: [7] |
從數(shù)組中獲取最大值和最小值
可以使用Math.max和Math.min取出數(shù)組中的最大小值和最小值：
|
1
2
3
4
5
6
7
8
9
|
const numbers = [15, 80, -9, 90, -99] const maxInNumbers = Math.max.apply(Math, numbers) const minInNumbers = Math.min.apply(Math, numbers) console.log(maxInNumbers) > Result: 90 console.log(minInNumbers) > Result: -99 |
另外還可以使用ES6的...運(yùn)算符來(lái)完成：
|
1
2
3
4
5
6
|
const numbers = [1, 2, 3, 4]; Math.max(...numbers) > Result: 4 Math.min(...numbers) > Result: 1 |
以上就是JavaScript的一些小技巧分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 小技巧的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://segmentfault.com/a/1190000038716777
