上篇文章小猿圈給大家分享了3個關于Javascript的小技巧，這節課繼續給大家分享一些關于Javascript的知識點，希望能夠幫助到大家，記得收藏和關注哦。

4. 數字

4.1 不同進制表示法

ES6中新增了不同進制的書寫格式，在后臺傳參的時候要注意這一點。

29??????????? // 10進制

035??????????? // 8進制29????? 原來的方式

0o35??????????? // 8進制29????? ES6的方式

0x1d??????????? // 16進制29

0b11101??????????? // 2進制29

復制代碼

4.2 精確到指定位數的小數

將數字四舍五入到指定的小數位數。使用?Math.round()?和模板字面量將數字四舍五入為指定的小數位數。 省略第二個參數?decimals?，數字將被四舍五入到一個整數。

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)

round(1.345, 2) ????????????????????????? // 1.35

round(1.345, 1) ????????????????????????? // 1.3

復制代碼

4.3 數字補0操作

感謝網友 @JserWang @vczhan 提供這個小技巧 有時候比如顯示時間的時候有時候會需要把一位數字顯示成兩位，這時候就需要補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

復制代碼

5. 數組

5.1 reduce方法同時實現map和filter

假設現在有一個數列，你希望更新它的每一項（map的功能）然后篩選出一部分（filter的功能）。如果是先使用map然后filter的話，你需要遍歷這個數組兩次。 在下面的代碼中，我們將數列中的值翻倍，然后挑選出那些大于50的數。

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]

復制代碼

5.2 統計數組中相同項的個數

很多時候，你希望統計數組中重復出現項的個數然后用一個對象表示。那么你可以使用reduce方法處理這個數組。

下面的代碼將統計每一種車的數目然后把總數用一個對象表示。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];

var carsObj = cars.reduce(function (obj, name) {

? obj[name] = obj[name] ? ++obj[name] : 1;

? return obj;

}, {});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

復制代碼

5.3 使用解構來交換參數數值

有時候你會將函數返回的多個值放在一個數組里。我們可以使用數組解構來獲取其中每一個值。

let param1 = 1;

let param2 = 2;

[param1, param2] = [param2, param1];

console.log(param1) // 2

console.log(param2) // 1

復制代碼

當然我們關于交換數值有不少其他辦法：

var temp = a; a = b; b = temp???????????????

b = [a, a = b][0]????????????????????????

a = a + b; b = a - b; a = a - b?????????????????

復制代碼

5.4 接收函數返回的多個結果

在下面的代碼中，我們從/post中獲取一個帖子，然后在/comments中獲取相關評論。由于我們使用的是async/await，函數把返回值放在一個數組中。而我們使用數組解構后就可以把返回值直接賦給相應的變量。

async function getFullPost(){

? return await Promise.all([

???? fetch('/post'),

???? fetch('/comments')

? ]);

}

const [post, comments] = getFullPost();

復制代碼

5.5 將數組平鋪到指定深度

使用遞歸，為每個深度級別?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]

復制代碼

5.6 數組的對象解構

數組也可以對象解構，可以方便的獲取數組的第n個值

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';

const { 2: country, 4: state } = csvFileLine.split(',');

?

country???????????????????? // US

state??????????????? // New Yourk

復制代碼

6. 對象

6.1 使用解構刪除不必要屬性

有時候你不希望保留某些對象屬性，也許是因為它們包含敏感信息或僅僅是太大了（just too big）。你可能會枚舉整個對象然后刪除它們，但實際上只需要簡單的將這些無用屬性賦值給變量，然后把想要保留的有用部分作為剩余參數就可以了。

下面的代碼里，我們希望刪除_internal和tooBig參數。我們可以把它們賦值給internal和tooBig變量，然后在cleanObject中存儲剩下的屬性以備后用。

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

?

console.log(cleanObject);???????????????????????? // {el1: '1', el2: '2', el3: '3'}

復制代碼

6.2 在函數參數中解構嵌套對象

在下面的代碼中，engine是對象car中嵌套的一個對象。如果我們對engine的vin屬性感興趣，使用解構賦值可以很輕松地得到它。

var car = {

? model: 'bmw 2018',

? engine: {

??? v6: true,

??? turbo: true,

??? vin: 12345

? }

}

const modelAndVIN = ({model, engine: {vin}}) => {

? console.log(`model: ${model} vin: ${vin}`);

}

modelAndVIN(car); // => model: bmw 2018? vin: 12345

復制代碼

今天的分享就到這里了，想學習更多的關于前端的小技巧，一定要長期關注我哦，小猿圈會不定期的給大家整理、總結、分享一些，可以讓我們工作輕松的文章，想學習web的朋友們也可以去小猿圈網站學習，加油。