JS高級筆記7

時間:2019/11/9

5.ES6

1).let關(guān)鍵字
1.具有塊級作用域

if (true) {
  let a = 10;
}
console.log(a); // a is not defined

for(let i = 0; i < 2; i++) {}
console.log(i); // i is not defined(防止循環(huán)變量變?yōu)槿肿兞?

2.不存在變量提升

console.log(a); // a is not defined
let a = 20;

3.暫時性死區(qū)

var num = 10;
if (true) {
  console.log(num);
  // 此時num與塊級作用域整體綁定蒜撮,不受外部影響晴氨,num is not defined
  let num = 20;
}

2).const關(guān)鍵字(聲明常量艘绍,即值(內(nèi)存地址)不能變化的量)
1.具有塊級作用域
2.必須賦初始值
3.常量賦值后晦雨,值不能修改

// 基本數(shù)據(jù)類型值不可更改
const PI = 3.14;
PI = 100; // 報錯

// 復(fù)雜數(shù)據(jù)類型地址不可更改
const arr = [1, 2];
arr[0] = 0;
arr[1] = 9;
console.log(arr); // [0, 9]
arr = [0, 9]; // 報錯

3).let侥猩、const榔至、var的區(qū)別


三者區(qū)別.jpg

4).解構(gòu)賦值

1.數(shù)組解構(gòu)(按照一定模式,從數(shù)組或?qū)ο笾刑崛≈灯劾停瑢⑻崛〕鰜淼闹蒂x值給另外的變量)
let arr = [1, 2, 3];
let [a, b, c] = arr;
// 解構(gòu)不成功時唧取,對應(yīng)值為undefined

2.對象解構(gòu)(允許使用變量名字匹配對象屬性)
let person = {name: '小明', age: 18};
let {name, age} = person; // 同名
let {name: myName, age: myAge} = person; // 別名

5).箭頭函數(shù)(簡化函數(shù)定義語法)
1.如果函數(shù)體中只有一句代碼铅鲤,且代碼執(zhí)行結(jié)果就是函數(shù)返回值,函數(shù)體大括號與return可省略枫弟。
2.如果形參只有一個邢享,則形參外側(cè)的小括號也可省略。
3.箭頭函數(shù)不綁定this關(guān)鍵字淡诗,其中的this繼承函數(shù)定義位置所屬上下文骇塘,與執(zhí)行時的上下文無關(guān)。

6).剩余參數(shù)(將一個不定數(shù)量的參數(shù)表示為一個數(shù)組)

function sum(...args) {
  let total = 0;
  args.forEach(item => {
    total += item;
  })
  return total;
}
sum(1, 2); // 3
sum(1, 2, 3); // 6

剩余參數(shù)和解構(gòu)配合使用:

let arr = [1, 2, 3];
let [s1, ...s2] = arr;

7).擴展運算符(將數(shù)組或?qū)ο筠D(zhuǎn)為以逗號分隔的參數(shù)序列)

// 合并數(shù)組
// 方法1
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 方法2
arr1.push(...arr2);

//將偽數(shù)組轉(zhuǎn)換為真數(shù)組
var divs = document.getElementsByTagName('div');
var ary = [...divs]; 

8).Array擴展方法與實例方法

// 擴展方法:Array.from(arrayLike[, mapFn[, thisArg]]) 將偽數(shù)組轉(zhuǎn)換為真數(shù)組
var arrayLike = {
  "0": "1",
  "1": "2",
  "length": 2
}
var arr = Array.from(arrayLike, item => item * 2); // [2, 4]

// 實例方法:find()
let target = arr.find((item, index) => item.id == 2); // 返回符合條件的第一個item韩容,不存在返回undefined

// 實例方法:findIndex()
let index = arr.findIndex((value, index) => value > 9); // 返回符合條件的第一個item的索引款违,不存在時返回-1

// 實例方法:includes()
let result = arr.includes('a'); // 返回布爾值(判斷數(shù)組中是否包含某個值) 

9).字符串相關(guān)

// 模板字符串
const sayhello = () => `hello`;
let name = `mike`;
let str = `hello,${name}`; // hello,mike
let str1 = `${sayhello()}`; // hello

// String擴展方法
// 實例方法:startsWith() 與 endsWith()
let str = 'hello!';
str.startsWith('h'); // true
str.endsWith('!'); // true

// 實例方法:repeat()
'x'.repeat(3); // xxx 重復(fù)字符串3次

10).Set數(shù)據(jù)結(jié)構(gòu)
1.類似于數(shù)組,但成員的值唯一群凶,沒有重復(fù)的值插爹;
2.本身是一個構(gòu)造函數(shù),用于生成Set數(shù)據(jù)結(jié)構(gòu)请梢。

// 創(chuàng)建Set數(shù)據(jù)結(jié)構(gòu)
const s1 = new Set(['a', 'b'])

// 數(shù)組去重
const s2 = new Set(['a', 'a', 'b', 'b']); // 自動過濾重復(fù)元素
let arr = [...s2]; // ['a', 'b']

// 實例方法
// add(value) 添加值赠尾,返回Set結(jié)構(gòu)本身
const s = new Set();
s.add('a').add('b').add('c');

// delete(value) 刪除值,返回布爾值溢陪,表示刪除是否成功
s.delete('a');

// has(value) 返回布爾值萍虽,表示該值是否為Set的成員
s.has('a');

// clear() 清除所有成員,無返回值
s.clear();

// 遍歷set
const s = new Set(['a', 'b', 'c']);
s.forEach(value => console.log(value)); // 'a' 'b' 'c'
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末形真,一起剝皮案震驚了整個濱河市杉编,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咆霜,老刑警劉巖邓馒,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蛾坯,居然都是意外死亡光酣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門脉课,熙熙樓的掌柜王于貴愁眉苦臉地迎上來救军,“玉大人,你說我怎么就攤上這事倘零〕猓” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵呈驶,是天一觀的道長拷泽。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么司致? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任拆吆,我火速辦了婚禮,結(jié)果婚禮上脂矫,老公的妹妹穿的比我還像新娘枣耀。我一直安慰自己,他們只是感情好羹唠,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布奕枢。 她就那樣靜靜地躺著,像睡著了一般佩微。 火紅的嫁衣襯著肌膚如雪缝彬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天哺眯,我揣著相機與錄音谷浅,去河邊找鬼。 笑死奶卓,一個胖子當著我的面吹牛一疯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播夺姑,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼墩邀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了盏浙?” 一聲冷哼從身側(cè)響起眉睹,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎废膘,沒想到半個月后竹海,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡丐黄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年斋配,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灌闺。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡艰争,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桂对,到底是詐尸還是另有隱情园细,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布接校,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蛛勉。R本人自食惡果不足惜鹿寻,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诽凌。 院中可真熱鬧毡熏,春花似錦、人聲如沸侣诵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杜顺。三九已至财搁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間躬络,已是汗流浹背尖奔。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留穷当,地道東北人提茁。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像馁菜,于是被迫代替她去往敵國和親茴扁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355