日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
9個JavaScript技巧

1. 生成指定范圍的數(shù)字

成都服務(wù)器托管，成都創(chuàng)新互聯(lián)公司提供包括服務(wù)器租用、西信服務(wù)器托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、申請域名等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：18980820575

在某些情況下，我們會創(chuàng)建一個處在兩個數(shù)之間的數(shù)組。假設(shè)我們要判斷某人的生日是否在某個范圍的年份內(nèi)，那么下面是實現(xiàn)它的一個很簡單的方法：

 
 
 
 
    
  
  
  
  
  1. let start = 1900, end = 2000;
    2. 
  
  
  
  
  2. [...new Array(end + 1).keys()].slice(start);
    3. 
  
  
  
  
  3. // [ 1900, 1901, ..., 2000]
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 還有這種方式，但對于很的范圍就不太穩(wěn)定
    6. 
  
  
  
  
  6. Array.from({ length: end - start + 1 }, (_, i) => start + i);
    7.

2. 使用值數(shù)組作為函數(shù)的參數(shù)

在某些情況下，我們需要將值收集到數(shù)組中，然后將其作為函數(shù)的參數(shù)傳遞。使用 ES6，可以使用擴(kuò)展運(yùn)算符(...)并從[arg1, arg2] > (arg1, arg2)中提取數(shù)組：

 
 
 
 
    
  
  
  
  
  1. const parts = {
    2. 
  
  
  
  
  2.   first: [0, 2],
    3. 
  
  
  
  
  3.   second: [1, 3],
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. ["Hello", "World", "JS", "Tricks"].slice(...parts.second)
    7. 
  
  
  
  
  7. // ["World", "JS"]
    8.

3. 將值用作 Math 方法的參數(shù)

當(dāng)我們需要在數(shù)組中使用Math.max或Math.min來找到最大或者最小值時，我們可以像下面這樣進(jìn)行操作：

 
 
 
 
    
  
  
  
  
  1. const elementsHeight =  [...document.body.children].map(
    2. 
  
  
  
  
  2.   el => el.getBoundingClientRect().y
    3. 
  
  
  
  
  3. );
    4. 
  
  
  
  
  4. Math.max(...elementsHeight);
    5. 
  
  
  
  
  5. // 474
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. const numbers = [100, 100, -1000, 2000, -3000, 40000];
    8. 
  
  
  
  
  8. Math.min(...numbers);
    9. 
  
  
  
  
  9. // -3000
    10.

4. 合并/展平數(shù)組中的數(shù)組

Array 有一個很好的方法，稱為Array.flat，它是需要一個depth參數(shù)，表示數(shù)組嵌套的深度，默認(rèn)值為1。但是，如果我們不知道深度怎么辦，則需要將其全部展平，只需將Infinity作為參數(shù)即可

 
 
 
 
    
  
  
  
  
  1. const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. arrays.flat(Infinity)
    4. 
  
  
  
  
  4. // [ 10, 50, 100, 2000, 3000, 40000 ]
    5.

5. 防止代碼崩潰

在代碼中出現(xiàn)不可預(yù)測的行為是不好的，但是如果你有這種行為，你需要處理它。

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

 
 
 
 
    
  
  
  
  
  1. const found = [{ name: "Alex" }].find(i => i.name === 'Jim')
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. console.log(found.name)
    4. 
  
  
  
  
  4. // TypeError: Cannot read property 'name' of undefined
    5.

我們可以這樣避免它：

 
 
 
 
    
  
  
  
  
  1. const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. console.log(found.name)
    4. 
  
  
  
  
  4. // undefined
    5.

6. 傳遞參數(shù)的好方法

對于這個方法，一個很好的用例就是styled-components，在ES6中，我們可以將模板字符中作為函數(shù)的參數(shù)傳遞而無需使用方括號。如果要實現(xiàn)格式化/轉(zhuǎn)換文本的功能，這是一個很好的技巧：

 
 
 
 
    
  
  
  
  
  1. const makeList = (raw) =>
    2. 
  
  
  
  
  2.   raw
    3. 
  
  
  
  
  3.     .join()
    4. 
  
  
  
  
  4.     .trim()
    5. 
  
  
  
  
  5.     .split("\n")
    6. 
  
  
  
  
  6.     .map((s, i) => `${i + 1}. ${s}`)
    7. 
  
  
  
  
  7.     .join("\n");
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. makeList`
    10. 
  
  
  
  
  10. Hello, World
    11. 
  
  
  
  
  11. Hello, World
    12. 
  
  
  
  
  12. `;
    13. 
  
  
  
  
  13. // 1. Hello,World
    14. 
  
  
  
  
  14. // 2. World,World
    15.

7. 交換變量

使用解構(gòu)賦值語法，我們可以輕松地交換變量 使用解構(gòu)賦值語法：

 
 
 
 
    
  
  
  
  
  1. let a = "hello"
    2. 
  
  
  
  
  2. let b = "world"
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 錯誤的方式
    5. 
  
  
  
  
  5. a = b
    6. 
  
  
  
  
  6. b = a
    7. 
  
  
  
  
  7. // { a: 'world', b: 'world' }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 正確的做法
    10. 
  
  
  
  
  10. [a, b] = [b, a]
    11. 
  
  
  
  
  11. // { a: 'world', b: 'hello' }
    12.

8. 按字母順序排序

需要在跨國際的項目中，對于按字典排序，一些比較特殊的語言可能會出現(xiàn)問題，如下所示：

 
 
 
 
    
  
  
  
  
  1. // 錯誤的做法
    2. 
  
  
  
  
  2. ["a", "z", "?"].sort((a, b) => a - b);
    3. 
  
  
  
  
  3. // ['a', 'z', '?']
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 正確的做法
    6. 
  
  
  
  
  6. ["a", "z", "?"].sort((a, b) => a.localeCompare(b));
    7. 
  
  
  
  
  7. // [ 'a', '?', 'z' ]
    8.

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

9. 隱藏隱私

最后一個技巧是屏蔽字符串,當(dāng)你需要屏蔽任何變量時(不是密碼)，下面這種做法可以快速幫你做到：

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

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。


網(wǎng)頁標(biāo)題：9個JavaScript技巧
文章起源：http://m.5511xx.com/article/djsiooh.html