擁抱ES6（二）

es簡介

es6也稱es2015,在原生js的基礎上新加入了一些好用的方法，加快開發。由於是新特性，很多瀏覽器還不支持，請使用高版本主流瀏覽器進行測試，如谷歌瀏覽器。其實還有其他的特性，這裏只介紹一下相對常用的。

try catch

// old 
try {
    // do something 
} catch (err){
    console.log(err)
}

//new

try {
    // do something 
} catch{
    //  do something  when error
}

使用場景

• 對具體錯誤信息並不關心，反正走到這裏就是出問題了，可概述爲程序異常

• 具體情況具體分析，es2019只是將catch的參數變成了可選

Symbol.prototype.description

console.log(Symbol("高芊").description)//高芊

使用場景

• 用於獲取symbol的描述信息，使用頻率不高，只能說存在即合理

Object.entries

var user={
  name:"高芊",
  like:"code"
}

console.log(Object.entries(user))  //[["name","高芊"],["like","code"]]

使用場景

• 對象轉數組

Object.fromEntries

var arr=[["name","高芊"],["like","code"]];
console.log(Object.fromEntries(arr));

// {name:"高芊",like:"code"}

var map=new Map([["name","高芊"],["like","code"]]);
console.log(Object.fromEntries(map));

// {name:"高芊",like:"code"}

使用場景

• 對象(或Map)轉數組

trimStart/trimEnd

trimLeft和trimRight分別是trimStart和trimEnd的別名，功能一樣。去除空格前後，字符串長度隨之改變。

var str1="高芊   ";
var str2="   高芊";
console.log(str1.trimEnd())//高芊
console.log(str1.trimStart())//高芊
console.log(str1.trimRight())//高芊
console.log(str1.trimLeft ())//高芊
console.log(str1.length)//5
console.log(str1.trimEnd().length)//2

使用場景

• 清除空格

flat/flatMap

var arr=[[1,2,3]]
console.log(arr.flat())
//[1,2,3]
var infiniteArr=[[1,[2,[3,4]]]]
//使用Infinity解決多層次嵌套問題
console.log(infiniteArr.flat(Infinity))
//[1,2,3,4]

var msg=["我喜歡你","真的"];
console.log(msg.map(m=>m.split("")))
//[["我", "喜", "歡", "你"],["真","的"]]
console.log(msg.flatMap(m=>m.split("")))
//["我", "喜", "歡", "你","真","的"]

使用場景

• 數組扁平化