es6

1、let 和const(定義變量)

(1)var 、let 、const的區(qū)別

a、作用域區(qū)別
var 變量聲明會(huì)被提升,
let、const變量聲明不會(huì)被提升,并是塊級(jí)作用域
b、定義的次數(shù)區(qū)別
var 可以重復(fù)聲明,后面聲明的值會(huì)賦蓋前面聲明的值
let、const在同一作用域中,只能聲明一次


image.png

c、分配的內(nèi)存區(qū)別
var 會(huì)直接在棧內(nèi)存里預(yù)分配內(nèi)存空間
let const 都不會(huì)在棧內(nèi)存里預(yù)分配內(nèi)存空間,在棧內(nèi)存分配變量時(shí),做一個(gè)檢查,如果已經(jīng)有相同的變量名就會(huì)報(bào)錯(cuò)

(2)let 、const的區(qū)別

a.變量修改的區(qū)別
let定義的變量是可以修改的
const定義的變量
對(duì)于基本類型來(lái)說(shuō),無(wú)法修改定義的值,
對(duì)于引用類型來(lái)說(shuō),無(wú)法修改棧內(nèi)存里分配的指針,但可以修改指針指向的對(duì)象里面的屬性值
b、const聲明之后必須立馬賦值,否則會(huì)報(bào)錯(cuò)

image.png

image.png

總結(jié):
在let和const之間,建議優(yōu)先使用const,尤其是在全局環(huán)境,不應(yīng)該設(shè)置變量,只應(yīng)設(shè)置常量。
JavaScript 編譯器會(huì)對(duì)const進(jìn)行優(yōu)化,所以多使用const,有利于提高程序的運(yùn)行效率,也就是說(shuō)let和const的本質(zhì)區(qū)別
其實(shí)是編譯器內(nèi)部的處理不同。
所有的函數(shù)都應(yīng)該設(shè)置為常量。

2、擴(kuò)展運(yùn)算符

平時(shí)開(kāi)發(fā)更多用于數(shù)組的合并,還有數(shù)組的復(fù)制


image.png

3、字符串模板

你好啊 相當(dāng)于 '你好啊'

var a = 1
var html = `今天是幾號(hào),是${a}`
console.log(html)  //今天是幾號(hào),是1

4、字符串新增的方法 includes(), startsWith(), endsWith()

includes():返回布爾值,表示是否找到了參數(shù)字符串。
startsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。
endsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

5遍歷對(duì)象

(1)for...in

for...in循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)。

(2)Object.keys(obj)

Object.keys返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個(gè)數(shù)組,包含對(duì)象自身的所有屬性(不含 Symbol 屬性,但是包括不可枚舉屬性)的鍵名。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個(gè)數(shù)組,包含對(duì)象自身的所有 Symbol 屬性的鍵名。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一個(gè)數(shù)組,包含對(duì)象自身的(不含繼承的)所有鍵名,不管鍵名是 Symbol 或字符串,也不管是否可枚舉。

以上的 5 種方法遍歷對(duì)象的鍵名,都遵守同樣的屬性遍歷的次序規(guī)則。

首先遍歷所有數(shù)值鍵,按照數(shù)值升序排列。
其次遍歷所有字符串鍵,按照加入時(shí)間升序排列。
最后遍歷所有 Symbol 鍵,按照加入時(shí)間升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

6、對(duì)象新增的方法

(1)Object.assign()(對(duì)象的合并去重,淺拷貝)

Object.assign()方法用于對(duì)象的合并,將源對(duì)象(source)的所有可枚舉屬性,復(fù)制到目標(biāo)對(duì)象(target)。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);

注:如果目標(biāo)對(duì)象與源對(duì)象有同名屬性,或多個(gè)源對(duì)象有同名屬性,則后面的屬性會(huì)覆蓋前面的屬性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

7、Symbol

ES6 引入了一種新的原始數(shù)據(jù)類型Symbol,表示獨(dú)一無(wú)二的值。

8、Set 數(shù)組去重 Map數(shù)據(jù)結(jié)構(gòu)

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56
// 類似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

上面代碼也展示了一種去除數(shù)組重復(fù)成員的方法。

// 去除數(shù)組的重復(fù)成員
[...new Set(array)]

//上面的方法也可以用于,去除字符串里面的重復(fù)字符。

[...new Set('ababbc')].join('')
// "abc"

9、Promise

(1)promise的出現(xiàn)解決了什么問(wèn)題
消滅嵌套調(diào)用(解決回調(diào)地獄):通過(guò) Promise 的鏈?zhǔn)秸{(diào)用可以解決 .then();
合并多個(gè)任務(wù)的請(qǐng)求結(jié)果:使用 Promise.all 獲取合并多個(gè)任務(wù)的錯(cuò)誤處理。
Promise 解決的是異步編碼風(fēng)格的問(wèn)題

(2)Promise 基本特征
a、promise狀態(tài)不受外界的影響。
promise對(duì)象代表一個(gè)異步操作,有三種狀態(tài):
pending(進(jìn)行中)
fulfilled/resolved(已成功)
rejected(已失敗)
只有異步操作結(jié)果,可以決定當(dāng)前是哪一種狀態(tài) ,任務(wù)其他操作都無(wú)法改變這個(gè)狀態(tài)。
b、promise狀態(tài)一旦改變,就不會(huì)發(fā)生變化,任何時(shí)候都可以得到這個(gè)結(jié)果。
promise狀態(tài)改變,只有兩種可能
從pending變?yōu)閒ulfilled(進(jìn)行中變?yōu)橐殉晒?
從pending變?yōu)閞ejected(進(jìn)行中變?yōu)橐咽。?br> promise.then(res=>{
//對(duì)于成功回調(diào)接受數(shù)據(jù)做處理
},err{
//對(duì)于失敗的回調(diào)數(shù)據(jù)做處理
})
(3)asyc await 和promise有什么不同

(4)promise的缺點(diǎn)
1)無(wú)法取消Promise,一旦新建它就會(huì)立即執(zhí)行,無(wú)法中途取消
2)如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯(cuò)誤,不會(huì)反映到外部
3)當(dāng)處于pending狀態(tài)時(shí),無(wú)法得知目前進(jìn)展到哪一個(gè)階段,是剛剛開(kāi)始還是即將完成

10、箭頭函數(shù)

// bad
[1, 2, 3].map(function (x) {
  return x * x;
});

// good
[1, 2, 3].map((x) => {
  return x * x;
});

// best
[1, 2, 3].map(x => x * x);

注:箭頭函數(shù)沒(méi)有this指向

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原本想稍微整理一下 ES 新特性,沒(méi)想到花了相當(dāng)多的時(shí)間,本文也巨長(zhǎng),依然推薦使用 簡(jiǎn)悅[https://gith...
    401閱讀 2,020評(píng)論 0 5
  • ECMAScript 是一種由 Ecma 國(guó)際(前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì))通過(guò) ECMA-262 標(biāo)準(zhǔn)化的腳本程...
    歡欣的膜笛閱讀 8,718評(píng)論 0 4
  • 1.let 命令 let聲明的變量只在當(dāng)前代碼塊有效 let不存在變量提升,必須在聲明后再使用 暫時(shí)性死區(qū):暫時(shí)性...
    xingyunfuhao閱讀 365評(píng)論 0 0
  • [TOC] 參考阮一峰的ECMAScript 6 入門(mén)參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,915評(píng)論 0 1
  • let 和 const Hoisting 機(jī)制在函數(shù)作用域或全局作用域中通過(guò)關(guān)鍵字 var 生命的變量,無(wú)論實(shí)際上...
    梁坤同學(xué)閱讀 204評(píng)論 0 0

友情鏈接更多精彩內(nèi)容