9 個JavaScript 技巧

做者：Orkhan Jafarov
譯者：前端小智
來源：dev

今天送 5 本前端的書，明天開獎，抽獎地址點擊這裏 https://mp.weixin.qq.com/s/nb...，祝你們好運。

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

1.生成指定範圍的數字

在某些狀況下，咱們會建立一個處在兩個數之間的數組。假設咱們要判斷某人的生日是否在某個範圍的年分內，那麼下面是實現它的一個很簡單的方法 😎

let start = 1900, end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// 還有這種方式，但對於很的範圍就不太穩定
Array.from({ length: end - start + 1 }, (_, i) => start + i);

2.使用值數組做爲函數的參數

在某些狀況下，咱們須要將值收集到數組中，而後將其做爲函數的參數傳遞。 使用 ES6，可使用擴展運算符(...)並從[arg1, arg2] > (arg1, arg2)中提取數組:

const parts = {
  first: [0, 2],
  second: [1, 3],
}

["Hello", "World", "JS", "Tricks"].slice(...parts.second)
// ["World", "JS"]

3.將值用做 Math 方法的參數

當咱們須要在數組中使用Math.max或Math.min來找到最大或者最小值時，咱們能夠像下面這樣進行操做：

const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 474

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4.合併/展平數組中的數組

Array 有一個很好的方法，稱爲Array.flat，它是須要一個depth參數，表示數組嵌套的深度，默認值爲1。 可是，若是咱們不知道深度怎麼辦，則須要將其所有展平，只需將Infinity做爲參數便可 😎

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]

arrays.flat(Infinity)
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. 防止代碼崩潰

在代碼中出現不可預測的行爲是很差的，可是若是你有這種行爲，你須要處理它。

例如，常見錯誤TypeError，試獲取undefined/null等屬性，就會報這個錯誤。

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')

console.log(found.name)
// TypeError: Cannot read property 'name' of undefined

咱們能夠這樣避免它：

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}

console.log(found.name)
// undefined

6. 傳遞參數的好方法

對於這個方法，一個很好的用例就是styled-components，在ES6中，咱們能夠將模板字符中做爲函數的參數傳遞而無需使用方括號。 若是要實現格式化/轉換文本的功能，這是一個很好的技巧：

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;
// 1. Hello,World
// 2. World,World

7.交換變量

使用解構賦值語法，咱們能夠輕鬆地交換變量 使用解構賦值語法 😬:

let a = "hello"
let b = "world"

// 錯誤的方式
a = b
b = a
// { a: 'world', b: 'world' }

// 正確的作法
[a, b] = [b, a]
// { a: 'world', b: 'hello' }

8.按字母順序排序

須要在跨國際的項目中，對於按字典排序，一些比較特殊的語言可能會出現問題，以下所示 😨

// 錯誤的作法
["a", "z", "ä"].sort((a, b) => a - b);
// ['a', 'z', 'ä']

// 正確的作法
["a", "z", "ä"].sort((a, b) => a.localeCompare(b));
// [ 'a', 'ä', 'z' ]

localeCompare() :用本地特定的順序來比較兩個字符串。

9.隱藏隱私

最後一個技巧是屏蔽字符串,當你須要屏蔽任何變量時(不是密碼)，下面這種作法能夠快速幫你作到：

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/gigantz/9-java...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。