JavaScript的一些小技巧

數組去重

ES6提供了幾種簡潔的數組去重的方法，但該方法並不適合處理非基本類型的數組。對於基本類型的數組去重，可使用... new Set()來過濾掉數組中重複的值，建立一個只有惟一值的新數組。

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以前，要實現一樣的效果，咱們須要使用更多的代碼。該技巧適用於包含基本類型的數組：undefined、null、boolean、string和number。若是數組中包含了一個object,function或其餘數組，那就須要使用另外一種方法。

除了上面的方法以外，還可使用Array.from(new Set())來實現：

const array = [1, 1, 2, 3, 5, 5, 1] 
Array.from(new Set(array)) 

> Result:(4) [1, 2, 3, 5]

另外，還可使用Array的.filter及indexOf()來實現：

const array = [1, 1, 2, 3, 5, 5, 1] 
array.filter((arr, index) => array.indexOf(arr) === index) 

> Result:(4) [1, 2, 3, 5]

注意，indexOf()方法將返回數組中第一個出現的數組項。這就是爲何咱們能夠在每次迭代中將indexOf()方法返回的索引與當索索引進行比較，以肯定當前項是否重複。

確保數組的長度

在處理網格結構時，若是原始數據每行的長度不相等，就須要從新建立該數據。爲了確保每行的數據長度相等，可使用Array.fill來處理：

let array = Array(5).fill(''); 
console.log(array); 
> Result: (5) ["", "", "", "", ""]

數組映射

不使用Array.map來映射數組值的方法。

const array = [ 
 { 
  name: '大漠', 
  email: 'w3cplus@hotmail.com' 
 }, 
 { 
  name: 'Airen', 
  email: 'airen@gmail.com'
 }] 
 const name = Array.from(array, ({ name }) => name) 
 
 > Result: (2) ["大漠", "Airen"]

數組截斷

若是你想從數組末尾刪除值（刪除數組中的最後一項），有比使用splice()更快的替代方法。

例如，你知道原始數組的大小，能夠從新定義數組的length屬性的值，就能夠實現從數組末尾刪除值：

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]

這是一個特別簡潔的解決方案。可是，slice()方法運行更快，性能更好：

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]

過濾掉數組中的falsy值

若是你想過濾數組中的falsy值，好比0、undefined、null、false，那麼能夠經過map和filter方法實現：

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"]

獲取數組的最後一項

數組的slice()取值爲正值時，從數組的開始處截取數組的項，若是取值爲負整數時，能夠從數組末屬開始獲取數組項。

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)獲取數組的最後一項，除此以外還可使用下面的方式來獲取數組的最後一項：

console.log(array.slice(array.length - 1)) 
> Result: [7]

從數組中獲取最大值和最小值

可使用Math.max和Math.min取出數組中的最大小值和最小值：

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的...運算符來完成：

const numbers = [1, 2, 3, 4]; 
Math.max(...numbers) 
> Result: 4 

Math.min(...numbers) 
> Result: 1