在JavaScript世界里，有些操作會(huì)讓你無法理解，但是卻無比優(yōu)雅!
- 有時(shí)候讀取變量屬性時(shí)，他可能不是Ojbect。這個(gè)這個(gè)你就要判斷這個(gè)變量是否為對(duì)象，如果是在如引用
var obj;
if(obj instanceof Object){
console.log(obj.a);
}else{
console.log('對(duì)象不存在');
}
ES6中有簡便寫法，可以幫我們簡短代碼，從而更加明確
var obj;
console.log(obj?.a || '對(duì)象不存在');
- 1,2,3,4,5,6....10,11,12 小于10的前面補(bǔ)0
其實(shí)我們用slice函數(shù)可以巧妙解決這個(gè)問題
slice(start,end);
start:必需。規(guī)定從何處開始選取。如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說，-1 指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類推。
end :可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素。
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);
- 打印可視化console.table()
var obj = { name: 'Jack' };
console.table(obj);
obj.name= 'Rose';
console.table(obj);
- 獲取數(shù)組中的最后的元素
數(shù)組方法slice()可以接受負(fù)整數(shù)，如果提供它，它將從數(shù)組的末尾開始截取數(shù)值，而不是開頭。
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]
- 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`;
- H5語音合成
在網(wǎng)頁端實(shí)現(xiàn)將指定的文字進(jìn)行語音合成并進(jìn)行播報(bào)。
使用HTML5的Speech Synthesis API就能實(shí)現(xiàn)簡單的語音合成效果。
<input id="btn1" type="button" value="點(diǎn)我" onclick="test();" />
<script>
function test() {
const sos = `阿尤！不錯(cuò)哦`;
const synth = window.speechSynthesis;
let msg = new SpeechSynthesisUtterance(sos);
synth.speak(msg)
}
</script>
然后點(diǎn)擊按鈕，就會(huì)觸發(fā)test方法的執(zhí)行實(shí)現(xiàn)語音合成
這里推薦使用Chrome瀏覽器，因?yàn)镠TML5的支持度不同
- 數(shù)字取整
let floatNum = 100.5;
let intNum = ~~floatNum;
console.log(intNum); // 100
- 字符串轉(zhuǎn)數(shù)字
let str="10000";
let num = +str;
console.log(num); // 10000
- 交換對(duì)象鍵值
let obj = {
key1: "value1",
key2: "value2"
};
let revert = {};
Object.entries(obj).forEach(([key, value]) => revert[value] = key);
console.log(revert);
- 數(shù)組去重
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]
- 數(shù)組轉(zhuǎn)化為對(duì)象
const arr = [1,2,3]
const obj = {...arr}
console.log(obj)
- 合并對(duì)象
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)
也就是通過展開操作符(spread operator)來實(shí)現(xiàn)。
- 獲取數(shù)組中的最后一項(xiàng)
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);
- 一次性函數(shù)，適用于初始化的一些操作
var sca = function() {
console.log('msg')//永遠(yuǎn)只會(huì)執(zhí)行一次
sca = function() {
console.log('foo')
}
}
sca() // msg
sca() // foo
sca()
提高工作效率，減少代碼量，降低鍵盤磨損程度
我希望你喜歡它并學(xué)到了一些新東西
感謝你的閱讀，編程快樂！
