[ ES6 ] 快速掌握經常使用 ES6 （二）

本篇文章是對以前文章的一個補充，可使 JavaScript 代碼更簡潔

函數

• 參數默認值

在 JavaScript 傳統語法中若是想設置函數默認值通常咱們採用判斷的形式

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'
}
複製代碼

在新的語法中咱們能夠在參數聲明的同時賦予默認值

function example (a = 'string',b = 'number',c = 'json') {
    console.log(a);
    console.log(b);
    console.log(c); // 'string' 'number' 'json'
}
複製代碼

• 參數展開

在 JavaScript 傳統語法中若是不肯定參數的數量，而且想獲取全部的參數，通常使用 arguments （函數自帶的變量，數組類型，存放全部的參數）

function example (){
    console.log(arguments);
}
複製代碼

在新的語法中咱們可使用三個點 ... 來表示接收所有的參數

function example (...oVar){
    console.log(oVar);
}
複製代碼

還能夠結合解構賦值，實現不用按順序傳遞參數

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);
    }
}
複製代碼

數組

• map() 方法建立一個新數組，而後每次從開始給回調函數傳遞一個原來數組的成員，直到結束

let oArray = [5, 7, 1, 56];
const oMap = oArray.map(x => x * 3);
console.log(oMap);//  Array [15, 21, 3, 168]
//映射： 一個對一個
複製代碼

• reduce() 方法接收一個函數做爲累加器(升序執行)，最終計算爲一個值

var numbers = [1, 2, 3, 4];
 
function getSum(total, num) {
    return total + num;
}
console.log(numbers.reduce(getSum)); // 10
//彙總：一堆 返回 一個  
複製代碼

• filter() 方法建立一個新的數組，新數組中的元素是回調函數中符合條件的全部元素。

var ages = [95, 59, 18, 21];

function checkAdult(age) {
    return age >= 60;
}

console.log(ages.filter(checkAdult));// 95 

//過濾：一堆 返回 部分  
複製代碼

• forEach() 方法調用數組的每一個元素,並將元素傳遞給回調函數

//遍歷： 以上的均可以經過 forEach() 來手動實現，而且能夠實現更加個性的自定義操做
var array1 = ['a', 'b', 'c'];

array1.forEach(element => {
  console.log(element);
});// a b c

複製代碼

• Array.from() 方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象

//常見的相似數組的對象是 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 JavaScript對象字面量

關於什麼是 json 這裏不過多介紹，主要看看 ES6 裏 json JavaScript對象字面量 是怎樣的
不少JavaScript開發人員都錯誤地把JavaScript對象字面量（Object Literals）稱爲JSON對象（JSON Objects）包括我本身
在這裏推薦一篇文章,感謝那些幫我指出錯誤並告訴我正確知識的人，謝謝

• key and value

當鍵名和鍵值是同樣的狀況下能夠只寫一個，在引入組件與庫中特定方法時，能夠看到（關於如何引入其餘文件，將在以後的文章寫）

//傳統
{
    name: name,
}

//ES6
{
    name
}
複製代碼

• function
  若是在以前瞭解過微信小程序，vue ，或者將要學習那麼應該會常常看到這兩種函數的寫法

{
    onLoad() {
        butClick() {
            return false;
        }
    }
    
    methods: {
        butClick() {
            return false;
        }
    }
}
複製代碼

可是若是不用框架，寫這樣的代碼，會報錯
這是由於框架其實能夠看作一個函數，上面這種代碼是傳遞給函數的參數（這個參數的接收方法在本篇文章的開頭）
這個參數是以 json 對象的形式傳遞的， 而 ES6 中當 value 旳值是一個函數時能夠省略冒號和 function 關鍵字

//傳統 
{
    butClick: function (){
        return false;
    }
}

//ES6 
{
    butClick() {
        return false;
    }
}
複製代碼

本系列文章僅適合快速入門，想深刻學習的小夥伴能夠看看阮一峯老師的《ECMAScript 6 入門》

[ ES6 ] 快速掌握經常使用 ES6 （一）
[ ES6 ] 快速掌握經常使用 ES6 （二）