本文是我在學(xué)習(xí)過程中記錄學(xué)習(xí)的點(diǎn)點(diǎn)滴滴，目的是為了學(xué)完之后鞏固一下順便也和大家分享一下，日后忘記了也可以方便快速的復(fù)習(xí)。
前言
今天學(xué)習(xí)的主要是關(guān)于ES6新語法知識的理解和應(yīng)用
一、垃圾回收機(jī)制（Garbage Collection）
棧負(fù)責(zé)存放簡單數(shù)據(jù)類型，堆負(fù)責(zé)存放復(fù)雜數(shù)據(jù)類型，但是復(fù)雜數(shù)據(jù)類型會把內(nèi)容存在堆中，在棧中會存一個(gè)變量指向堆中的數(shù)據(jù)。垃圾回收就是將不再使用的對象的那片內(nèi)存回收。
棧：存放簡單數(shù)據(jù)類型、局部變量、參數(shù)等，由系統(tǒng)自動(dòng)分配和釋放。
堆：存放復(fù)雜數(shù)據(jù)類型，由程序員分配和釋放，程序員不釋放則由垃圾回收機(jī)制回收。所以垃圾回收機(jī)制一般回收復(fù)雜數(shù)據(jù)類型。
1、全局變量一般不會回收（關(guān)閉頁面才會回收）
2、局部變量沒有引用了，用完即被回收
3、垃圾回收機(jī)制一般回收復(fù)雜數(shù)據(jù)類型
1.1、引用計(jì)數(shù)法
當(dāng)一個(gè)變量、函數(shù)、對象被別的地方引用了一次，則該變量的引用次數(shù)加一，減少引用一次 則減一，直至為0則被釋放。
缺陷：如果兩片內(nèi)存互相引用則一直不會被垃圾回收機(jī)制回收，就會出現(xiàn)內(nèi)存泄漏問題。
1.2、標(biāo)記清除法（引用計(jì)數(shù)法升級版）
1、將“不再使用的對象”定義為“無法到達(dá)的對象”。
2、從根部定時(shí)的掃描內(nèi)存中對象，凡是能從根部到達(dá)的對象，都是還需要使用的，凡是到達(dá)不了的就是認(rèn)為不再需要，即便它們互相引用也會被清除，因?yàn)樗鼈兲幱谟坞x態(tài)，從根部不能到達(dá)。
1.3、內(nèi)存泄漏
由于某種原因某片內(nèi)存無法被垃圾回收機(jī)制回收或無法被釋放，則成為內(nèi)存泄漏，內(nèi)存泄漏多了可能導(dǎo)致內(nèi)存溢出。
二、閉包
概述：
一個(gè)函數(shù)對周圍狀態(tài)的引用捆綁在一起，內(nèi)層函數(shù)中訪問到其外層函數(shù)的作用域。外層函數(shù)內(nèi)定義了一個(gè)內(nèi)層函數(shù)，內(nèi)層函數(shù)需要訪問外層函數(shù)的變量。
作用：
1、讓一個(gè)函數(shù)訪問另一個(gè)函數(shù)內(nèi)部的變量成為可能。主要運(yùn)用就是用來實(shí)現(xiàn)數(shù)據(jù)私有化，將一個(gè)變量寫在一個(gè)函數(shù)內(nèi)，再在這個(gè)函數(shù)內(nèi)寫一個(gè)函數(shù)來負(fù)責(zé)操作該變量，然后return該變量，這時(shí)要改變該變量就只能調(diào)用這個(gè)內(nèi)部函數(shù)來改變，這樣就實(shí)現(xiàn)了變量的私有化，保護(hù)變量不被污染。（使用了閉包的話，該變量不會被回收，因?yàn)槭褂瞄]包使得外部變量（全局變量）指向該變量或函數(shù)，所以這個(gè)函數(shù)不會被銷毀，只有當(dāng)頁面被關(guān)閉才會被銷毀，所以使用閉包可能會引起內(nèi)存泄漏，因?yàn)檫@個(gè)變量沒有被正?；厥眨?br> 2、閉包很有用，因?yàn)樗试S將函數(shù)與其所操作的某些數(shù)據(jù)（環(huán)境）關(guān)聯(lián)起來
代碼： 從代碼形式上看閉包是一個(gè)做為返回值的函數(shù)，如下代碼所示：
<script>
// 1. 閉包 : 內(nèi)層函數(shù) + 外層函數(shù)變量
// function outer() {
// const a = 1
// function f() {
// console.log(a)
// }
// f()
// }
// outer()
// 2. 閉包的應(yīng)用： 實(shí)現(xiàn)數(shù)據(jù)的私有。統(tǒng)計(jì)函數(shù)的調(diào)用次數(shù)
// let count = 1
// function fn() {
// count++
// console.log(`函數(shù)被調(diào)用${count}次`)
// }
// 3. 閉包的寫法 統(tǒng)計(jì)函數(shù)的調(diào)用次數(shù)
function outer() {
let count = 1
function fn() {
count++
console.log(`函數(shù)被調(diào)用${count}次`)
}
return fn
}
const re = outer()
// const re = function fn() {
// count++
// console.log(`函數(shù)被調(diào)用${count}次`)
// }
re()
re()
// const fn = function() { } 函數(shù)表達(dá)式
// 4. 閉包存在的問題： 可能會造成內(nèi)存泄漏
</script>
三、函數(shù)進(jìn)階（函數(shù)參數(shù)默認(rèn)值、動(dòng)態(tài)參數(shù)、剩余參數(shù)）
3.1、函數(shù)提升
概念:
函數(shù)可以在聲明之前調(diào)用，因?yàn)橄到y(tǒng)會把所有函數(shù)聲明提升到當(dāng)前作用域的最前面，和變量提升差不多，變量提升只提升變量聲明，不提升變量賦值；函數(shù)提升只提升函數(shù)聲明，不提升函數(shù)調(diào)用。使用var fun=funtion(){}這種表達(dá)式的聲明不存在提升現(xiàn)象
代碼:
<script>
// 調(diào)用函數(shù)
foo()
// 聲明函數(shù)
function foo() {
console.log('聲明之前即被調(diào)用...')
}
// 不存在提升現(xiàn)象
bar() // 錯(cuò)誤
var bar = function () {
console.log('函數(shù)表達(dá)式不存在提升現(xiàn)象...')
}
</script>
3.2、函數(shù)參數(shù)
3.2.1、默認(rèn)值
總結(jié)：
- 聲明函數(shù)時(shí)為形參賦值即為參數(shù)的默認(rèn)值
- 如果參數(shù)未自定義默認(rèn)值時(shí)，參數(shù)的默認(rèn)值為
undefined - 調(diào)用函數(shù)時(shí)沒有傳入對應(yīng)實(shí)參時(shí)，參數(shù)的默認(rèn)值被當(dāng)做實(shí)參傳入
<script>
// 設(shè)置參數(shù)默認(rèn)值
function sayHi(name="小明", age=18) {
document.write(`<p>大家好，我叫${name}，我今年${age}歲了。</p>`);
}
// 調(diào)用函數(shù)
sayHi();//不傳參數(shù)就是用參數(shù)默認(rèn)值name="小明", age=18
sayHi('小紅');
sayHi('小剛', 21);
</script>
3.2.2、動(dòng)態(tài)參數(shù)
概念：arguments 是函數(shù)內(nèi)部內(nèi)置的偽數(shù)組變量，它包含了調(diào)用函數(shù)時(shí)傳入的所有實(shí)參，偽數(shù)組與真數(shù)組的區(qū)別就是偽數(shù)組沒有那些真數(shù)組的方法，例如push、pop、slice等等。
總結(jié)：
1.arguments 是一個(gè)偽數(shù)組
2. arguments 的作用是動(dòng)態(tài)獲取函數(shù)的實(shí)參
傳入未指定數(shù)量的參數(shù)時(shí)可以用arguments
<script>
// 求生函數(shù)，計(jì)算所有參數(shù)的和
function sum() {
// console.log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
// 調(diào)用求和函數(shù)
sum(5, 10)// 兩個(gè)參數(shù)
sum(1, 2, 4) // 兩個(gè)參數(shù)
</script>
3.3.3、剩余參數(shù)（…）
剩余參數(shù)...和展開運(yùn)算符...比較容易混淆，但是剩余參數(shù)...只存在于函數(shù)中
總結(jié)：
-
...是語法符號，置于最末函數(shù)形參之前，用于獲取多余的實(shí)參 - 借助
...獲取的剩余實(shí)參，是個(gè)真數(shù)組,擁有push、pop、shift、unshift等數(shù)組方法傳入指定數(shù)量或以上的參數(shù)時(shí)可以用...xxx
<script>
function config(baseURL, ...other) {
console.log(baseURL) // 得到 'http://baidu.com'
console.log(other) // other 得到 ['get', 'json']
}
// 調(diào)用函數(shù)
config('http://baidu.com', 'get', 'json');
</script>
3.3、箭頭函數(shù)
概念：
箭頭函數(shù)是一種聲明函數(shù)的簡潔語法，它與普通函數(shù)并無本質(zhì)的區(qū)別，差異性更多體現(xiàn)在語法格式上。箭頭函數(shù)的用法就是用來替換表達(dá)式函數(shù)（let fun=funtion(){}），簡化表達(dá)式函數(shù)
總結(jié)：
- 箭頭函數(shù)屬于表達(dá)式函數(shù)，因此不存在函數(shù)提升
- 箭頭函數(shù)只有一個(gè)參數(shù)時(shí)可以省略圓括號
() - 箭頭函數(shù)函數(shù)體只有一行代碼時(shí)可以省略花括號
{}，并自動(dòng)做為返回值被返回
<script>
//0. 常規(guī)函數(shù)寫法
// const fn = function () {
// console.log(123)
// }
// 1. 箭頭函數(shù) 基本語法
// const fn = () => {
// console.log(123)
// }
// fn()
// const fn = (x) => {
// console.log(x)
// }
// fn(1)
// 2. 只有一個(gè)形參的時(shí)候，可以省略小括號
// const fn = x => {
// console.log(x)
// }
// fn(1)
// // 3. 只有一行代碼的時(shí)候，我們可以省略大括號
// const fn = x => console.log(x)
// fn(1)
// 4. 只有一行代碼的時(shí)候，可以省略return
// const fn = x => x + x
// console.log(fn(1))
// 5. 箭頭函數(shù)可以直接返回一個(gè)對象
// const fn = (uname) => ({ uname: uname })
// console.log(fn('劉德華'))
</script>
3.3.1、箭頭函數(shù)參數(shù)
箭頭函數(shù)中沒有 arguments，只能使用 ... 動(dòng)態(tài)獲取實(shí)參
<script>
// 1. 利用箭頭函數(shù)來求和
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9
</script>
3.3.2、箭頭函數(shù) this
箭頭函數(shù)不會創(chuàng)建自己的this,它只會從自己的作用域鏈的上一層沿用this。
<script>
// 以前this的指向： 誰調(diào)用的這個(gè)函數(shù)，this 就指向誰
// console.log(this) // window
// // 普通函數(shù)
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 對象方法里面的this
// const obj = {
// name: 'andy',
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭頭函數(shù)的this 是上一層作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// 對象方法箭頭函數(shù) this
// const obj = {
// uname: 'pink老師',
// sayHi: () => {
// console.log(this) // this 指向誰？ window
// }
// }
// obj.sayHi()
const obj = {
uname: 'pink老師',
sayHi: function () {
console.log(this) // obj
let i = 10
const count = () => {
console.log(this) // obj
}
count()
}
}
obj.sayHi()
</script>
四、解構(gòu)賦值（左邊是[]還是{}取決于“=”右邊是數(shù)組還是對象）
注意： js前面必須加分號的情況：1、立即執(zhí)行函數(shù)(立即執(zhí)行函數(shù) 后面必須要加分號隔開，告訴js此立即執(zhí)行函數(shù)到此為止)：(function t(){})();2、數(shù)組解構(gòu)（以數(shù)組開頭的，特別是前面有語句的一定要注意加分號）：;[a,b]=[b,a]
使用數(shù)組解構(gòu)可以快速地交換兩個(gè)元素的值：[a,b]=[b,a]，只需這樣就可以交換兩個(gè)變量的值
解構(gòu)賦值是一種快速為變量賦值的簡潔語法，本質(zhì)上仍然是為變量賦值，分為數(shù)組解構(gòu)、對象解構(gòu)兩大類型。
4.1、數(shù)組解構(gòu)
數(shù)組解構(gòu)是將數(shù)組的單元值快速批量賦值給一系列變量的簡潔語法，如下代碼所示：
<script>
// 普通的數(shù)組
let arr = [1, 2, 3]
// 批量聲明變量 a b c
// 同時(shí)將數(shù)組單元值 1 2 3 依次賦值給變量 a b c
let [a, b, c] = arr
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
</script>
總結(jié)：
- 賦值運(yùn)算符
=左側(cè)的[]用于批量聲明變量，右側(cè)數(shù)組的單元值將被賦值給左側(cè)的變量 - 變量的順序?qū)?yīng)數(shù)組單元值的位置依次進(jìn)行賦值操作
- 變量的數(shù)量大于單元值數(shù)量時(shí)，多余的變量將被賦值為
undefined - 變量的數(shù)量小于單元值數(shù)量時(shí)，可以通過
...獲取剩余單元值，但只能置于最末位 - 允許初始化變量的默認(rèn)值，且只有單元值為
undefined時(shí)默認(rèn)值才會生效
4.2、對象解構(gòu)
對象解構(gòu)是將對象屬性和方法快速批量賦值給一系列變量的簡潔語法，如下代碼所示：
<script>
// 普通對象
const user = {
name: '小明',
age: 18
};
// 批量聲明變量 name age
// 同時(shí)將數(shù)組單元值 小明 18 依次賦值給變量 name age
const {name, age} = user
console.log(name) // 小明
console.log(age) // 18
</script>
總結(jié)：
- 賦值運(yùn)算符
=左側(cè)的{}用于批量聲明變量，右側(cè)對象的屬性值將被賦值給左側(cè)的變量 - 對象屬性的值將被賦值給與屬性名相同的變量
- 對象中找不到與變量名一致的屬性時(shí)變量值為
undefined - 允許初始化變量的默認(rèn)值，屬性不存在或單元值為
undefined時(shí)默認(rèn)值才會生效
注：支持多維解構(gòu)賦值:
<script>
// 1. 這是后臺傳遞過來的數(shù)據(jù)
const msg = {
"code": 200,
"msg": "獲取新聞列表成功",
"data": [
{
"id": 1,
"title": "5G商用自己，三大運(yùn)用商收入下降",
"count": 58
},
{
"id": 2,
"title": "國際媒體頭條速覽",
"count": 56
},
{
"id": 3,
"title": "烏克蘭和俄羅斯持續(xù)沖突",
"count": 1669
},
]
}
// 需求1： 請將以上msg對象 采用對象解構(gòu)的方式 只選出 data 方面后面使用渲染頁面
// const { data } = msg
// console.log(data)
// 需求2： 上面msg是后臺傳遞過來的數(shù)據(jù)，我們需要把data選出當(dāng)做參數(shù)傳遞給 函數(shù)
// const { data } = msg
// msg 雖然很多屬性，但是我們利用解構(gòu)只要 data值
function render({ data }) {//這里傳參直接解構(gòu)
// const { data } = arr
// 我們只要 data 數(shù)據(jù)
// 內(nèi)部處理
console.log(data)
}
render(msg)
// 需求3， 為了防止msg里面的data名字混淆，要求渲染函數(shù)里面的數(shù)據(jù)名改為 myData
function render({ data: myData }) {
// 要求將 獲取過來的 data數(shù)據(jù) 更名為 myData
// 內(nèi)部處理
console.log(myData)
}
render(msg)
</script>
五、forEach遍歷數(shù)組
概念：
forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)
注意：
1.forEach 主要是遍歷數(shù)組
2.參數(shù)item當(dāng)前數(shù)組元素是必須要寫的， 索引號index可選。
<script>
// forEach 就是遍歷 加強(qiáng)版的for循環(huán) 適合于遍歷數(shù)組對象
const arr = ['red', 'green', 'pink']
const result = arr.forEach(function (item, index) {
console.log(item) // 數(shù)組元素 red green pink
console.log(index) // 索引號
})
// console.log(result)
</script>
六、filter篩選數(shù)組
概念：
filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素
主要使用場景：
篩選數(shù)組符合條件的元素，并返回篩選之后元素的新數(shù)組
<script>
const arr = [10, 20, 30]
// const newArr = arr.filter(function (item, index) {
// // console.log(item)
// // console.log(index)
// return item >= 20
// })
// 返回的符合條件的新數(shù)組
const newArr = arr.filter(item => item >= 20)
console.log(newArr)
</script>
七、展開運(yùn)算符（…）
概念： 可以展開數(shù)組，默認(rèn)以逗號隔開
用處： 展開數(shù)組，合并數(shù)組文章來源：http://www.zghlxwxcb.cn/news/detail-487309.html
const arr=[1,2,3]
//展開運(yùn)算符展開數(shù)組
console.log(...arr)//展開數(shù)組：1，2，3
//1、求數(shù)組最大值、最小值：
console.log(Math.max(...arr))//3
console.log(Math.min(...arr))//1
//2、合并數(shù)組
const arr2=[4,5,6]
const arr3=[...arr,...arr2]//[1,2,3,4,5,6]
?? 原創(chuàng)不易，還希望各位大佬支持一下 \textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下} 原創(chuàng)不易，還希望各位大佬支持一下
?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！ \textcolor{orange}{點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！} 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！
? 收藏，你的青睞是我努力的方向！ \textcolor{red}{收藏，你的青睞是我努力的方向！} 收藏，你的青睞是我努力的方向！
?? 評論，你的意見是我進(jìn)步的財(cái)富！ \textcolor{green}{評論，你的意見是我進(jìn)步的財(cái)富！} 評論，你的意見是我進(jìn)步的財(cái)富！
文章來源地址http://www.zghlxwxcb.cn/news/detail-487309.html
到了這里，關(guān)于JavaScript之ES6高級語法（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
