時間: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'