ES6入門到進階（一）：let、解構賦值、字符串模板、函數

1、簡介

ES6 -> ECMA 標準

ES6 -> 2015年6月 ES6.0

每一年6月份，發佈一個版本

ES6環境:

webpack3.x

Traceur

2、let、const

2.1 關於定義(聲明)變量

1. var a=12; 以前
2. let let a=12 至關於以前的 var
3. const 常量， 定義好了不能改變

2.2 做用域:

1. 全局做用域
2. 函數做用域

2.3 let注意

1.沒有預解析，不存在變量提高

在代碼塊內，只要let定義變量，在以前使用，都是報錯
先定義完，再使用

<script>
        let a = 12;
        function fn(){
            alert(a);  //TDZ開始  暫時性死區
            alert(b)
            let a = 5;  //TDZ 結束
            let b = 12;
        }
        fn();
    </script>

2.同一個做用域裏， 不能重複定義變量，能夠賦值

3.for循環，for循環裏面是父級做用域，裏面又一個

for(let i = 0; i<3; i++){
           let i = 'abc';
           console.log(i);
       }

2.4 塊級做用域:

{
        //塊級做用域
    }
    
    {{{{let a = 12}}}}

    if(){xx}
    for(){}
    while(){}

2.5 const: 特性和let同樣

const定義變量不能修改

const定義完變量，必須有值，不能後賦值，不能修改,通常定義配置文件。
可是對象是能夠修改的，由於它是引用

凍結：Object.freeze(對象)，就能夠不被修改。

const config={
        host:
        username:
        password:
        version:
    }


{
    //TODO
}

IIFE，當即執行匿名函數
(function(){
    //TODO
})()

建議:

之後 就用 let  不要在使用var
    
    const http = require('http');

3、解構賦值(重要，經常使用)

*  很是有用，特別在作數據交互  ajax

3.1 格式

let [a,b,c] =[12,5, 6];

注意: 左右兩邊，結構格式要保持一致

json:
    let {name,age, job} = {
        name:'Strive',
        age:18,
        job:'碼畜'
    };

別名：

let {name:n,age:g, job:a} = json;

3.2 解構時候能夠給默認值

let [a,b, c="默認值"] = ['aaa','bbb'];

注意：null和undefined，null是一個對象，有值

let a = 12;
let b = 5;

    

import {a,b,c} from './mod'

4、字符串模板(經常使用)

4.1 字符串模板：``

優勢: 能夠隨意換行
    `${變量名字}`

字符串鏈接（之前用：+ ），要死人的。
如今：${變量名字}

let name ='Strive';
        let age = 18;
        let str = `這我的叫${name}, 年齡是 ${age}歲`;

4.2 關於字符串一些東西

字符串查找:

str.indexOf(要找的東西)   返回索引(位置) ，沒找到返回-1
str.includes(要找的東西)   返回值  true/false

判斷瀏覽器: includes

<script>
        if(navigator.userAgent.includes('Chrome')){
            alert('是chrome')
        }else{
            alert('!是chrome')
        }
    </script>

字符串是否以誰開頭:

str.startsWith(檢測東西)

        檢測地址

字符串是否以誰結尾:

str.endsWith(檢測東西)

        .png

重複字符串:

str.repeat(次數);

填充字符串:

str.padStart(整個字符串長度, 填充東西)   往前填充
    str.padEnd(整個字符串長度, 填充東西)    日後填充

    str.padStart(str.length+padStr.length, padStr)

5、函數(重要)

5.1 函數變化

1. 函數默認參數
    function show({x=0,y=0}={}){
        console.log(x,y);
    }
    show()
2. 函數參數默認已經定義了，不能再使用let，const聲明
    function show(a=18){
        let a = 101;  //錯誤
        console.log(a);
    }
    show()

5.2 擴展運算符、Rest運算符:

擴展運算符：...

展開數組：

<script>
        let arr = ['apple','banana','orange'];

        console.log(arr);
        console.log(...arr);
    </script>

... :
    [1,2,3,4]  -> ... [1,2,3,4]  ->  1,2,3,4,5
...:
    1,2,3,4,5  -> ...1,2,3,4,5  ->  [1,2,3,4,5]

剩餘參數: 必須放到最後

function show(a,b,...c){
    console.log(a,b);
    console.log(c);
}
show(1,2,3,4,5)

5.3 箭頭函數:(重要，經常使用)

=>

let show = () => 1;

格式：

() => return東西

或者

() =>{
    語句
    return
}

例子：

var f = v => v;
//等同於
var f = function(v){
    return v;
}
var sum = (num1,num2) => num1 + num2;
//等同於

var sum = function(num1,num2){
    return num1 + num2;
}

[1,2,3].map(function (x) {
    return x * x;
});
//箭頭函數寫法
[1,2,3].map(x => x *x); //簡潔了許多

從例子咱們能夠看出，省略了function，花括號{}用=>代替了。這種寫法更簡潔了。

注意：

1. this問題, ，不在是運行時所在的對象
2. 箭頭函數裏面沒有arguments, 用 ‘...’
3. 箭頭函數不能當構造函數

下一篇：ES6入門到進階（二）：循環、數組、對象

參考視頻資料：ES6經典入門到進階