ES6+ 常用語法整理

dreamans 發布于2019-08-23 16:51 / 1211人閱讀

摘要：這個用法比較生僻，不好找。底層的優點不說了，用能避免誤操作，如下這種誤操作會報錯，如果用則不會。

箭頭函數

// 5
function greet (name) {
    return "Hello, "+ name;
}
// 6
const greet = (name) => {
    return "Hello, "+ name;
}
// 由于函數內容只有一句，可以去掉{}，并且省略return關鍵字
const greet = (name) => console.log("Hello, "+ name);
// 進一步簡化，由于參數也只有一個，參數的括號也可以省略。參數多于一個時必須用括號包裹
const greet = name => console.log("Hello, "+ name);
*所以當看到一句的函數如果不理解，可以一步一步的反推，還原成你熟悉的代碼*

// 回調 5
const names = ["Tom","Jerry","Dog"];
names.map(function(name){
    console.log(name);
});
// 6
names.map(name=> console.log(name));
// 當需要直接返回一個對象怎么辦？直接寫{}發現是錯的。這是需要把要返回的對象用()包裹。這個用法比較生僻，不好找。
const test = (a,b) => ({a,b});
test(1,2); // {a:1, b:2}

擴展運算符

// ...的一個通用的用法就是把對象展開
// 展開數組
console.log(...[1,2,3]) // 1 2 3
// 展開對象
const people = {name:"Tome", age: 18};
const coder = {...people, scope:"javascript"};
console.log(coder); // {name: "Tome", age: 18, scope: "javascript"}
// 展開字符串
console.log(..."hello"); // h e l l o

變量聲明

// 6中不建議繼續使用var來聲明變量，推薦使用let和const聲明，以此避免var聲明存在的弊端，看下例子
// 5, 不賣關子，輸出10個10
for (var i = 0; i < 10; i++) {
    setTimeout(() => console.log(i));
}
// 6, 輸出0 ... 9
for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i));
}
// 差別一目了然，如果你不理解，簡單來講，let能避免var的一些不必要的麻煩

// const用來聲明常量，也就是聲明了之后不能再被賦值。底層的優點不說了，用const能避免誤操作，如下這種誤操作會報錯，如果用var則不會。
const MAX = 20;
if(MAX = number){
    // ...
}
// 還有一些簡單的聲明方式，或者是語法糖
// 直接使用對象的屬性，簡化掉冗長的點調用
const student = { name: "Tom", age: 18, grade: 3, score: 100 };
const {name, age, grade, score} = student;
console.log(name, age, grade, score); // Tom 18 3 100
// 如果是多層的嵌套的對象，比如http請求中的req對象
req={body:{name:"test name"},headers:{...}};
const {body:{name}}=req;
console.log(name); // 反向追蹤到要用的屬性即可獲得
// 一次性聲明多個變量并賦值
let [x,y,z] = [1,2,3];
console.log(x,y,z); // 1 2 3

ES6+ 對于書寫來說提供了極大的方便，可能有些地方不那么好理解，多練習就好！

GPU云服務器云服務器 python常用語法 ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103397.html

學習ES6

摘要：學習定稿有兩年多的時間了，斷斷續續通過一些博客，書籍也學到了很多知識。將各個部分的知識整理成一篇篇博文，以便于自己系統掌握和復習。整個系列主要參考了的深入理解，可以看作是對這本書的一個學習總結，也向大家強烈推薦這本書作為的學習書籍。學習es6 es6定稿有兩年多的時間了，斷斷續續通過一些博客，書籍也學到了很多es6知識。可以說，es6給js語言帶來了非常大的改進，引進了很多好用的特性...

wpw 2019-08-26 11:45 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

muddyway 2019-08-29 13:21 評論0 收藏0
前端面試知識點目錄整理

摘要：寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準備自己面試筆記我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結方便自己復習詳細內容會在之后一一對應地補充上去有些在我的個人主頁筆記中也有相關記錄這里暫且放一個我的面試知識點目錄大家寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準備自己面試筆記, 我也針對自己工作中所掌握或了解的一些東西做了一個目錄總結,方便自...

xzavier 2019-08-23 16:14 評論0 收藏0