天天看點

前端JavaScript小技巧「建議收藏」

在JavaScript世界裡,有些操作會讓你無法了解,但是卻無比優雅
  1. 有時候讀取變量屬性時,他可能不是Ojbect。這個這個你就要判斷這個變量是否為對象,如果是在如引用
var obj;
if(obj instanceof Object){
  console.log(obj.a);
}else{
  console.log('對象不存在');
}      

ES6中有簡便寫法,可以幫我們簡短代碼,進而更加明确

var obj;
console.log(obj?.a || '對象不存在');      
  1. 1,2,3,4,5,6…10,11,12 小于10的前面補0

    其實我們用slice函數可以巧妙解決這個問題

    slice(start,end)

    ​​

    ​start​

    ​​:必需。規定從何處開始選取。如果是負數,那麼它規定從數組尾部開始算起的位置。也就是說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。

    ​​

    ​end​

    ​ :可選。規定從何處結束選取。該參數是數組片斷結束處的數組下标。如果沒有指定該參數,那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數,那麼它規定的是從數組尾部開始算起的元素。
var list=[1,2,3,4,5,6,7,8,9,10,11,12,13];
list=list.map(ele=>('0' + ele).slice(-2));
console.log(list);      
前端JavaScript小技巧「建議收藏」
  1. 列印可視化​

    ​console.table()​

var obj = { name: 'Jack' };
console.table(obj);
obj.name= 'Rose';
console.table(obj);      
前端JavaScript小技巧「建議收藏」
  1. 擷取數組中的最後的元素

    數組方法​​

    ​slice()​

    ​可以接受負整數,如果提供它,它将從數組的末尾開始截取數值,而不是開頭。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]      
  1. es6模闆字元串
let name = "Charlse"
let place = "India";
let isPrime = bit =>{
  return (bit === 'P'? 'Prime' : 'Nom-Prime')
}
let messageConcat = `Mr.name' is form ${place} .He is a   
${isPrime('P')} member`;      
  1. H5語音合成

    在網頁端實作将指定的文字進行語音合成并進行播報。

    使用HTML5的​​

    ​Speech Synthesis API​

    ​就能實作簡單的語音合成效果。
<input id="btn1" type="button" value="點我" onclick="test();" />
<script>
  function test() {
    const sos = `阿尤!不錯哦`;
    const synth = window.speechSynthesis;
    let msg = new SpeechSynthesisUtterance(sos);
    synth.speak(msg)
  }
</script>      

然後點選按鈕,就會觸發test方法的執行實作語音合成

這裡推薦使用Chrome浏覽器,因為HTML5的支援度不同

  1. 數字取整
let floatNum = 100.5;
let intNum = ~~floatNum;
console.log(intNum); // 100      
前端JavaScript小技巧「建議收藏」
  1. 字元串轉數字
let str="10000";
let num = +str;
console.log(num); // 10000      
  1. 交換對象鍵值
let obj = {
    key1: "value1",
    key2: "value2"
};
let revert = {};
Object.entries(obj).forEach(([key, value]) => revert[value] = key);
console.log(revert);      
前端JavaScript小技巧「建議收藏」
  1. 數組去重
let arrNum = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
    1, 2, 3, 4, 5, 6, 7, 8, 9, 0
];
let arrString = [
    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
];
let arrMixed = [
    1, "1", "2", true, false, false, 1, 2, "2"
];
arrNum = Array.from(new Set(arrNum));
arrString = [...new Set(arrString)];
arrMixed = [...new Set(arrMixed)];
console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
console.log(arrMixed); // [1, "1", "2", true, false, 2]      
  1. 數組轉化為對象
const arr = [1,2,3]
const obj = {...arr}
console.log(obj)      
  1. 合并對象
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)      
  1. 擷取數組中的最後一項
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);      
  1. 一次性函數,适用于初始化的一些操作
var sca = function() {
    console.log('msg')//永遠隻會執行一次
    sca = function() {
        console.log('foo')
    }
}
sca()        // msg
sca()        // foo
sca()      

繼續閱讀