學習ES6

時間 2019-11-17

標籤學習 es6 欄目 JavaScript 简体版

原文原文鏈接

從去年開始咱們老大就要求咱們看下ES6，耐何一直沒看！好吧，如今學習也不晚！html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 的小特色</title>
</head>
<body>


</body>
<script>
    //1.設置對象鍵值語法
    //ES5寫法
    var myKey = 'key3';
    var obj = {
        key1: 'one',
        key2: 'two',
    }
    //若是要你初始化後要增長第三個只能
    obj[myKey] = 'three';
    console.log(obj);
    //可是es6我能夠這樣寫
    let newKey = 'key3';
    let newObj = {
        key1: 'one',
        key2: 'two',
        [newKey]: 'three' //這樣加入呆棒
    }
    console.log(newObj);
    /*******************************************************************************************************************/
    //2.箭頭函數
    let totalAmount = total => total * 1.1; //totalAmount 就是定義的一函數 total 是本函數的參數 => 裏的運算是即將返回的值
    let total_result = totalAmount(10);
    console.log(total_result);
    let moreAmount = (money, rate, stages) => (money * rate * stages) + money; //簡單的利率函數 方便吧 定義一個moreAmount 函數 傳了三個參數 金額 利率 期數 返回 期數 * 利率 * 本金 再加上本金
    let totalMoney = moreAmount(100,0.033, 12);
    console.log(totalMoney);
    //在箭頭函數裏不用寫function 不用寫return 這兩個關鍵詞也不用寫();

    /*******************************************************************************************************************/
    //3.find/findIndex/fill
    let ages = [12, 14, 15, 16, 21, 23];
    var index=ages.indexOf(15); //index==2
    console.log(index);
    //上面是es5得到數組索引方法 但沒有提供一個方法來計算查詢條件。
    //下面es6語法寫法
    let firstA = ages.find(age => age >= 18); //經過find方法查找 傳入參數 age 返回查找到age 大於等於 18的值，只會返回條件最近的那一個
    console.info(firstA);
    let firstB = ages.findIndex(age => age >= 18); //取出大於等於18的索引下標，只會取出一個最近值
    console.trace(firstB);
    //填充
    let fill_value = [0, 8, 9].fill(7, 1);//填充覆蓋原有值 第一個參數填充值，第二個從哪一個索引開始填充
    console.log(fill_value);

    /*******************************************************************************************************************/
    //4.迭代器執行原理 擴展運算符表示一個數組或者一個可迭代對象能夠在一次調用中將它們的內容分割爲獨立的參數。通俗講就是運算符將一個數組，變爲參數序列。
    let arr_keys = ["a", "b", "c"].keys();
    console.log(arr_keys.next());
    console.log(Object.keys(["a", "b", "c"]));
    let b = ["a", ,"b"];
    var bb = Object.keys(b);//並不會把索引1 打印出來
    console.log(bb);
    var cc = [...b.keys()]; //它會把索引1給打印出來 擴展運算符：...
    console.log(cc);
    //擴展運算符取代apply方法
    var r1 = Math.max.apply(null, [1,2,3,5]); //ES5寫法
    console.log(r1);
    var r2 = Math.max(...[2,4,5,7]); //ES6寫法
    console.log(r2);
    //字符串轉數組
    var Jstr = 'hello world'; //將把每一個字符都轉成數組的V值
    var Jarr = [...Jstr];
    console.warn(Jarr);
    //將數組插入另外一個數組
    var arrA1 = [1,2,3,4];
    var arrA2 = [5,6,7];
    var arrA3 = [...arrA1, ...arrA2];//打印出來可不是0=>,1=>而是 1，2,3,4,5,6,7
    console.log(arrA3);
    //參數展開 函數傳參 在ES5中數組傳參必須是 arr[key]的方式傳入，這種方式是否是很蛋疼
    let Afun = function (a, b, c) {
        console.log(a);
        console.info(b);
        console.warn(c);
    }
    //ES5傳參
    Afun(arrA2[0], arrA2[1], arrA2[2]);
    //ES6中
    Afun(...arrA2); //超棒，超快

    /*******************************************************************************************************************/
    //5.默認參數+不定參數+參數展開 在es5中咱們寫的函數沒有辦法傳默認值的，無奈的都是在函數體內作三元表達式
    function protin(x, y= 10) {
        return x + y;//若是y沒有傳值將會使用默認的10
    }
    console.log(protin(2)); //12
    //不定個的參數 用擴展運算符來
    function protinA(x, ...y) {
        return x + y.length;
    }
    console.log(protinA(1, "hello", "world"));//3
    //若是是回調函數的時候 不須要再用 callback啦
    function protinB (name = 'Anon', callback = function(){}) {
        console.log(console.log(`whats you name${name}`));
        //再也不須要「callback && callback()」啦 (不須要條件判斷)
        callback();
    }
    /*******************************************************************************************************************/
    //for of 循環
    var args = [1, 2, 3, 4];
    for (let el of args) {
        console.warn(el);
    }

    /*******************************************************************************************************************/
    //6.解構賦值
    //數組解構
    var arrB1 = [1,2,3];
    var [a1,b1,c1] = arrB1;
    console.log(`${a1} - ${b1} -${c1}`); //1 - 2 -3

</script>
</html>

1. 學習es6
2. es6學習
3. ES6學習（四）
4. Javascript ES6學習
5. 學習ES6(上)
6. ES6學習
7. ES6學習(下)
8. es6的學習
9. ES6學習（二）
10. ES6學習（1）
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。