ES7 ES8 的新特性（部分）

Betsy_迪發表於2018-12-26

ES7 只有兩個新特性

  • includes()：在之前，驗證陣列中是否存在某個元素，只能應indexOf來實現，但是現在我們可以使用ES7的新特性includes()來實現
let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))

{

console.log('react存在');

}

複製程式碼
  • 指數操作符:使用自定義的遞迴函式calculateExponent或者Math.pow()進行指數運算,用了ES7就可以直接用指數運算子了（**）
function calculateExponent(base, exponent){

if (exponent === 1){

return base;

}

else{

return base * calculateExponent(base, exponent - 1);
}}

console.log(calculateExponent(7, 3)); // 輸出343

console.log(Math.pow(7, 3)); // 輸出343


複製程式碼
  • 使用ES7:

console.log(7**3);    


執行的就是7的三次方（Math.pow(7,3)）

複製程式碼

ES8的新特性

  • 遍歷物件的屬性值
let obj = {a: 1, b: 2, c: 3}

Object.keys(obj).forEach((key) =>

{

console.log(obj[key]); // 輸出1, 2, 3

});
複製程式碼
  • 遍歷物件的屬性名和屬性值
let obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) =>

{

console.log(key + ": " + value); // 輸出a: 1, b: 2, c: 3

})
複製程式碼
  • 物件變陣列(解析後臺返回的資料時候常用)
Object.values({w:2,f:5})
// [2, 5]
複製程式碼
  • 使用Object.entries()：遍歷物件的屬性名和屬性值：
let obj = {a: 1, b: 2, c: 3}; 
Object.entries(obj).forEach(([key, value]) =>{   
 console.log(key + ": " + value); // 輸出a: 1, b: 2, c: 3
})

複製程式碼
  • async await
async fetchData(query) =>{  
  try    {      
  const response = await axios.get(`/q?query=${query}`); 
       const data = response.data;     
   return data;    }    
catch (error)    {      
  console.log(error)   
 }} 
fetchData(query).then(data =>{    this.props.processfetchedData(data)})

複製程式碼

相關文章