let 與 const
let
let a = 1
let b = 2,
c = 3
console.log(a, b, c) // 1 2 3
let 用于聲明一個(gè)塊級(jí)作用域的變量岸裙，所以它不會(huì)造成變量提升。聲明后的變量不允許重復(fù)聲明档悠。let 解決了 var 造成變量提升戏自、覆蓋和泄露等問(wèn)題。
const
const a = 1
console.log(a) // 1
const 用于聲明常量邓嘹，即不允許重新賦值（修改變量指向的內(nèi)存地址）和重復(fù)聲明酣栈。const 也不會(huì)造成變量提升。
有關(guān) var汹押、let 與 const 的詳細(xì)介紹矿筝，可以參考 JS：var、let 與 const 總結(jié)
解構(gòu)
對(duì)象解構(gòu)
基礎(chǔ)用法
const tom = {
name: "Tom",
age: 18,
city: "Beijing",
}
const { name, age } = tom
console.log(name, age) // Tom 18
屬性重命名
const { name: myName } = tom
console.log(myName) // Tom
設(shè)置默認(rèn)值
const { city, country = "China" } = tom
console.log(city, country) // Beijing China
數(shù)組解構(gòu)
const arr = [1, 2, 3]
const [a, b, c] = arr
console.log(a, b, c) // 1 2 3
如果數(shù)組的長(zhǎng)度不一致棚贾，可以使用 ... 來(lái)解構(gòu)窖维，只保留長(zhǎng)度一致的部分。
const arr = [1, 2, 3]
const [a, ...rest] = arr
console.log(a, rest) // 1 [2, 3]
const [a, b, c, ...rest] = arr
console.log(a, b, c, rest) // 1 2 3 []
參數(shù)解構(gòu)
function foo({ name, age }) {
console.log(name, age)
}
foo({ name: "Tom", age: 18 }) // Tom 18
function bar([a, b, c]) {
console.log(a, b, c)
}
bar([1, 2, 3]) // 1 2 3
字符串解構(gòu)
const str = "hello"
const [a, b, c] = str
console.log(a, b, c) // h e l l
字符串相關(guān)
模板字符串
const name = "Tom"
const age = 18
const str = `Hello, I'm ${name}, ${age} years old.`
console.log(str) // Hello, I'm Tom, 18 years old.
模板字符串的出現(xiàn)鸟悴，是字符串的一個(gè)重要特性陈辱，它可以提供更加靈活的字符串拼接方式。
startsWith()
startsWith() 方法用于判斷字符串是否以指定的字符串開(kāi)頭细诸，如果是沛贪，返回 true，否則返回 false震贵。
const str = "hello"
console.log(str.startsWith("h")) // true
console.log(str.startsWith("e")) // false
endsWith()
startsWith() 的兄弟利赋，用于判斷字符串是否以指定的字符串結(jié)尾，如果是猩系，返回 true媚送，否則返回 false。
const str = "hello"
console.log(str.endsWith("o")) // true
console.log(str.endsWith("e")) // false
includes()
用于判斷字符串是否包含指定的字符串寇甸，如果是塘偎，返回 true疗涉，否則返回 false。
const str = "hello"
console.log(str.includes("h")) // true
console.log(str.includes("e")) // true
console.log(str.includes("x")) // false
repeat()
用于將一個(gè)字符串重復(fù) n 次吟秩，如果 n 是小于 1 的數(shù)值咱扣，則返回一個(gè)空字符串。
const str = "ha~"
console.log(str.repeat(3)) // ha~ha~ha~
數(shù)字相關(guān)
Math.sign()
用于獲取一個(gè)數(shù)的符號(hào)涵防，如果是正數(shù)闹伪，則返回 1，如果是負(fù)數(shù)壮池，則返回 -1偏瓤，如果是 0，則返回 0椰憋。
const a = -3
const b = 0
const c = 3
console.log(Math.sign(a)) // -1
console.log(Math.sign(b)) // 0
console.log(Math.sign(c)) // 1
數(shù)組相關(guān)
Array.from()
用于將一個(gè)偽數(shù)組（也成為類數(shù)組）或者可迭代對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組厅克。
將偽數(shù)組轉(zhuǎn)換為數(shù)組
const arrayLike = {
0: "a",
1: "b",
2: "c",
length: 3,
}
console.log(Array.from(arrayLike)) // ['a', 'b', 'c']
將字符串轉(zhuǎn)換為數(shù)組
const str = "hello"
console.log(Array.from(str)) // ['h', 'e', 'l', 'l', 'o']
將 Set 轉(zhuǎn)換為數(shù)組
const mySet = new Set([1, 2, 3])
console.log(Array.from(mySet)) // [1, 2, 3]
將 Map 轉(zhuǎn)換為數(shù)組
const myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
])
console.log(Array.from(myMap)) // [['a', 1], ['b', 2], ['c', 3]]
Array.of()
Array.of() 用于將一組值（用逗號(hào)隔開(kāi)）轉(zhuǎn)換成一個(gè)數(shù)組。
const arr = Array.of(1, 2, 3)
console.log(arr) // [1, 2, 3]
find()
用于獲取數(shù)組中滿足條件（函數(shù)形式返回）的第一個(gè)元素熏矿。
const studentList = [
{
id: 1,
name: "Tom",
age: 12,
},
{
id: 2,
name: "Jerry",
age: 13,
},
{
id: 3,
name: "Bob",
age: 11,
},
]
const student = studentList.find(item => item.age === 13)
console.log(student) // { id: 2, name: 'Jerry', age: 13 }
findIndex()
用于獲取數(shù)組中滿足條件的第一個(gè)元素的索引已骇。
const studentList = [
{
id: 1,
name: "Tom",
age: 12,
},
{
id: 2,
name: "Jerry",
age: 13,
},
{
id: 3,
name: "Bob",
age: 11,
},
]
const index = studentList.findIndex(item => item.age === 13)
console.log(index) // 1
fill()
fill() 方法用于用指定值填充數(shù)組。
const arr = [1, 1, 1, 1, 1]
console.log(arr.fill(0)) // [0, 0, 0, 0, 0]
console.log(arr.fill(0, 1)) // [1, 0, 0, 0, 0]
console.log(arr.fill(0, 1, 3)) // [1, 0, 0, 1, 1]
其中第一個(gè)參數(shù)就是指定值票编，第二個(gè)參數(shù)為起始索引褪储，默認(rèn)為 0，第三個(gè)參數(shù)為終止索引慧域，默認(rèn)為數(shù)組的長(zhǎng)度鲤竹，即填充到最后一位。
對(duì)象
Object.assign()
Object.assign() 用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制（淺拷貝）到目標(biāo)對(duì)象昔榴。
const groupA = {
a: 1,
b: 2,
c: 3,
}
const groupB = {
b: 4,
c: 5,
d: 6,
}
const all = Object.assign(groupA, groupB)
console.log(all) // { a: 1, b: 4, c: 5, d: 6 }
對(duì)于重復(fù)的元素辛藻，將以后面的（最新的）為準(zhǔn)。
簡(jiǎn)潔表示法
ES6 允許在對(duì)象 {} 里面互订，直接寫入變量或函數(shù)名吱肌，然后作為對(duì)象內(nèi)的屬性名。
const str = "hello"
const arr = [1, 2, 3]
const obj = {
str, // 等同于 str: str
arr, // 等同于 arr: arr
num: 1,
}
console.log(obj) // { str: 'hello', arr: [1, 2, 3], num: 1 }
在函數(shù)內(nèi)也可以：
function test() {
let x = 1,
y = 2
return { x, y }
}
console.log(test()) // { x: 1, y: 2 }
函數(shù)
箭頭函數(shù)
const foo = () => {
console.log("foo")
}
foo() // foo
箭頭函數(shù)的語(yǔ)法比函數(shù)表達(dá)式更簡(jiǎn)潔仰禽，并且沒(méi)有自己的 this氮墨，arguments，super 或 new.target吐葵。很適用于需要匿名函數(shù)的地方规揪。
const arr = [1, 2, 3, 4, 5]
const bigger = arr.filter(item => item >= 3)
console.log(bigger) // [ 3, 4, 5 ]
參數(shù)默認(rèn)值
function foo(x = 1, y = 2) {
console.log(x, y)
}
foo() // 1 2
foo(2) // 2 2
foo(2, 3) // 2 3
foo(undefined, 3) // 1 3
參數(shù)展開(kāi)
function foo(x, y, ...rest) {
console.log(x, y, rest)
}
foo(1, 2, 3, 4, 5) // 1 2 [3, 4, 5]
... 一般放在參數(shù)的最后一位，用于獲取函數(shù)調(diào)用時(shí)所有未被使用的參數(shù)温峭。
新的數(shù)據(jù)結(jié)構(gòu)
Set
const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(1)) // true
console.log(set.has(6)) // false
console.log(set.size) // 5
Set 數(shù)據(jù)結(jié)構(gòu)是一個(gè)無(wú)序的集合猛铅，每個(gè)元素都唯一。
Map
Map 和對(duì)象 {} 類似凤藏，都是一些鍵值對(duì)的集合奸忽。但是更加靈活堕伪。
const map = new Map()
map.set("a", 1)
console.log(map) // Map(1) { 'a' => 1 }
Map 的鍵可以是任意值，甚至可以是函數(shù)月杉、對(duì)象
function b() {}
map.set(b, 2)
console.log(map) // Map(2) { 'a' => 1, [Function: b] => 2 }
Map 可以直接被迭代
map.forEach((value, key) => {
console.log(key + " = " + value)
})
// 輸出
// a = 1
// function b() {} = 2
Map 的鍵值對(duì)個(gè)數(shù)可以通過(guò) size 獲取
console.log(map.size) // 2
通用
擴(kuò)展運(yùn)算符（展開(kāi)語(yǔ)法）
const arr = [1, 2]
console.log(...arr) // 1 2
const str = "hello"
console.log(...str) // h e l l o
for in
const obj = { a: 1, b: 2 }
for (let key in obj) {
console.log(key) // a b
}
for in 可以遍歷對(duì)象的鍵名刃跛。
for of
const arr = [1, 2]
for (let item of arr) {
console.log(item) // 1 2
}
for of 可以遍歷數(shù)組的成員。
class
class Student {
constructor(name) {
this.name = name
}
sayName() {
console.log(`My name is ${this.name}`)
}
}
const student = new Student("Bob")
student.sayName() // My name is Bob
class 關(guān)鍵字用于創(chuàng)建一個(gè)類苛萎。可以理解為 ES5 的構(gòu)造函數(shù)的語(yǔ)法糖检号。
關(guān)于構(gòu)造函數(shù)與 class腌歉，可以參考 JS：構(gòu)造函數(shù)總結(jié)。
Promise
const asyncFunc = new Promise((resolve, rejcet) => {
Math.random() > 0.5 ? resolve("fulfilled") : rejcet("rejected")
})
asyncFunc
.then(data => {
console.log(data) // fulfilled
})
.catch(err => {
console.log(err) // rejected
})
.finally(() => {
console.log("finally")
})
Promise 是 ES6 新增的一種異步操作解決方案齐苛。Promise 對(duì)象的狀態(tài)可以有 3 個(gè)：pending翘盖、fulfilled 和 rejected。當(dāng)狀態(tài)發(fā)生改變時(shí)凹蜂，會(huì)觸發(fā)相應(yīng)的回調(diào)函數(shù)馍驯。
關(guān)于更多 Promise 的介紹，可以參考：JS：手寫實(shí)現(xiàn) Promise玛痊。
async/await
async function hello() {
return await Promise.resolve("Hello")
}
hello().then(console.log) // Hello
async/await 是 ES2017 中新增的異步解決方案汰瘫。簡(jiǎn)單來(lái)說(shuō)，它們是基于 Promise 的語(yǔ)法糖擂煞，使異步代碼更易于編寫和閱讀混弥。
async 函數(shù)返回一個(gè) Promise 對(duì)象，await 關(guān)鍵字只能用在 async 函數(shù)中对省，不能用在其他函數(shù)中蝗拿。
關(guān)于更多 async/await 的介紹，可以參考 JS：async/await 總結(jié)蒿涎。
Proxy
Proxy 用于創(chuàng)建一個(gè)對(duì)象的代理哀托，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值劳秋、枚舉仓手、函數(shù)調(diào)用等）∷着可以代理任何對(duì)象俗或，包括數(shù)組∷晖可以直接監(jiān)聽(tīng)整個(gè)對(duì)象而非屬性辛慰，比 Object.defineProperty() 更加簡(jiǎn)潔，更加高效干像，更加安全帅腌。
Proxy 返回的一個(gè)新對(duì)象驰弄，可以只操作新的對(duì)象達(dá)到目的。
const cat = {
name: "Tom",
}
const myCat = new Proxy(cat, {
get(target, property) {
console.log(`我的 ${property} 被讀取了`)
return property in target ? target[property] : undefined
},
set(target, property, value) {
console.log(`我的 ${property} 被設(shè)置成了 ${value}`)
target[property] = value
return true
},
})
myCat.name // expected output: 我被讀取了：name
myCat.name = "Kitty" // expected output: 我的 name 被設(shè)置成了 Kitty
Reflect
Reflect 對(duì)象主要用于訪問(wèn)和修改對(duì)象的屬性速客。
const cat = {
name: "Tom",
}
Reflect.set(cat, "age", 5)
console.log(Reflect.get(cat, "name")) // Tom
console.log(cat.age) // 5
console.log(Reflect.has(cat, "name")) // true
console.log(Reflect.ownKeys(cat)) // ['name', 'age']
Reflect 和 Object 看似雷同戚篙，但存在許多差異，具體可以參考 比較 Reflect 和 Object 方法溺职。
Symbol
const mySymbol = Symbol()
console.log(typeof mySymbol) // "symbol"
console.log(Symbol() === Symbol()) // false
Symbol 是 ES6 新增的一種基本數(shù)據(jù)類型岔擂。Symbol 表示一個(gè)獨(dú)一無(wú)二的值。
Generator
Generator 是 ES6 新增的一種異步編程模型浪耘。
Generator 函數(shù)是一個(gè)狀態(tài)機(jī)乱灵，遇到 yield 就會(huì)暫停執(zhí)行，并返回一個(gè) { value, done } 的對(duì)象七冲，value 屬性表示返回的值痛倚，done 屬性表示是否完成。
function* helloWorldGenerator() {
yield "hello"
yield "world"
return "ending"
}
const hw = helloWorldGenerator()
console.log(hw.next()) // { value: 'hello', done: false }
console.log(hw.next()) // { value: 'world', done: false }
console.log(hw.next()) // { value: 'ending', done: true }
Module
Module 是 ES6 新增的模塊化語(yǔ)法澜躺，可以將代碼拆分成多個(gè)文件蝉稳，并且可以通過(guò) import 和 export 來(lái)導(dǎo)入和導(dǎo)出。
// math.js
export function add(x, y) {
return x + y
}
// app.js
import { add } from "./math"
console.log(add(1, 2)) // 3
如何將 ES6+ 轉(zhuǎn)換為 ES5
-
為什么要將 ES6+ 轉(zhuǎn)換為 ES5掘鄙？
因?yàn)?ES6+ 是 JavaScript 的新語(yǔ)法耘戚，我們雖然可以在開(kāi)發(fā)時(shí)使用，但是直接運(yùn)行在瀏覽器中的話通铲，許多語(yǔ)法瀏覽器是不支持的毕莱，所以要將 ES6+ 轉(zhuǎn)換為 ES5。
-
安裝 Babel
Babel 是一個(gè) JavaScript 編譯器颅夺，可以將 ES6+ 轉(zhuǎn)換為 ES5朋截。
npm i @babel/core babel-loader @babel/preset-env -D@babel/core是 Babel 的核心包。babel-loader是 Webpack 的 loader吧黄，用于在 Webpack 打包時(shí)調(diào)用 Babel部服，從而將 ES6+ 轉(zhuǎn)換為 ES5。@babel/preset-env提供了一些預(yù)置的 Babel 配置拗慨，這是一個(gè)智能預(yù)設(shè)廓八，只要安裝這一個(gè) preset，就會(huì)根據(jù)你設(shè)置的目標(biāo)瀏覽器赵抢，自動(dòng)將代碼中的新特性轉(zhuǎn)換成目標(biāo)瀏覽器支持的代碼剧蹂。-D表示安裝到package.json中的開(kāi)發(fā)依賴。 -
在 Webpack 中使用 Babel
module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, ], }, }
參考資料：
