es6語法總結

HuangQiaoqi發表於2024-05-04

ES6常用語法總結

​ ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年釋出的，所以又稱ECMAScript 2015。也就是說，ES6就是ES2015。雖然目前並不是所有瀏覽器都能相容ES6全部特性，但越來越多的程式設計師在實際專案當中已經開始使用ES6了。

【1】let和const

​ let定義變數

​ const定義函式

​ var以後儘量少用

# 在ES6之前，我們都是用var來宣告變數，而且JS只有函式作用域和全域性作用域，沒有塊級作用域，所以{}限定不了var宣告變數的訪問範圍。

# ES6 新增了let命令，用來宣告區域性變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效，而且有暫時性死區的約束



# "暫時性死區"（Temporal Dead Zone，簡稱 TDZ）是指在 ES6 中使用 let 或 const 宣告變數時，變數存在但無法訪問的區域。這種行為是為了在 JavaScript 中引入塊級作用域而設計的。

# 在 JavaScript 中，使用 var 宣告的變數在其宣告語句之前就可以被訪問，這種行為稱為"變數提升"。而在使用 let 或 const 宣告變數時，變數雖然存在於作用域中，但是在宣告語句之前訪問這些變數會導致引發 ReferenceError 異常。

# 暫時性死區的產生原因是，let 和 const 宣告的變數在進入作用域時就已經被建立，並且被繫結到了該作用域中，但是在變數的宣告語句之前，訪問這些變數會進入暫時性死區，因為此時變數尚未初始化

let

for(let i = 0; i < 10; i++) {

 }
 console.log(i) // 報錯

// 上面用let定義的i只會在for迴圈體有效，在循壞體外應用就會報錯，let具有塊級作用域的。var不存在塊級作用域問題，具有全域性變數提示的問題存在，

const

const a = 10；
    a = 20；
console.log(a)  //TypeError: Assignment to constant variable.
上面程式碼表明改變常量的值會報錯。
const用於聲名一個只讀的常量，常量的值不支援改變

【2】箭頭函式

箭頭函式和普通匿名函式有哪些不同？

  1. 函式體內的this物件，指向所在的物件。
  2. 不可以當作建構函式
  3. 不可以使用arguments物件，該物件在函式體內不存在，如果要用，可以使用rest引數代替
  4. 不可以使用yield命令

ES6 允許使用“箭頭”（=>）定義函式。

場景：用於替換匿名函式

基本用法

//匿名函式
    div.onclick=function(){
        console.log("你好")
    }
    //箭頭函式
    div.onclick=()=>{
        console.log("你好")
    }

有一個引數的箭頭函式

var fn=(a)=>{
        console.log("abc");
    }
    //等價於：
    var fn=a=>{
        console.log("abc");
    }

返回值只有一行的箭頭函式

var fn=a=>a+'nb'

有2個及更多引數的箭頭函式

 var f=(a,b,c)=>{
        console.log("abc")
    }

var p={
        age:18,
        //es6中物件方法的箭頭函式表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推薦使用的方式☆☆☆：es6中物件方法的簡寫形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say內部的延遲函式：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

【3】模板字串

語法

let a=`我的名字是:${name}`

字串和變數拼接

let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;

字串換行

var box =`<div>
            <p>
              <span>123</span>
            </p>
            <p>${a1}</p>
         </div>`;

【4】解構賦值

​ 解構賦值允許從陣列或物件中提取資料，並將其賦值給變數。
​ 解構賦值可以方便地交換變數的值，同時還支援預設值

物件結構賦值

var obj ={ name:"abc",age:18 };
    //用解構賦值的方式獲取name、age

    let { name } = obj; //建立了一個變數name，值=obj.name
    console.log(name);  //"abc"

    let { age } =obj;
    console.log(age);  //18

函式引數結構賦值

function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等價於
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

【5】展開運算

​ 展開運算子...可以將可迭代物件宅開為多個元素

// 案例1
let a={age:19,hobby:'抽菸'}
let user={name:'green',age:21,...a}
console.log(user) //{ name: 'lqz', age: 19, hobby: '抽菸' }

// 案例2
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1) // [ 44, 55, 66, 1, 2, 3 ]

// 案例3
# 案例3
function demo01(a,...b){
    console.log(a)
    console.log(b)
}
demo01(1,2,34,4)
let l=[44,5,66,7]
demo01(...l)

【6】匯入匯出

在建立JavaScript模組時，export 用於從模組中匯出實時繫結的函式、物件或原始值，以便其他程式可以透過 import使用它們。
被匯出的繫結值依然可以在本地進行修改。
在使用import 進行匯入時，這些繫結值只能被匯入模組所讀取，但在 export 匯出模組中對這些繫結值進行修改，所修改的值也會實時地更新。

exports

ES6模組只支援靜態匯出，只可以在模組的最外層作用域使用export，不可在條件語句與函式作用域中使用。

Named exports (命名匯出)

​ 這種方式主要用於匯出多個函式或者變數, 明確知道匯出的變數名稱。
使用：只需要在變數或函式前面加 export 關鍵字即可。
使用場景：比如 utils、tools、common 之類的工具類函式集，或者全站統一變數等。

  1. export 後面不可以是表示式，因為表示式只有值，沒有名字。
  2. 每個模組包含任意數量的匯出。
// 1 命名匯出
export let name='green'
export function add(a,b){
    return a+b
}
export const age=100

// 2 匯入
// 2.1 命名匯出的匯入
import {add,age} from './green/utils.js'
console.log(add(8,9))
console.log(age)
// 2.2 命名匯出的匯入
<script type="module">
    import * as xx from './green/utils.js'
    console.log(xx.add(8,9))
    console.log(xx.age)

</script>

// 2.3 命名匯出的匯入
<script type="module">
    // 命名匯出的匯入
    import {add as myadd}  from './lqz/utils.js'
    console.log(myadd(8,9))
</script>

Default exports (預設匯出)

​ 這種方式主要用於匯出類檔案或一個功能比較單一的函式檔案；
使用：只需要在變數或函式前面加 export default 關鍵字即可。

  1. 每個模組最多隻能有一個預設匯出；
  2. 預設匯出可以視為名字是default的模組輸出變數；
  3. 預設匯出後面可以是表示式，因為它只需要值。

匯出一個值：

export default 123;

匯出一個函式：

// myFunc.js
export default function () { ... };

// index.js
import myFunc from 'myFunc';
myFunc();

匯出一個類：

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };

// index.js
import MyClass from 'MyClass';

export default 與 export 的區別：

  • 不需要知道匯出的具體變數名；
  • 匯入【import】時不需要 { } 包裹；

相關文章