JavaScript es6學習筆記

1、let 不會聲明提前

    
    console.log('a1:', a)     //a 被聲明提前
    var a = 9;    //  undefined
  
   console.log('a1:', a)     //a 不會被聲明提前
    let a = 9;    // 報錯  Uncaught SyntaxError: Identifier 'a' has already been declared

2 、 let 不可以重復聲明

     var a = 11;
    console.log('a1:', a)  // 11
    var a = 12;   
    console.log('a2:', a)  // 12

     let a = 11;
    console.log('a1:', a)  
    let a = 12;    // 報錯 SyntaxError: Identifier 'a' has already been declared
    console.log('a2:', a)  

3、let 創建局部變量(塊級)

  for (var i = 0; i < 5; i++) {
        console.log('i:', i)
    }
    console.log('i:', i)      // 5

  for (let j = 0; j < 5; j++) {
        console.log('j:', j)
    }
    console.log('j:', j)    // j is not defined

    function show(args) {
        { // 添加一對大括號  創建塊級作用域 
            let args = '9999'      
            console.log('args:', args)
        }
    }
    show(8888)

4 includes & startWith & endWith

    let str = 'www.lxweimin.com';
    let n1 = str.includes('yy');  // str 中是否包含 "yy"  直接返回 true/false  
    let n2 = str.startsWith('jianshu', 4)  //str 第四個位置開始  是否是以"jianshu"開頭
    let n3 = str.startsWith('http')  // str  是否是以"http"開頭
   let n4 = str.endsWith('jianshu', 11)   
    console.log('n1:', n1)   // false
    console.log('n2:', n2)  // true
    console.log('n3:', n3) // false
    console.log('n4:', n4) // true

5 模版字符串 變量和函數的使用
1??變量和無參數函數的使用

 let userName = "xiaoming";
 let userAge = 12;
 function showUser() {
        return '1234'
   }
  let str = `userName=${userName},userAge=${userAge},user=${showUser()}`;
  console.log('str', str)

2?? 有參數函數使用
函數里第一參數 a 代表{}外的字符 b代表第一個{} 以此類推

   function showUser(a, b, c, d) {
        return a[0] + b + a[1] + c + a[2] + d;
    }
    let userName = "xiaoming";
    let userAge = 12;
    let logo = '1.jpg';
    let str = showUser `name=${userName},age=${userAge},logo=${logo}`;
    console.log('str', str)

6 函數默認值 & 多參數

   function fun1(x, y = 2) {   //默認參數
        return x + y;
    }
    console.log('fun1:', fun1(1))
      
    function fun2(...n) { //多參數 
        console.log('n:', n);
        console.log('length:', n.length);
        for (var i = 0; i < n.length; i++) {
            console.log(`i${i}:`, n[i])
        }
    }
    fun2(1, 2, 3)

7箭頭函數

    let fun1 = (x, y) => {
        return x + y;
    }
    let fun2 = x => { //單參數 可以省略小括號
        return x;
    }
    let fun3 = x => x; // 單參數 單行函數體   小括號&大括號&return 可省略

8 函數尾調用 (Tail Call)
函數尾調用就是指函數的最后一步是調用另一個函數

    let fun1 = (x, y) => x + y;
    let fun2 = () => { //屬于尾調用
        return fun1(2, 3)
    }

    let fun3 = () => { // 不屬于尾調用
        let n = fun1(2, 3);
        return n
    }

    let fun4 = () => { // 不屬于尾調用
        return fun1(2, 3) + 1;
    }
  let factorial = (n) => {
        if (n <= 1) {
            return 1;
        } else {
            return n * factorial(n - 1)  //不屬于函數尾調用
        }
    }
    console.log('factorial:', factorial(4))

    let factorial2 = (n, p = 1) => {
        if (n <= 1) {
            return 1 * p;
        } else {
            let result = n * p
            return factorial2(n - 1, result) //屬于函數尾調用  每次遞歸都不會增加調用棧的長度,只是更新當前的堆棧幀而已。也就避免了內存的浪費和爆棧的危險。
        }
    }

9 ... 擴展運算符 簡化參數寫法

  let add = (...n) => {
        let count = 0
        n.forEach((val, i) => {
            count += val
        })
        return count
    }
    let num = [1, 2, 3]
    console.log('total', add(...num))

10 filter

    let num = [1, 2, 3, 3];
    let num1 = num.filter((x) => {
        return x != 3
    })
    console.log('num1', num1)

11 set (利用set不能重復的屬性 實現 去重 & 交集 & 差集)

    let set2 = new Set([4, 6, 8, 2, 1]);
    let set3 = new Set([3, 6, 8, 7, 1]);
    set2.add(0);
    set2.delete(8);
    console.log('set2:', set2);
    let arr = [3, 5, 7, 5, 2, 1];
    let set1 = new Set(arr); //去重
    console.log('set1:', set1);
    let set2 = new Set([4, 6, 8, 2, 1]);
    let set3 = new Set([3, 6, 8, 7, 1]);
    let set4 = new Set([...set2, ...set3]); //合并兩個set 去重 set不允許重復
    let set5 = new Set([...set2].filter((val) => {
        return set3.has(val)
    })); //交集 
    let set6 = new Set([...set2].filter((val) => {
        return !set3.has(val)
    })); //差集 
    console.log('set4:', set4);
    console.log('set5:', set5);
    console.log('set6:', set6);

12 map map里面key除了string 還可以是其他類型的

    let num = 123;
    let arr = [1, 2, 3, 4];
    let fun = function() {};
    let obj = {};
    const map1 = new Map();
    map1.set(num, 'q1');
    map1.set(arr, 'q2');
    map1.set(fun, 'q3');
    map1.set(obj, 'q4');
    console.log('map:', map1)
    console.log('map:', map1.keys())
    for (const key of map1.keys()) {
        console.log('key', key);
    }
  const map2 = new Map([
        ['s1', 'as1'],
        ['s2', 'as2'],
        ['s3', 'as3'],
        ['s4', 'as4'],
    ])
    map2.set('s5', 'as5');
    map2.delete('s3');
    console.log(map2.has('s3'))
    console.log(map2)
    console.log(map2.values())
    console.log([...map2.values()])
    console.log(map2.keys())
    console.log([...map2.keys()])

    console.log(map2.entries())
    console.log([...map2.entries()])

13 export & import

//index.html
import js1 from './js/1.js'; console.log('username',js1.userName); js1.fun1(5),console.log('fun2',js1.fun2())

//1.js
let m = 2;
import js2 from './2.js'

function fun2() {
    return 666;
}
export default {
    userName: 'kiw',
    fun1: (x) => {
        console.log(`fun1= ${x}`);
    },
    fun2: () => {
        return js2.m
    }
}
// 2.js
let m = 100;
export default {
    'm': m,
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。