. Randoms

在下面的代碼片段，將展示了兩種生成隨機數或從數組中獲取隨機元素的方法。

生成指定范圍的隨機數：

const getRandoms = (min, max) => {
    return Math.round(Math.random() * (max - min) + min);
};
console.log(getRandoms(10, 100));

隨機獲取數組中的一項元素：

const arrayCities = ["北京", "上海", "廣州", "深圳", "天津", "重慶"];
const getRadmonItem = (array) =>
    array[Math.floor(Math.random() * array.length)];
console.log("隨機城市：", getRadmonItem(arrayCities));

2. 數字加密

下面代碼片段展示了使用數字作為密鑰對數字進行加密解密操作，使用異或運算 XOR(^) 來實現，展示一個簡單的加密解密過程。

function Encrypt(secretNumber) {
    const _secretNumber = secretNumber;
    const encrypted = (encryptNumber) => encryptNumber ^ _secretNumber;
    const decrypted = (encryptedContent) => encryptedContent ^ _secretNumber;
    return {
        encrypted,
        decrypted,
    };
}

const encryptHelper = new Encrypt(202108);
const encryptNumber = 20210901;

// 加密
const encrypted = encryptHelper.encrypted(encryptNumber);
console.log(encrypted); // 20410793
// 解密
const decrypted = encryptHelper.decrypted(encrypted);
console.log(decrypted); // 20210901

3. 設置必選參數

通常定義的一個函數的時候，對于可預期的參數可以使用默認值，而對于必要參數希望給出友好的提示，下面代碼片段展示一個必填參數的定義：

const mandatory = (name) => {
    throw new Error(`調用錯誤，必須傳遞參數：${name}`);
};

const printTitle = (title = mandatory("標題")) => {
    console.log(`打印文章標題：${title}`);
};

printTitle("JavaScript"); // 打印文章標題：JavaScript
printTitle(); // Error: 調用錯誤，必須傳遞參數：標題

4. 動態創建函數

動態創建函數是一種基于字符串動態生成函數的動態機制，通常用于動態表單的規則驗證中，第一個形參是用逗號分隔的實參列表，最后一個形參是函數體的邏輯代碼：

const multiplyFn = new Function(
    "num1",
    "num2",
    "num3",
    "return num1*num2*num3"
);
console.log(multiplyFn(1, 2, 3)); // 6
// ES6
const multiply = new Function(
    "...numbers",
    "return numbers.reduce((acc,current) => acc * current, 1)"
);
console.log(multiply(1, 2, 3)); // 6

5. 清空數組

簡單的數組清空方式是改變其 length ，如下代碼片段：

const arrayCities = ["北京", "上海", "廣州", "深圳", "天津", "重慶"];
console.log(arrayCities); // [ '北京', '上海', '廣州', '深圳', '天津', '重慶' ]
// 清空
arrayCities.length = 0;
console.log(arrayCities); // []

6. 四舍五入

小數點的處理，是數字常見的操作，主要涉及的方法是 toFixed 和 Math ，下面代碼片段展示常用的方法。

由于 JavaScript 精度原因導致小數點相加的時候與預期有偏差，下面代碼片段展示了四舍五入常見的方法和小數相加的處理：

const pi = 3.14159265359;
console.log(pi.toFixed(3)); // 3.142

const sumFloat = 0.1 + 0.2;
console.log(sumFloat); // 0.30000000000000004
console.log(sumFloat.toFixed(1)); // 0.3

Math 方法中常見用于取整的包括：Math.round() 舍入到最接近的整數， Math.floor() 向下舍入， Math.ceil() 向上舍入。最接近數學意義上四舍五入的方法就只有 toFixed ，如下代碼片段所示：

const pi = 3.14159265359;
console.log(pi.toFixed(0)); // 3
console.log(Math.floor(pi)); // 3
console.log(Math.ceil(pi)); // 4
console.log(Math.round(pi)); // 3

const num2 = 3.5;
console.log(num2.toFixed(0)); // 4
console.log(Math.floor(num2)); // 3
console.log(Math.ceil(num2)); // 4
console.log(Math.round(num2)); // 4

7. 數組項的對象解構

數組項的對象解構在解析 CSV 格式的數據非常實用，請看下面的代碼片段：

const csvAddressDetail = "廣東省,深圳市,南山區,科技園北區科技園大廈";

const arrayAddress = csvAddressDetail.split(",");
const { 0: province, 1: city, 2: district, 3: address } = arrayAddress;

console.log(province, city, district, address);  // 廣東省 深圳市 南山區 科技園北區科技園大廈

當然還可以跳過一些索引，如下：

const arrayAddress = csvAddressDetail.split(",");
const { 1: city, 3: address } = arrayAddress;

console.log(city, address); // 深圳市 科技園北區科技園大廈

8. 變量數字轉換

將值轉換為數字，特別是將字符串轉換為數字，是經常會用到的，有許多方法可以進行轉換，這里展示一些常見的方式：

console.log(+"15"); // 15
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(Number("15")); // 15
console.log(parseInt("15", 10)); // 15
console.log(parseFloat("15.42")); // 15.42

9. 獲取文件擴展名

下面的代碼片段展示了通過一個完整路徑或者文件名稱獲取文件相應的擴展名稱方法：

const arrayFiles = [
    "/attach/pics/logo.png",
    "logo.svg",
    "template.xlsx",
    "template.doc",
];
const getExtName = (fullpath) => {
    const root = fullpath.split(/[\\/]/).pop();
    const pos = root.lastIndexOf(".");
    return root === "" || pos < 1 ? "" : root.slice(pos + 1);
};

const arrayExtNames = arrayFiles.map((item) => getExtName(item));
console.log(arrayExtNames); // [ 'png', 'svg', 'xlsx', 'doc' ]

10. 普通函數定義

假設需要定義一個函數，給定一些參數和函數，然后使用這些參數執行這個函數，代碼片段展示一個計算器的功能及擴展運算符的使用，如下代碼：

者 | Minko Gechev

譯者 | 王強

策劃 | 蔡芳芳

轉發鏈接：https://web.dev/commonjs-larger-bundles/