30個Javascript知識點總結，總有你不會的！-有解無憂

近重溫了一遍紅寶書，發現一些比較好玩的寫法，很多東西日常都在用，但是發現還會有不一樣的寫法,結合一些日常作業中使用的方法，為大家總結一篇日常經常使用可能還不知道的點，希望對你能有所幫助：

一行代碼完成結構加賦值

我們日常經常使用結構賦值，一般都是先結構，再賦值，當然我們也可以一行就完成解構加賦值操作，看起來非常簡化，當然可讀性你懂得！

let people = { name: null, age: null };
let result = { name: '張三',  age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"張三","age":16}###

對基礎資料型別進行解構

日常中我們應該用不到這樣的場景，但是實際上我們也可以對基礎資料型別解構，

const {length : a} = '1234';
console.log(a) // 4

對陣列解構快速拿到最后一項值

實際上我們是可以對陣列解構賦值拿到length屬性的，通過這個特性也可以做更多的事情，

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3

將下標轉為中文零一二三...

日常可能有的串列我們需要將對應的012345轉為中文的一、二、三、四、五...，在老的專案看到還有通過自己手動定義很多行這樣的寫法，于是寫了一個這樣的方法轉換，

export function transfromNumber(number){
  const  INDEX_MAP = ['零'，'一'.....]
  if(!number) return
  if(number === 10) return INDEX_MAP[number]
  return [...number.toString()].reduce( (pre, cur) => pre  + INDEX_MAP[cur] , '' )
}

判斷整數的不同方法

/* 1.任何整數都會被1整除，即余數是0，利用這個規則來判斷是否是整數，但是對字串不準確 */
function isInteger(obj) {
 return obj%1 === 0
}
/* 1. 添加一個是數字的判斷 */
function isInteger(obj) {
 return typeof obj === 'number' && obj%1 === 0
}
/* 2. 使用Math.round、Math.ceil、Math.floor判斷 整數取整后還是等于自己，利用這個特性來判斷是否是整數*/
function isInteger(obj) {
 return Math.floor(obj) === obj
}
/* 3. 通過parseInt判斷 某些場景不準確 */
function isInteger(obj) {
 return parseInt(obj, 10) === obj
}
/* 4. 通過位運算子*/
function isInteger(obj) {
 return (obj | 0) === obj
}
/* 5.ES6提供了Number.isInteger */

通過css檢測系統的主題色從而全域修改樣式

@media 的屬性 prefers-color-scheme就可以知道當前的系統主題，當然使用前需要查查兼容性

@media (prefers-color-scheme: dark) { //... } 
@media (prefers-color-scheme: light) { //... }

javascript也可以輕松做到

window.addEventListener('theme-mode', event =>{ 
    if(event.mode == 'dark'){}
   if(event.mode == 'light'){} 
})
window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { 
    if (event.matches) {} // dark mode
})

陣列隨機打亂順序

通過 0.5-Math.random() 得到一個亂數，再通過兩次sort排序打亂的更徹底,但是這個方法實際上并不夠隨機，如果是企業級運用，建議使用第二種洗牌演算法

shuffle(arr) {
      return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
 },
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}

隨機獲取一個Boolean值

和上個原理相同，通過亂數獲取，**Math.random()**的區間是0-0.99，用0.5在中間百分之五十的概率

function randomBool() {
    return 0.5 - Math.random()
}

把陣列的第一項放到最后一項

function (arr){
    return arr.push(arr.shift());
}

把陣列最后一項移到第一項

function(arr){
  return arr.unshift(arr.pop());
}

篇幅關系，更多總結請參考：https://cybozudev.kf5.com/hc/community/question/34258634/?from=cnblog

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543801.html

標籤：其他

上一篇：面試官問我：CSS有哪些屬性可以繼承？

下一篇：記錄--陣列去重的五種方法