JAVAScript 的故事很長。在今天，JavaScript 的運行從移動設備到服務器端，無論您是計劃在 2022 年學習或使用 JavaScript ，還是目前正在使用JavaScript進行開發，還是已經熟練掌握了JavaScript技能，我在這里與您分享的這17個高頻使用的JavaScript代碼段，對您一定會有一些幫助。
好了，我們現在就開始吧。
1、短路表達式
const defaultSafeValue = "defaultSafeValue"
let someValueNotSureOfItsExistence = null
let expectingSomeValue = someValueNotSureOfItsExistence || defaultSafeValue
console.log(expectingSomeValue)
如果 someValueNotSureOfItsExistance 為 undefined/null/false，則 defaultSafeValue 將就位。
如果我們不確定任何值是否存在，這會很方便。它還確保您不會從錯誤的對象中查看任何內容，即如下所示。
let someValueNotSureOfItsExistence = null
// let someValueNotSureOfItsExistence = { expectingSomeValue:1 }
let { expectingSomeValue } = someValueNotSureOfItsExistence || {}
console.log(expectingSomeValue)
你可以在上面的代碼中取消注釋，看看它可以避免可能的崩潰。
2、IF條件
let someValue = true // or some value like 1,.. {} etc
if(someValue){
console.log('Yes. Its exist')
}
3、多重條件
const conditions = ["Condition 2","Condition String2"];someFunction(str){
if(str.includes("someValue1") || str.includes("someValue2")){
return true
}else{
return false
}
}
同樣可以通過以下方式完成
someFunction(str){
const conditions = ["someValue1","someValue2"];
return conditions.some(condition=>str.includes(condition));
}
4、模板文字
let name = "John Doe", profession = "Engineering"
let someSentence = `My Name is ${name} and he is doing ${profession}`
console.log(someSentence)
// His Name is John Doe and he is doing Engineering
5、解構賦值
let personObject = {
name:"John Doe",
phone:"1234",
address:{
line:"abc ave",
postCode:12223,
},
}
const {name, phone, address} = personObject;
我們經常在像 React 這樣的框架中這樣做，如下所示
import { observable, action, runInAction } from 'mobx';
6、擴展運算符
const previousNumber = [1, 3, 5 ];
const allNumbers = [2 ,4 , 6, ...previousNumber];
console.log(allNumbers);
// [ 2, 4, 6, 1, 3, 5 ]
//Handy if you want to merge two objects
7、箭頭功能簡寫
var sayHello = (name)=>{
return "Hello " + name
}
console.log(sayHello("John"))
反而
var sayHello = (name)=> "Hello " + name
console.log(sayHello("John"))
8、條件函數調用
function fn1(){
console.log('I am Function 1');
}
function fn2(){
console.log('I am Function 2');
}
let checkValue = 3;
if(checkValue === 3){
fn1();
}else{
fn2();
}
相反，簡而言之
(checkValue ===3 ? fn1:fn2)(); // Short Version
9、&& 運算符
var value = true; // or true or some value exist
if(value){
console.log('Value is there or true')
}
// OR via this way
value && console.log('Value is there or true')
10、 將字符串轉換為數字
const numberStr1 = "100";
const numberStr2 = "200";
var sampleValue = +numberStr1 + +numberStr2;
console.log(sampleValue);
console.log(typeof sampleValue); // Its a number!
11、避免過多的函數參數
function myFunction(employeeName,jobTitle,yrExp,majorExp){
}
// you can call it via
myFunction("John","Project Manager",12,"Project Management");
// ***** PROBLEMS ARE *****
// Violation of ‘clean code’ principle
// Parameter sequencing is important
// Unused Params warning if not used
// Testing need to consider a lot of edge cases.
相反，創建一個 params 對象，如
const mockTechPeople = {
employeeName:'John',
jobTitle:'Project Manager',
yrExp:12,
majorExp:'Project Management'
}
并在函數中解構 params 使其更清晰，產生錯誤的可能性更小。
function myFunction({employeeName,jobTitle,yrExp,majorExp}){
// ES2015/ES6 destructuring syntax is in action
// map your desired value to variable you need.
}
現在調用很簡單
myFunction(mockTechPeople); // Only One argument
12、 默認參數值
function rectangle(h,w){
if(!h){
h=0;
}else if(!w){
w=0;
}
return h*w;
}
console.log(rectangle())
反而
function rectangle(h =0,w=0){
return h*w;
}
console.log(rectangle(1,12))
13、Math.Floor 簡寫
var val = "1212121212"
console.log(Math.floor(val)) // Long one
console.log(~~val) // smart one
14、toString 簡寫
var someNumber = 123
console.log(someNumber.toString()) //return "123"
// Or in SHORT CUT
console.log(`${someNumber}`) //return "123"
15、For 循環
for(let i=0;i<1e3;i++){ // instead of i<1000, Cool, right?
}
16、值到對象映射，即鍵和值相同
var x='x',y='y'
var obj = {x,y} // instead of {x:x, y:y}
console.log(obj)
17、多行字符串
var multiLineString = `some stringn
with multi-line ofn
charactersn`
console.log(multiLineString)
