05-ES6語法總結

小满三岁啦發表於2024-04-29

var 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 宣告的變數在進入作用域時就已經被建立，並且被繫結到了該作用域中，但是在變數的宣告語句之前，訪問這些變數會進入暫時性死區，因為此時變數尚未初始化

<script>
    var name = "小滿"
    console.log(window.name) // 小滿
    console.log(name) // 小滿
    console.log(this.name) // 小滿

    let hobby = "摸魚"
    console.log(hobby) // 摸魚
    console.log(window.hobby) // undefined
</script>

https://www.freecodecamp.org/chinese/news/var-let-and-const-whats-the-difference/

箭頭函式

    # 1 簡化程式碼
    # 2 箭頭函式內部，沒有自己的this---》使用上一級的
    	let f=()=>{}
        
    # 3 this指向問題
    # 1 在全域性上下文中，this 指向全域性物件，在瀏覽器環境中通常是 window 物件，在 Node.js 中是 global 物件
        console.log(this) # window 物件
        
    # 2 函式呼叫：
        # 2.1 如果函式作為普通函式呼叫，this 指向全域性物件（在嚴格模式下為 undefined）
        # 2.2 如果函式作為物件的方法呼叫，this 指向呼叫該方法的物件。
    
    # 3 建構函式：
    	在建構函式中，this 指向新建立的例項物件
        
    # 4 箭頭函式：
    箭頭函式的 this 指向定義時所在的作用域的 this 值，而不是呼叫時的 this 值。換句話說，箭頭函式的 this 是詞法作用域，而不是動態作用域
    
    # 5 DOM 事件處理函式：
    在 DOM 事件處理函式中，this 指向觸發事件的 DOM 元素
    
    #6  ES6 類方法：
    在 ES6 類方法中，this 指向呼叫該方法的物件例項

模板字串

let name = "小滿"
console.log(`你好，我是${name}`) // 你好，我是小滿

解構賦值

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

  1. 解構賦值允許從陣列或物件中提取資料，並將其賦值給變數。
  2. 解構賦值可以方便地交換變數的值，同時還支援預設值。
// 解物件
let user = {name: "小滿", age:3, hobby:"摸魚"}
console.log(user.name)  // 小滿

let {name, age, hobby, gender} = user
console.log(name, age, hobby, gender) // 小滿 3 摸魚 undefined

let {name, age, hobby, gender="保密"} = user
console.log(name, age, hobby, gender) // 小滿 3 摸魚 保密

// 解陣列
hobbyArr = ['摸魚', "搶人頭", "逃課"]
let h1 = hobbyArr[0]
let h2 = hobbyArr[1]
let h3 = hobbyArr[2]

console.log(h1, h2, h3) // 摸魚 搶人頭 逃課

let [a, b, c] = hobbyArr
console.log(a, b, c) // 摸魚 搶人頭 逃課

let [a1, a2, a3, a4] = hobbyArr
console.log(a1, a2, a3, a4) // 摸魚 搶人頭 逃課 undefined

// 交換變數
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

// 解析函式返回的陣列
function f(){
    return ["小滿", "大喬", "阿珂"]
}

const [name1, name2, name3] = f()
console.log(name1, name2, name3); // 小滿 大喬 阿珂

// 忽略某些返回值
// 大喬老欺負我，太討厭了 (〃＞目＜) 忽略掉她
function f(){
    return ["小滿", "大喬", "阿珂"]
}

const [name1, , name2] = f()
console.log(name1, name2); // 小滿 阿珂

// 忽略全部返回值
function f(){
    return ["小滿", "大喬", "阿珂"]
}

const [, ,] = f()
console.log(name1, name2); // name1 is not defined

預設引數

function userInfo(name, age=3){
    console.log(name, age);
}
userInfo("小滿") // 小滿 3

展開運算

// 展開運算
const [name, age, ...{pop, push}] = [1, 2]
console.log(name); // 1
console.log(age); // 2
console.log(pop); // function pop() 
console.log(push); // function push()

const nameList = ["小滿", "大喬", ...["阿珂", "海月"]]
console.log(nameList); // ["小滿", "大喬", "阿珂", "海月"]

const [a, b, ...[c, d]] = [1, 2, 3, 4]
console.log(a, b, c, d); // 1 2 3 4

const userInfo = {name:"小滿", age:3}
const profile = {hobby:"摸魚", gender:"女", ...userInfo}
console.log(profile); // {hobby: "摸魚", gender: "女", name: "小滿", age: 3}

模組化

  1. 必須要先匯出，才能匯入正常使用。
  2. 預設匯出只能匯出一次，也就是隻能有一次 export
  3. 如果匯入命令寫在js內部，必須加上<script type="module">匯入命令</script>
  4. 如果在vue中，不需要新增type=module，直接寫就可以了。
  5. 使用import * as xx 可以匯入全部並起一個別名，後續使用別名操作就可以了

預設匯出和匯入

// ./xm.dq.js
// 被匯出的js檔案
let name = "大喬"
function add(a, b){
	return a + b
}

// 完整寫法
// export default {
// 	name: name,
// 	add: add
// }


// 省略寫法 推薦
// 必須要先匯出
export default{
	name,
	add
}

<!-- 正常匯入使用 js內匯入不要忘記加 module -->
<script type="module">
    import dq from "./xm/dq.js"

    console.log(dq.name); // 大喬
    console.log(dq.add(1, 2));  // 3

</script>

命名匯出和匯入

// 1. 依次匯出
export let name = "小滿"
export function add(a, b){
	return a + b
}
export let hobby = ['摸魚', "逃課"]

<!-- 2. 匯入 -->
<script type="module">
    import {name, hobby} from "./xm/utils.js"

    console.log(name); // 小滿
    console.log(hobby); // ["摸魚", "逃課"]

</script>

匯入全部 * as xx

<!-- 匯出命令不變 -->
<script type="module">
    import * as xm from './xm/utils.js'

    console.log(xm.name); // 小滿
    console.log(xm.hobby); // ["摸魚", "逃課"]
    console.log(xm.add(1, 4)); // 5

</script>

匯入某一個起一個別名

<script type="module">		 
    import {add as myadd} from "./xm/utils.js"
    console.log(myadd(2, 3)); // 5
</script>

如果匯入的是index.js，index.js可以省略（很少用到）

// 1. 匯出
export default {
	name: "小滿",
	age: 3,
	showName(){
		console.log(this.name);
	}
}

// 2. 匯入
import xm from "./xm"
		
console.log(xm.age);
xm.showName()

相關文章