1. 程式人生 > >有哪些短小卻令人驚歎的javascript程式碼

有哪些短小卻令人驚歎的javascript程式碼

在專案的開發過程中,我們可以使用一些看似短小但功能卻很強大的程式碼來幫助我們解決一些問題。那麼我們就來看看都有哪些短小卻令人驚歎的程式碼呢?

1個功能:陣列去重。

實現方案1

思路:對待去重的陣列arr進行for迴圈遍歷,然後在新的陣列newArr中去查詢當前被遍歷的元素arr[i],如果返回值為-1,說明在新的陣列中還沒有出現過當前被遍歷的元素arr[i],則把該元素放到新的陣列中。當陣列arr遍歷完以後,新陣列newArr就是去重以後的陣列。

var arr = [1, 4, 7, 4, 3, 2, 1, 4, 7];
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
console.log(newArr);

實現方案2

思路:該方案和方案1思路相同,只不過是使用reduce方法進行遍歷。

var arr = [1, 4, 7, 4, 3, 2, 1, 4, 7];
var newArr = arr.reduce((newArr, current) => {
if(newArr.indexOf(current) === -1) {
newArr.push(current);
}
return newArr;
}, []);
console.log(newArr);

實現方案3

思路:當前方案使用了ES6新增的set資料解構的去重特性,然後在將生成的set物件轉換成陣列。

var arr = [1, 4, 7, 4, 3, 2, 1, 4, 7];
var newArr = Array.from(new Set(arr));
console.log(newArr);

2個功能:在陣列中找出最小值(或者最大值)。

實現方案1

思路:假設第一個陣列元素是最小值,然後對陣列後面的元素進行遍歷、判斷,如果當前被遍歷的元素小於iMin變數的值,說明iMin變數的值還不是最小值,則將當前遍歷的元素值替換掉iMin變數的值。當迴圈結束,iMin變數的值就是陣列中最小的值。

var arr = [23, 45, 40, 30, 12];
var iMin = arr.shift();
arr.forEach((v) => {
iMin = v < iMin ? v : iMin;
});
console.log(iMin);

實現方案2

思路:利用Math.min()方法求最小值,但是該方法的引數是一個數值列表,而不是一個數組,故使用

ES6新增的擴充套件運算子將陣列轉換成列表,然後傳遞到Math.min()方法中去即可。

var arr = [23, 45, 40, 30, 12];
var iMin = Math.min(...arr);
console.log(iMin);

3個功能:交換兩個變數的值。

實現方案1

思路:將變數a的值給到臨時變數temp,然後再將變數b的值給變數a,最後再將臨時變數temp的值給變數b,至此完成變數a和變數b交換值的功能。

var a = 4, b = 6;
var temp = a;
a = b;
b = temp;
console.log(a , b);

實現方案2

思路:利用ES6的陣列解構方法,實現在不使用第三個變數的情況下,完成變數a和變數b的資料交換。

var a = 4, b = 6;
[a, b] = [b, a];
console.log(a, b);

好啦,這次我們先介紹這個三個功能。通過這三個功能的程式設計實現,我們不難發現,如果想要寫出短小卻又令人驚歎的程式碼,並不是一蹴而就的,需要有紮實的程式設計基礎和一定的程式設計經驗。

紙上得來終覺淺,絕知此事要躬行。加油吧,騷年!

來源:千鋒HTML5