本系列文章適合快速掌握 ES6 入門語法,想深刻學習 ES6 的小夥伴能夠看看阮一峯老師的《ECMAScript 6 入門》
本篇文章是對以前文章的一個補充,可使 JavaScript 代碼更簡潔html
在 JavaScript 傳統語法中若是想設置函數默認值通常咱們採用判斷的形式vue
function example (a,b,c) { a = a||'string'; b = b||'number'; c = c||'json'; console.log(a); console.log(b); console.log(c); // 'string' 'number' 'json' }
在新的語法中咱們能夠在參數聲明的同時賦予默認值es6
function example (a = 'string',b = 'number',c = 'json') { console.log(a); console.log(b); console.log(c); // 'string' 'number' 'json' }
在 JavaScript 傳統語法中若是不肯定參數的數量,而且想獲取全部的參數,通常使用 arguments (函數自帶的變量,數組類型,存放全部的參數)json
function example (){ console.log(arguments); }
在新的語法中咱們可使用三個點 ... 表示接收所有參數小程序
function example (...oVar){ console.log(oVar); }
還能夠結合解構賦值,實現不用按順序傳遞參數segmentfault
function (...opaction){ let {url,type,succ,err} = opaction; if(!url){ return false; }else{ console.log(url); console.log(type); console.log(succ); console.log(err); } }
let oArray = [5, 7, 1, 56]; const oMap = oArray .map(x => x * 3); console.log(oMap);// Array [15, 21, 3, 168] //映射: 一個對一個
var numbers = [1, 2, 3, 4]; function getSum(total, num) { return total + num; } console.log(numbers.reduce(getSum)); // 10 //彙總:一堆 返回 一個
var ages = [95, 59, 18, 21]; function checkAdult(age) { return age >= 60; } console.log(ages.filter(checkAdult));// 95 //過濾:一堆 返回 部分
//遍歷: 以上的均可以經過 forEach() 來手動實現,而且能夠實現更加個性的自定義操做 var array1 = ['a', 'b', 'c']; array1.forEach(element => { console.log(element); });// a b c
//常見的相似數組的對象是 DOM 操做返回的 NodeList 集合,以及函數內部的 arguments 對象 // NodeList對象 let ps = document.getElementsByClassName('p');//全部取到的 dom 元素都是 NodeList 格式,不是真正意義上的數組 Array.from(ps).filter(p => { return p.textContent.length > 9;//先用 from() 將全部取到的 p 標籤轉換爲真正的數組 而後過濾掉前十個 }); // arguments對象 function foo() { var args = Array.from(arguments); // arguments 也不是真正意義上的數組 }
關於什麼是 json 這裏不過多介紹,主要看看 ES6 裏 json JavaScript對象字面量 是怎樣的
不少JavaScript開發人員都錯誤地把JavaScript對象字面量(Object Literals)稱爲JSON對象(JSON Objects)包括我本身
在這裏推薦一篇文章,感謝那些幫我指出錯誤並告訴我正確知識的人,謝謝微信小程序
當鍵名和鍵值是同樣的狀況下能夠只寫一個,在引入組件與庫中特定方法時,能夠看到(關於如何引入其餘文件,將在以後的文章寫)數組
//傳統 { name: name, } //ES6 { name }
若是在以前瞭解過微信小程序,vue ,或者將要學習那麼應該會常常看到這兩種函數的寫法微信
{ onLoad() { butClick() { return false; } } methods: { butClick() { return false; } } }
可是若是不用框架,寫這樣的代碼,會報錯
這是由於框架其實能夠看作一個函數,上面這種代碼是傳遞給函數的參數(這個參數的接收方法在本篇文章的開頭)
這個參數是以 json 對象的形式傳遞的,
而 ES6 中當 value 旳值是一個函數時能夠省略冒號和 function 關鍵字框架
//傳統 { butClick: function (){ return false; } } //ES6 { butClick() { return false; } }