【學習筆記】ES6新的語法
- 2019 年 11 月 13 日
- 筆記
ES6
最新2019 (es10)
方便 -> 工程性
需要了解的：
- 變數
- 作用域
- 函數
- 自帶對象
- 非同步處理
- Promise
- async/await
變數
以前
var申明
現在
let 變數
const常量
塊級作用域
for() {} {} function () {}
看以下程式碼：
<body> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <script> let btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { alert(i); } } </script> </body>
都會彈出5 只需將var 改成let 就會彈出0 1 2 3 4
解構賦值
{a:12,b:32}
[12,34,56]
注意兩點：
- 左右兩邊一樣
- 右邊得是一個東西（對象、數組….）
<script> let json = { a: 12, b: 43, c: 34 }; let { a, b, c } = json; // 右邊是a,b，c左邊也得是a,b,c // 位置不一樣，但會找到對應的值 console.log(a, b, c); // 12 43 34 let [aa, bb, cc] = data; console.log(aa, bb, cc) </script>
函數
箭頭函數
(args) => { }
好處：this指向問題解決了
剩餘參數
function gg(a, c, ...arr) { console.log(a); console.log(c); console.log(arr); } gg(1, 2, 3, 4, 5, 56, 6, 7);
剩餘參數必須是最後一個參數
let a = [12, 3, 4, 5, 5]; let b = [23, 4, 5, 6, 342, 3, 3]; let c = [...a, ...b]; console.log(c); // [ 12, 3, 4, 5, 5, 23, 4, 5, 6, 342, 3, 3 ]
數組相關Array
map
映射：n -> n
let a = [12, 3, 4, 5, 6, 7, 8, 9, 10]; let res = a.map((item) => item * 2); console.log(res); // [ 24, 6, 8, 10, 12, 14, 16, 18, 20 ]
reduce
數組內的元素遍歷後依次減少
在函數內部進行想要的操作。
let arr = [12, 3, 4, 5]; let bres = arr.reduce((tmp, item, index) => { return tmp+item; // console.log(tmp); // console.log(item); // console.log(index); }); console.log(bres);
求平均數
let arr = [12, 3, 4, 5]; let n = arr.reduce((tmp, item, index) => { if (index < arr.length - 1) { return tmp + item; } return (tmp + item) / arr.length; }); // 6
forEach
循環一遍 類似for()
filter
//filter let arr = [12, 3, 4, 5]; let brr = arr.filter((item) => item % 2 === 0); console.log(brr); // [ 12, 4 ]
字元串String
字元串模板
let arr = [12, 3, 4, 5]; arr.forEach((item, index) => { console.log(`這是第${index + 1}個變數：${item}`); }); // 這是第1個變數：12 // ....
startsWith
let url = "https://www.misiyu.cn"; if (url.startsWith('https:') || url.startsWith('https:')) { console.log('是URL'); } // 是URL
endsWith
同startsWith，不過是判斷尾部
非同步處理
同步：多個操作必須一個一個的操作。
非同步：多個操作可以是同時進行。
Promise
統一非同步處理，
let resolve = function () { console.log('resolve'); }; let reject = function () { console.log('reject'); }; let does = function () { console.log('does'); return false; }; let p = new Promise(does).then(resolve).catch(reject);
上面這個例子稍微有點問題，用非同步網路請求可以演示清楚
Promise.all()
等所有非同步完成之後會執行then,有錯誤在執行catch
async/await
在函數前面聲明
async function f() { let a = 32; let b = 23; } f().then(r => console.log('fasdf'));
如果函數內部有非同步操作（如數據訪問）九需要在此前加await
async function f() { let a = 32; let b = 23; let data = await $.get({url: 'https://www.misiyu.cn'}); }
