一、Number
1. string強制轉換爲數字
-
使用 ES6 中的 Number方法，再用Number.isNaN來判斷是否爲 NaN
-
用運算符+1來轉化爲數字(實際上是調用 .valueOf方法)，再使用 a!==a 來判斷是否爲 NaN，因爲 NaN!==NaN
function testNumber(val) { // 1. Number // val = Number(val); // if (Number.isNaN(val)){ // return 0; // } // return val; // 2. 運算法 val = + val; if (val !== val) { return 0; } return val; } const a = '444'; const d = 'aaaa'; testNumber(a); // 444 testNumber(d); // 0
2. 精確到指定位數的小數
將數字四捨五入到指定的小數位數。使用 Math.round() 和模板字面量將數字四捨五入爲指定的小數位數。省略第二個參數 decimals ，數字將被四捨五入到一個整數
const round =(n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
round(1.345, 2) // 1.34
round(1.3 2) // 1.3
3. 運算
- 取整: 對一個數字 |0可以取整，負數也同樣適用, num | 0
1.3 | 0 // 1
-1.3 | 0 // -1
- 判斷奇偶數: 對一個數字 &1可以判斷奇偶數，負數也同樣適用， num&1
let num = 3;
num & 1 // 1
num = 4
num & 1 // 0
4. 數字補0操作
有時候比如顯示時間的時候有時候會需要把一位數字顯示成兩位，這時候就需要補0操作，可以使用 slice和string的 padStart方法
const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
const addZero2 = (num, len = 2) => (`${num}`).padStart( len , '0')
addZero1(3) // 03
addZero2(32,4) // 0032
二、字符串
1. 字符串比較時間先後
比較時間先後順序可以使用字符串
因爲字符串比較大小是按照字符串從左到右每個字符的 charCode來的，但所以特別要注意時間形式注意補0
const a = '2019-12-01';
const b = '2020-01-01';
const c = '21:30';
const d = '09:30';
const e = '9:30';
a>b // false
c>d // true
c>e // false
三、數組
1. reduce方法同時實現map和filter,
假設現在有一個數列，你希望更新它的每一項（map的功能）然後篩選出一部分（filter的功能）。如果是先使用map然後filter的話，你需要遍歷這個數組兩次。如果你使用 reduce 那麼僅需要遍歷一次
reduce 還可以改變自身數組
const numbers = [10,20,30,40];
const doubledOver50 = numbers.reduce((finalList, num) => {
num = num * 2;
if (num > 50) {
finalList.push(num);
}
return finalList;
}, []);
doubledOver50 // [60, 80]
numbers.reduce((finalList, num, index) => {
num = num * 2;
finalList[index] = {
[index]: num
}
return finalList;
}, numbers);
numbers // [ { '0': 20 }, { '1': 40 }, { '2': 60 }, { '3': 80 } ]
2. 統計數組中相同項的個數
很多時候，你希望統計數組中重複出現項的個數然後用一個對象表示。那麼你可以使用reduce方法處理這個數組。
下面的代碼將統計每個數字出現的次數然後把總數用一個對象表示
const numbers = [10,10,20,20,20,30,40];
const singleNumers = numbers.reduce((obj, num) => {
obj[num] = obj[num] ? ++ obj[num] : 1;
return obj;
}, {});
singleNumers // { '10': 2, '20': 3, '30': 1, '40': 1 }
3. 將數組平鋪到指定深度
使用遞歸，爲每個深度級別 depth 遞減 1 。使用 Array.reduce() 和 Array.concat() 來合併元素或數組。基本情況下， depth 等於 1 停止遞歸。省略第二個參數， depth 只能平鋪到 1 (單層平鋪) 的深度。
const flatten = (arr, depth = 1) => depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), []) : arr.reduce((a, v) => a.concat(v), []);
flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]
四、 代碼
1. Object [key]
const rule = {
first: {
required: true
},
second: {
required: true
}
};
const validate = (rule, values) => {
for(let i in rule) {
if (rule[i].required) {
if (!values[i]) {
return false;
}
}
}
return true;
}
const a = { first: 2 };
const b = { first: 2, second: 1 };
validate(rule, a); // false
validate(rule, b); // true
2. 惰性載入函數
在某個場景下我們的函數中有判斷語句，這個判斷依據在整個項目運行期間一般不會變化，所以判斷分支在整個項目運行期間只會運行某個特定分支，那麼就可以考慮惰性載入函數
const a = 1;
const b = 2;
function foo() {
console.log('333');
if (a !== b) {
foo = function foo () {
console.log('111')
}
} else {
foo = function foo () {
console.log('2222')
}
}
return foo();
}
foo(); // 333 111
foo(); // 111
foo(); // 111
3. 一次性函數
跟上面的惰性載入函數同理，可以在函數體裏覆寫當前函數，那麼可以創建一個一次性的函數，重新賦值之前的代碼相當於只運行了一次，適用於運行一些只需要執行一次的初始化代碼
function foo() {
console.log('333');
foo = function foo () {
console.log('111')
}
}
foo(); // 333
foo(); // 111
foo(); // 111