1. ES6簡介
ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標(biāo)準(zhǔn)，2015.06 發(fā)版。
ES6 主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒有類的概念，但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數(shù)高版本的瀏覽器也支持 ES6，不過只實現(xiàn)了 ES6 的部分特性和功能。
2. ES6 let 與 const
ES6 新增加了兩個重要的 JavaScript 關(guān)鍵字: let 和 const。
let 聲明的變量只在 let 命令所在的代碼塊內(nèi)有效。
const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變。
2.1 let 命令
- 代碼塊內(nèi)有效
{
let a=0;
var b=1;
}
console.log(a,b);
// a is not difined
- 不能重復(fù)聲明
var a=1;
var a=2;
let b=3;
let b=4;
console.log(a,b);
// b Identifier 'b' has already been declared
- 不存在變量提升
console.log(a);//a is not defined
var a = 1;
console.log(a); //Cannot access 'a' before initialization
let a = "apple";
//變量 b 用 var 聲明存在變量提升，所以當(dāng)腳本開始運(yùn)行的時候，b 已經(jīng)存在了，但是還沒有賦值，所以會輸出 undefined。
//變量 a 用 let 聲明不存在變量提升，在聲明變量 a 之前，a 不存在，所以會報錯。
var 聲明變量特點
（1）允許重復(fù)聲明
（2）存在變量提升
（3）存在就近原則
（4）全局變量會作為全局對象window的屬性
（5）只受函數(shù)作用域的限制
2.2 const命令 用來聲明常量
- 常量初始化完成，不允許二次賦值。
const a=11;
a=22;
console.log(a);//Assignment to constant variable.
- 常量不允許只聲明不賦值。
const a;
console.log(a);//Missing initializer in const declaration
var b;
console.log(b);//undefined
3. 解構(gòu)賦值
概述
解構(gòu)賦值是對賦值運(yùn)算符的擴(kuò)展。
他是一種針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值。
在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復(fù)雜對象中數(shù)據(jù)字段獲取。
解構(gòu)賦值：允許將相同結(jié)構(gòu)的值賦值給變量(模式匹配，=左右兩側(cè)模式相同才能解構(gòu)，否則解構(gòu)失敗，變量值為undefined)
1. 數(shù)組解構(gòu)賦值： [value,value,value,...]
有數(shù)組：[1,2,3,4,5]，需要定義變量a,b,c,d,e來接收數(shù)組元素的值。
let arr = [1, 2, 3, 4, 5];
// ES5
// let a = arr[0],
// b = arr[1],
// c = arr[2],
// d = arr[3],
// e = arr[4];
// ES6 數(shù)組解構(gòu)
let [f,b,e,d,c] = arr;
console.log(f,b,c,d,e);
// let [a,b,[c,d],e] = [1,2,[3],4,5];
// console.log(a,b,c,d,e);
2. 對象解構(gòu)： {key:value,key:value,...}
// 對象的解構(gòu)
const zhao = {
name: '趙本山',
age: '不詳',
xiaopin: function() {
console.log("我可以演小品");
}
};
// let{name,age,xiaopin}=zhao;
// console.log(name);
// console.log(age);
// console.log(xiaopin);
// xiaopin();
// let{xiaopin,name,age}=zhao;
console.log(zhao.name, zhao.age);
zhao.xiaopin()
// xiaopin();
// console.log(name);
// 用途：
{
// 1. 快速交換變量的值
let arr = [33,7,19,99,0,5,13];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
// var tmp = arr[j];
// arr[j] = arr[j + 1];
// arr[j + 1] = tmp;
[arr[j+1],arr[j]] = [arr[j],arr[j+1]];
}
}
}
console.log(arr);
}
4. ES6 對 Number 的拓展
Number 對象新方法
- Number.isFinite()：返回布爾值，用于檢查一個數(shù)值是否為有限的
console.log(Number.isFinite(1));//true
console.log(Number.isFinite(0.1));//true
console.log(Number.isFinite(NaN));//false NaN不是有限的
console.log(Number.isFinite(10/3));//true
- Number.isFinate 沒有隱式的 Number() 類型轉(zhuǎn)換，所有非數(shù)值都返回 false
console.log(Number.isFinite('foo')); // false
console.log(Number.isFinite('15')); // false
console.log(Number.isFinite(true)); // false
console.log(Number.isFinite(1)); // true
- Number.isNaN()：返回布爾值，判斷一個數(shù)值是否是NaN(
未定義或不可表示的值)
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(10+'a')); // false
console.log(Number.isNaN(10*'a')); // true
- Number.parseInt() /Number.parseFloat()
console.log(Number.parseFloat('123.45')); // 123.45
console.log(Number.parseFloat('123.45abc')); // 123.45
// 不指定進(jìn)制時默認(rèn)為 10 進(jìn)制
console.log(Number.parseInt('12.34')); //12
console.log(Number.parseInt(12.34)); // 12
// 指定進(jìn)制
console.log(Number.parseInt('0011', 2)); // 3
ES6 在 Math 對象上新增了 17 個數(shù)學(xué)相關(guān)的靜態(tài)方法，這些方法只能在 Math 中調(diào)用。
Math 進(jìn)行拓展
- Math.cbrt()：計算數(shù)值的立方根
console.log(Math.cbrt(1)); // 1
console.log(Math.cbrt(0)); // 0
console.log(Math.cbrt(-1)); // -1
console.log(Math.cbrt(8)); // 2
// 會對非數(shù)值進(jìn)行轉(zhuǎn)換
console.log(Math.cbrt('1')); // 1
- Math.hypot(): 用于計算所有參數(shù)的平方和的平方根。
console.log(Math.hypot(3, 4)); // 5
// 非數(shù)值會先被轉(zhuǎn)換為數(shù)值后進(jìn)行計算
Math.hypot(4, '3'); // 5
// 參數(shù)中存在無法轉(zhuǎn)換為數(shù)值的參數(shù)時返回 NaN
Math.hypot(NaN); // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot({}); // NaN
3.Math.trunc()：去除小數(shù)部分
Math.trunc(12.3); // 12
Math.trunc(12); // 12
// 整數(shù)部分為 0 時也會判斷符號
Math.trunc(-0.5); // -0
Math.trunc(0.5); // 0
// Math.trunc 會將非數(shù)值轉(zhuǎn)為數(shù)值再進(jìn)行處理
Math.trunc("12.3"); // 12
// 空值或無法轉(zhuǎn)化為數(shù)值時時返回 NaN
Math.trunc(); // NaN
Math.trunc(NaN); // NaN
Math.trunc("hhh"); // NaN
Math.trunc("123.2hhh"); // NaN
- Math.sign()：判斷一個數(shù)是正數(shù)(1) 還是負(fù)數(shù)(-1) 還是 0(0)
Math.sign(1); // 1
Math.sign(-1); // -1
// 參數(shù)為 0 時，不同符號的返回不同
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(-5); // -1
// 判斷前會對非數(shù)值進(jìn)行轉(zhuǎn)換
Math.sign('1'); // 1
Math.sign('-1'); // -1
// 參數(shù)為非數(shù)值（無法轉(zhuǎn)換為數(shù)值）時返回 NaN
Math.sign(NaN); // NaN
Math.sign('hhh'); // NaN
5.Math.imul(): 兩個數(shù)以 32 位帶符號整數(shù)形式相乘的結(jié)果，返回的也是一個 32 位的帶符號整數(shù)。
6.雙曲函數(shù)方法
Math.sinh(x): 用于計算雙曲正弦。
Math.cosh(x): 用于計算雙曲余弦。
Math.tanh(x): 用于計算雙曲正切。
Math.asinh(x): 用于計算反雙曲正弦。
Math.acosh(x): 用于計算反雙曲余弦。
Math.atanh(x): 用于計算反雙曲正切。
5. Array拓展
1.Array.from()
將類數(shù)組對象轉(zhuǎn)化為數(shù)組。
//將類數(shù)組轉(zhuǎn)化為數(shù)組
var fakeArray = {
"0": "first",
"1": "second",
"2": "third",
length: 3
};
var fake = Array.from(fakeArray);
fake.push('aa');
console.log(fake);
// 參數(shù)為數(shù)組,返回與原數(shù)組一樣的數(shù)組
console.log(Array.from([1, 2])); // [1, 2]
// 參數(shù)含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
2.Array.of()
將參數(shù)中所有值作為元素形成數(shù)組。
Array.of基本上可以用來替代Array()或newArray()，并且不存在由于參數(shù)不同而導(dǎo)致的重載，而且他們的行為非常統(tǒng)一。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
// 參數(shù)值可為不同類型
console.log(Array.of(1, '2', true)); // [1, '2', true]
// 參數(shù)為空時返回空數(shù)組
console.log(Array.of()); // []
3. includes()
返回布爾值， 判斷是否包含指定元素
console.log(['a', 'b', 'c'].includes('a'));
//參數(shù)1： 包含的指定值
[1, 2, 3].includes(1); // true
// 參數(shù)2：可選，搜索的起始索引，默認(rèn)為0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判斷
[1, NaN, 3].includes(NaN); // true
4.flat()
//嵌套數(shù)組轉(zhuǎn)一維數(shù)組
console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
// 指定轉(zhuǎn)換的嵌套層數(shù)
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
// 不管嵌套多少層
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自動跳過空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
5. find()/findIndex()
(1)、find()
該方法主要應(yīng)用于查找第一個符合條件的數(shù)組元素。它的參數(shù)是一個回調(diào)函數(shù)。在回調(diào)函數(shù)中可以寫你要查找元素的條件，當(dāng)條件成立為true時，返回該元素。如果沒有符合條件的元素，返回值為undefined。
以下代碼在myArr數(shù)組中查找元素值大于4的元素，找到后立即返回。返回的結(jié)果為查找到的元素：
let myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
//var f = function(a){
// return a;
//}
//f(1); //1
console.log(v);// 5
沒有符合元素，返回undefined:
let myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined
回調(diào)函數(shù)有三個參數(shù)。value：當(dāng)前的數(shù)組元素。index：當(dāng)前索引值。arr：被查找的數(shù)組。
查找索引值為4的元素：
let myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
return index==4
});
console.log(v);// 5
（2）、findIndex()
查找數(shù)組中符合條件的元素索引， 若有多個符合條件的元素， 則返回第一個元素索引。
let arr = Array.of(1, 2, 1, 3);
// 參數(shù)1：回調(diào)函數(shù)
// 參數(shù)2(可選)：指定回調(diào)函數(shù)中的 this 值
console.log(arr.findIndex(item => item == 2)); // 1
// 數(shù)組空位處理為 undefined
console.log([, 1].findIndex(n => true)); //0
6.fill()
將一定范圍索引的數(shù)組元素內(nèi)容填充為單個指定的值。
let arr = Array.of(1, 2, 3, 4);
// 參數(shù)1：用來填充的值
// 參數(shù)2：被填充的起始索引
// 參數(shù)3(可選)：被填充的結(jié)束索引，默認(rèn)為數(shù)組末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
7.copyWithin() (copy)
將一定范圍索引的數(shù)組元素修改為此數(shù)組另一指定范圍索引的元素。
// 參數(shù)1：被修改的起始索引
// 參數(shù)2：被用來覆蓋的數(shù)據(jù)的起始索引
// 參數(shù)3(可選)：被用來覆蓋的數(shù)據(jù)的結(jié)束索引，默認(rèn)為數(shù)組末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
8.entries()
遍歷鍵值對。
for(let [key, value] of ['a', 'b'].entries()){
console.log(key, value);
}
// 0 "a"
// 1 "b"
// 不使用 for... of 循環(huán)
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
// 數(shù)組含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
9.keys()
遍歷鍵名。
for(let key of ['a', 'b'].keys()){
console.log(key);
}
// 0
// 1
// 數(shù)組含空位
console.log([...[,'a'].keys()]); // [0, 1]
10.values()
遍歷鍵值。
for(let value of ['a', 'b'].values()){
console.log(value);
}
// "a"
// "b"
// 數(shù)組含空位
console.log([...[,'a'].values()]); // [undefined, "a"]
6. String拓展
1、模板字符串：可以用反引號（``）標(biāo)識字符串
特點：
（1）允許換行
（2）解析變量或表達(dá)式，變量或表達(dá)式需要 ${} 包裹
let name = "小蘭";
let age = 20;
let info = `我叫${name},我今年 ${age+1}歲`
console.log(info);
2、拓展的方法子串的識別
ES6 之前判斷字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的識別方法。
1.includes()：返回布爾值，判斷是否找到參數(shù)字符串。
2.startsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的頭部。
3.endsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的尾部。
以上三個方法都可以接受兩個參數(shù)，需要搜索的字符串，和可選的搜索起始位置索引。
let string = "apple,banana,orange";
string.includes("banana"); // true
string.startsWith("apple"); // true
string.endsWith("apple"); // false
string.startsWith("banana",6) // true
注意：這三個方法只返回布爾值，如果需要知道子串的位置，還是得用 indexOf 和 lastIndexOf 。
3、字符串重復(fù)
（1）、repeat()：返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"
（2）、如果參數(shù)是小數(shù)，向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"
（3）、如果傳入的參數(shù)是字符串，則會先將字符串轉(zhuǎn)化為數(shù)字
console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2")); // "Hello,Hello,"
4、字符串補(bǔ)全
（1）、padStart：返回新的字符串，表示用參數(shù)字符串從頭部（左側(cè)）補(bǔ)全原字符串。
padEnd：返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補(bǔ)全原字符串。
以上兩個方法接受兩個參數(shù)，第一個參數(shù)是指定生成的字符串的最小長度，第二個參數(shù)是用來補(bǔ)全的字符串。如果沒有指定第二個參數(shù)，默認(rèn)用空格填充。
console.log("h".padStart(5,"o")); // "ooooh"
console.log("h".padEnd(5,"o")); // "hoooo"
console.log("h".padStart(5)); // " h"
（2）、如果原字符串加上補(bǔ)全字符串長度大于指定長度，則截去超出位數(shù)的補(bǔ)全字符串:
console.log("hello".padEnd(10,",world!")); // "hello,worl"
（3）、常用于補(bǔ)全位數(shù)：
console.log("123".padStart(10,"0")); // "0000000123"
