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

hidogs 發布于2019-08-23 14:07 / 2264人閱讀

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數

本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》
本篇文章是對之前文章的一個補充，可以使 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;
    }
}

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

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

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

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

摘要：常量變量先說說常量和變量的概念吧，常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的，變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。常用實例交換變量的值提取數據解構賦值對提取對象中的數據，尤其有用。本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》學習 20% 的知識完成 80% 的工作關于 ...

ispring 2019-08-23 14:01 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
前端基礎進階（十四）：es6常用基礎合集

摘要：在繼承的構造函數中，我們必須如上面的例子那么調用一次方法，它表示構造函數的繼承，與中利用繼承構造函數是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。 ES6徹底改變了前端的編碼風格，...

Ryan_Li 2019-08-21 18:31 評論0 收藏0
快速掌握JavaScript面試基礎知識(二)

摘要：第一部分請點擊快速掌握面試基礎知識一閉包閉包由一個函數以及該函數定義是所在的環境組成。當匿名函數執行的時候，的值為。這個問題可以改用后面會介紹方法來解決，通過對每一個匿名函數構建獨立的外部作用域來實現。譯者按：總結了大量JavaScript基本知識點，很有用！原文: The Definitive JavaScript Handbook for your next develope...

fyber 2019-08-26 11:43 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0