菜园前端

Appearance

基础使用 ​

let

块级作用域，也就是在同一个作用域内，不能够重复声明同一个变量。

javascript
let name = 'xiaoming'
let name = 'xiaoming'

const

在 let 的基础上，声明的变量不能够被重新赋值。

javascript
const name = 'xiaoming'
const name = 'xiaoming'

解构赋值

简化对象获取属性、简化数组获取元素的写法。

javascript
const [a, b, c] = [1, 2, 3]

const { name, age } = { name: 'xiaoming', age: 18 }
const [a, b, c] = [1, 2, 3]

const { name, age } = { name: 'xiaoming', age: 18 }

扩展运算符

把对象的属性、数组的元素拆散成单个。

javascript
const arr = [1, 2, 3]
const arr2 = [...arr]

const obj = { name: 'xiaoming', age: 18 }
const obj2 = { ...obj }
const arr = [1, 2, 3]
const arr2 = [...arr]

const obj = { name: 'xiaoming', age: 18 }
const obj2 = { ...obj }

模板字符串

简化字符串拼接 + 写法。

javascript
const name = 'xiaoming'

const res = `i am ${name}`
const name = 'xiaoming'

const res = `i am ${name}`

箭头函数

简化 function 写法，没有 this 指向。

javascript
const fn = (name) => {
    return name
}

const fn = (name) => name
const fn = (name) => {
    return name
}

const fn = (name) => name

for...of

循环语句（只能遍历数组），与 for...in 类似， for...in 是返回 key ，而 for...of 是返回 value 。

javascript
for (const value of arr) {
    console.log(value)
}
for (const value of arr) {
    console.log(value)
}

Promise

异步函数，延迟返回函数结果。

javascript
const score = 80

const p1 = new Promise((resolve, reject) => {
    if (score > 60) {
        resolve('考试通过了')
    } else {
        reject('考试不通过')
    }
})

// 成功
p1.then((res) => {
    console.log(res) // 考试通过了
})

// 失败
p1.then((res) => {
    console.log(res) // 考试不通过
})
const score = 80

const p1 = new Promise((resolve, reject) => {
    if (score > 60) {
        resolve('考试通过了')
    } else {
        reject('考试不通过')
    }
})

// 成功
p1.then((res) => {
    console.log(res) // 考试通过了
})

// 失败
p1.then((res) => {
    console.log(res) // 考试不通过
})

Async、Await

异步函数，暂时可以理解为是 Promise 的语法糖（但实际不是），语法糖就理解是简化代码的意思。主要是让异步的代码写起来更像同步代码。

javascript
async function fn() {
    const res = await p1
}
async function fn() {
    const res = await p1
}

Class

简化使用 function 实现类（构造函数）的写法。

javascript
class Person {
    constructor() {}
    myName() {}
}
class Person {
    constructor() {}
    myName() {}
}

ESM 模块化（import、export）

导出（a.js）。

javascript
const name = 'xiaoming'

export { name }
const name = 'xiaoming'

export { name }

导入（b.js）。

javascript
import { name } from './a.js'
import { name } from './a.js'

Map

数据结构字典，是一种无序且唯一的数据结构。

javascript
const map = new Map()

map.set('name', 'xiaoming')
const map = new Map()

map.set('name', 'xiaoming')

Set

数据结构集合，是一种无序且唯一的数据结构。

javascript
const set = new Set()

set.add(1)
const set = new Set()

set.add(1)