2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式

A新時代碼農 2021-09-19 11:59:28 阅读数:254

不可 js 技巧 css 基本

test1();

}

else if (type === ‘test2’) {

test2();

}

else if (type === ‘test3’) {

test3();

}

else if (type === ‘test4’) {

test4();

} else {

throw new Error('Invalid value ’ + type);

}

// Shorthand

var types = {

test1: test1,

test2: test2,

test3: test3,

test4: test4

};

var func = types[type];

(!func) && throw new Error('Invalid value ’ + type); func();


[](
)10.indexOf 的按比特操作簡化
-----------------------------------------------------------------------------
在查找數組的某個值時,我們可以使用 indexOf() 方法。但有一種更好的方法,讓我們來看一下這個例子。

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

//longhand

if(arr.indexOf(item) > -1) { // item found

}

if(arr.indexOf(item) === -1) { // item not found

}

//shorthand

if(~arr.indexOf(item)) { // item found

}

if(!~arr.indexOf(item)) { // item not found

}

按比特 (~) 運算符將返回 true(-1 除外),反向操作只需要!~。另外,也可以使用 include() 函數。

if (arr.includes(item)) {

// true if the item found

}


[](
)11.Object.entries()
------------------------------------------------------------------------------
這個方法可以將對象轉換為對象數組。

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

const data = { test1: ‘abc’, test2: ‘cde’, test3: ‘efg’ };

const arr = Object.entries(data);

console.log(arr);

/** Output:

[ [ ‘test1’, ‘abc’ ],

[ ‘test2’, ‘cde’ ],

[ ‘test3’, ‘efg’ ]

]

**/


[](
)12.Object.values()
-----------------------------------------------------------------------------
這也是 ES8 中引入的一個新特性,它的功能類似於 Object.entries(),只是沒有鍵。

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

const data = { test1: ‘abc’, test2: ‘cde’ };

const arr = Object.values(data);

console.log(arr);

/** Output:

[ ‘abc’, ‘cde’]

**/


[](
)13.雙重按比特操作
--------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

// Longhand

Math.floor(1.9) === 1 // true

// Shorthand

~~1.9 === 1 // true


[](
)14.重複字符串多次
---------------------------------------------------------------------
為了重複操作相同的字符,我們可以使用 for 循環,但其實還有一種簡便的方法。

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

//longhand

let test = ‘’;

for(let i = 0; i < 5; i ++) {

test += 'test ';

}

console.log(str); // test test test test test

//shorthand

'test '.repeat(5);


[](
)15.查找數組的最大值和最小值
--------------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

const arr = [1, 2, 3];

Math.max(…arr); // 3

Math.min(…arr); // 1


[](
)16.獲取字符串的字符
----------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

let str = ‘abc’;

//Longhand

str.charAt(2); // c

//Shorthand

str[2]; // c


[](
)17.指數幂簡化
-------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

//longhand

Math.pow(2,3); // 8

//shorthand

2**3 // 8


[](
)最後
-------------------------------------------------------------
為了幫助大家更好溫習重點知識、更高效的准備面試,特別整理了《前端工程師面試手册》電子稿文件。
內容包括html,css,JavaScript,ES6,計算機網絡,瀏覽器,工程化,模塊化,Node.js,框架,數據結構,性能優化,項目等等。(本文資料 適合0-2年)
包含了騰訊、字節跳動、小米、阿裏、滴滴、美團、58、拼多多、360、新浪、搜狐等一線互聯網公司面試被問到的題目,涵蓋了初中級前端技術點。
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_前端](https://s6.51cto.com/images/20210919/1632023315909736.jpg)
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_前端_02](https://s8.51cto.com/images/20210919/1632023316632249.jpg)
**前端面試題匯總**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_程序員_03](https://s5.51cto.com/images/20210919/1632023316784115.jpg)
**JavaScript**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_前端_04](https://s8.51cto.com/images/20210919/1632023316433080.jpg)
**性能**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_Web_05](https://s8.51cto.com/images/20210919/1632023317336911.jpg)
**linux**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_程序員_06](https://s9.51cto.com/images/20210919/1632023317863549.jpg)
**前端資料匯總**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_前端_07](https://s2.51cto.com/images/20210919/1632023317343032.jpg)
**對象篇**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_Web_08](https://s9.51cto.com/images/20210919/1632023318911269.jpg)
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_程序員_09](https://s5.51cto.com/images/20210919/1632023318868228.jpg)
**模塊化編程-自研模塊加載器**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_前端_10](https://s4.51cto.com/images/20210919/1632023318181277.jpg)
**[CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
![2021年不可錯過的17種JS優化技巧(二(1),CSS顏色基本樣式_Web_11](https://s6.51cto.com/images/20210919/1632023318301819.jpg)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
版权声明:本文为[A新時代碼農]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919115927836J.html