上篇文章小猿圈給大家分享了3個(gè)關(guān)于Javascript的小技巧，這節(jié)課繼續(xù)給大家分享一些關(guān)于Javascript的知識點(diǎn)，希望能夠幫助到大家，記得收藏和關(guān)注哦。

4. 數(shù)字

4.1 不同進(jìn)制表示法

ES6中新增了不同進(jìn)制的書寫格式，在后臺傳參的時(shí)候要注意這一點(diǎn)。

29??????????? // 10進(jìn)制

035??????????? // 8進(jìn)制29????? 原來的方式

0o35??????????? // 8進(jìn)制29????? ES6的方式

0x1d??????????? // 16進(jìn)制29

0b11101??????????? // 2進(jìn)制29

復(fù)制代碼

4.2 精確到指定位數(shù)的小數(shù)

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

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

復(fù)制代碼

4.3 數(shù)字補(bǔ)0操作

感謝網(wǎng)友 @JserWang @vczhan 提供這個(gè)小技巧 有時(shí)候比如顯示時(shí)間的時(shí)候有時(shí)候會(huì)需要把一位數(shù)字顯示成兩位，這時(shí)候就需要補(bǔ)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

復(fù)制代碼

5. 數(shù)組

5.1 reduce方法同時(shí)實(shí)現(xiàn)map和filter

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

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]

復(fù)制代碼

5.2 統(tǒng)計(jì)數(shù)組中相同項(xiàng)的個(gè)數(shù)

很多時(shí)候，你希望統(tǒng)計(jì)數(shù)組中重復(fù)出現(xiàn)項(xiàng)的個(gè)數(shù)然后用一個(gè)對象表示。那么你可以使用reduce方法處理這個(gè)數(shù)組。

下面的代碼將統(tǒng)計(jì)每一種車的數(shù)目然后把總數(shù)用一個(gè)對象表示。

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 }

復(fù)制代碼

5.3 使用解構(gòu)來交換參數(shù)數(shù)值

有時(shí)候你會(huì)將函數(shù)返回的多個(gè)值放在一個(gè)數(shù)組里。我們可以使用數(shù)組解構(gòu)來獲取其中每一個(gè)值。

let param1 = 1;

let param2 = 2;

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

console.log(param1) // 2

console.log(param2) // 1

復(fù)制代碼

當(dāng)然我們關(guān)于交換數(shù)值有不少其他辦法：

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

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

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

復(fù)制代碼

5.4 接收函數(shù)返回的多個(gè)結(jié)果

在下面的代碼中，我們從/post中獲取一個(gè)帖子，然后在/comments中獲取相關(guān)評論。由于我們使用的是async/await，函數(shù)把返回值放在一個(gè)數(shù)組中。而我們使用數(shù)組解構(gòu)后就可以把返回值直接賦給相應(yīng)的變量。

async function getFullPost(){

? return await Promise.all([

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

???? fetch('/comments')

? ]);

}

const [post, comments] = getFullPost();

復(fù)制代碼

5.5 將數(shù)組平鋪到指定深度

使用遞歸，為每個(gè)深度級別?depth?遞減 1 。 使用?Array.reduce()?和?Array.concat()?來合并元素或數(shù)組。 基本情況下，depth?等于 1 停止遞歸。 省略第二個(gè)參數(shù)，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]

復(fù)制代碼

5.6 數(shù)組的對象解構(gòu)

數(shù)組也可以對象解構(gòu)，可以方便的獲取數(shù)組的第n個(gè)值

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

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

?

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

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

復(fù)制代碼

6. 對象

6.1 使用解構(gòu)刪除不必要屬性

有時(shí)候你不希望保留某些對象屬性，也許是因?yàn)樗鼈儼舾行畔⒒騼H僅是太大了（just too big）。你可能會(huì)枚舉整個(gè)對象然后刪除它們，但實(shí)際上只需要簡單的將這些無用屬性賦值給變量，然后把想要保留的有用部分作為剩余參數(shù)就可以了。

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

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

?

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

復(fù)制代碼

6.2 在函數(shù)參數(shù)中解構(gòu)嵌套對象

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

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

復(fù)制代碼

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