JavaScript—淺談ES6新特性(速記版)-上

今天覆習一下ES6的新語法

1、let與const

1. let只在代碼塊中有效，var在全局有效
2. let不能重複聲明，var能夠
3. let適合for循環
4. let不存在變量提高，var有
5. const聲明常量時必須初始化
6. const保證的是變量指向的內存地址的數據不變，而不是變量的值不變。
7. const的暫時性死區：代碼塊內若是存在let或者const聲明，則代碼塊會對這些聲明的變量從代碼塊開始就造成了一個封閉的做用域，在代碼塊內，聲明變量以前使用會報錯

var PI = "a";
    if (true) {
      console.log(PI); // ReferenceError:沒法在初始化以前訪問「PI」
      const PI = "3.1415926";
    }
-----------------------------
var str = "Hi!";
    if (true) {
      console.log(str); // ReferenceError:沒法在初始化以前訪問「str」
      let str = "Hello World!";
    }
複製代碼

2、解構賦值

1. 解構源：表達式右邊
2. 解構目標：表達式左邊
3. 解構目標=解構源
4. 數組解構：

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
---------------------------
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
---------------------------
let [a = 1, b] = []; // a = 1, b = undefined
---------------------------
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
複製代碼

5. 字符串解構：

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
複製代碼

6. 解構默認值： let [a = 2] = [undefined]; // a = 2 當匹配結果未undefined時纔會觸發返回默認值
7. 對象解構：

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
複製代碼

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'
複製代碼

不徹底解構

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
複製代碼

剩餘運算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
複製代碼

解構默認值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
複製代碼

8. 其實解構賦值就是一次性按照必定的賦值方式把右邊對應值賦值到左邊。配合...展開運算符更香。

3、Symbol

1. 原始數據類型Symbol表示獨一無二的值，最大的用法是用來定義對象的惟一屬性名。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同參數 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false
複製代碼

2. Symbol做爲對象屬性名能夠保證屬性不重名。

let sy = Symbol("key1");
 
// 寫法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 寫法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 寫法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}
複製代碼

3. Symbol做爲對象屬性名時不能使用.運算符，由於.運算符後的是字符串，須要使用[]取值
4. Symbol的值做爲屬性名時是公有屬性，不會出如今for..in、for..of中，也不會被Object.keys()、Object.getOwnPropertyNames()返回。能夠經過Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。
5. 同字符串定義的常量會衝突，用Symbol定義的不會
6. 用單例模式定義的Symbol和用Symbol.for()定義的Symbol不一樣值。Symbol.for()首先會在全局搜索被登記的Symbol中是否有該字符串參數做爲名稱的Symbol值，若是有即返回該Symbol值，若沒有則新建並返回一個以該字符串參數爲名稱的 Symbol 值，並登記在全局環境中供搜索。

let yellow = Symbol("Yellow");//單例模式
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true
複製代碼

簡單說Symbol.for()定義，若是有對應字符串的Symbol就返回，沒有就新建。在Symbol.for()定義的時候會把對應字符串的Symbol登記在全局環境中，給以後搜索用。

7. Symbol.keyFor()返回的是已經登記的key。相似JSON轉換同樣，能夠這麼理解：Symbol.for(字符串)，把字符串轉換成一個惟一標識，字符串是密鑰，Symbol.for(字符串)返回的是密文，同一個密鑰對應的密文相同，Symbol.keyFor(密文)返回的是密鑰。

4、Map與Set

Map

1. 用new Map()實例化一個map對象
2. map.set(鍵,值)設置對象的鍵與值，與Object不一樣，這裏Map的鍵能夠是任何類型，這就是Map對象最大的亮點
3. map.get(鍵)獲取對應的值
4. NaN做爲鍵時，獲取到的值是相同的（雖然NaN!==NaN,可是這裏做爲鍵是相等的）
5. 可用for..of 和 forEach遍歷

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 將會顯示兩個 log。 一個是 "0 = zero" 另外一個是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
--------------------------
// 將會顯示兩個 logs。 一個是 "0 = zero" 另外一個是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
複製代碼

6. Map與Array互轉

var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 構造函數能夠將一個 二維 鍵值對數組轉換成一個 Map 對象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函數能夠將一個 Map 對象轉換成一個二維鍵值對數組
var outArray = Array.from(myMap);
複製代碼

7. Map克隆新對象

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 
console.log(myMap1 === myMap2); 
// 打印 false。 Map 對象構造函數生成實例，迭代出新的對象。
複製代碼

8. Map合併對象

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合併兩個 Map 對象時，若是有重複的鍵值，則後面的會覆蓋前面的，對應值即 uno，dos， three
var merged = new Map([...first, ...second]);
複製代碼

Set

1. Set 對象容許你存儲任何類型的惟一值，不管是原始值或者是對象引用。
2. 幾個特殊相同狀況：
   • +0與-0相同
   • undefined與undefined相同
   • NaN與NaN不相等，可是在Set中只能存一個
3. set對象只存值
4. new Set()實例化set對象
5. set.add(值)添加值
6. set.has(值)判斷值是否存在
7. array=[...set]可用...將set轉成數組

5、字符串

1. includes()判斷是否找到參數字符串
2. startsWith()判斷參數字符串是否在原字符串的頭部。
3. endsWith()判斷參數字符串是否在原字符串的尾部。
4. 以上均可接收第二參數，即起始搜索位置，都返回boolean，不可傳入正則表達式

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true
複製代碼

5. repeat()重複字符串指定次數並返回
6. padStart()、padEnd()返回新的字符串，表示用參數字符串從頭部/尾部補全字符串，第一參數爲返回字符串的最小長度，第二參數爲用來補全的字符串，默認用空格。經常使用於補全位數。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // " h"
複製代碼

7. 模板字符串`,可定義多行字符串保留空格和換行，也可在字符串中添加變量用${變量}表示

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!
複製代碼

8. 標籤模板

alert`Hello world!`;
// 等價於
alert('Hello world!');
複製代碼

6、對象

1. ES6容許對象的屬性直接寫變量，這時候屬性名是變量名，屬性值是變量值。

const person = {age, name};
//等同於
const person = {age: age, name: name}
複製代碼

2. 方法也可簡寫

const person = {
  sayHi(){
    console.log("Hi");
  }
}
//等同於
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
複製代碼

3. 屬性名能夠是表達式，可是需用[]包含,屬性和屬性名簡寫不可同時使用

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
複製代碼

4. 對象的擴展運算符...

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}
--------------------------
//合併對象
let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}
複製代碼

對象新方法

1. Object.assign(目標對象,源對象...)用於將源對象的全部可枚舉屬性複製到目標對象中。屬於淺拷貝。

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// 第一個參數是目標對象，後面的參數是源對象
target;  // {a: 1, b: 2, c: 3}
-----------------
//非對象，先轉爲對象後返回
Object.assign(3);         // Number {3}
typeof Object.assign(3);  // "object"
複製代碼

2. Object.is(值1,值2)比較2個值是否嚴格相等(與===相似)
3. 與===的區別

//一是+0不等於-0
Object.is(+0,-0);  //false
+0 === -0  //true
//二是NaN等於自己
Object.is(NaN,NaN); //true
NaN === NaN  //false
複製代碼

7、數組

1. Array.of()將參數中全部值做爲原始造成數組console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
2. Array.from()將類數組對象或可迭代對象轉化爲數組。參數Array.from(arrayLike[,mapFn[,thisArg]])

console.log(Array.from([1, , 3])); // [1, undefined, 3]
------------------------
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]
------------------------
//thisArg用於指定map函數執行時的 this 對象。
let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}, map)); // [2, 4, 6]
複製代碼

轉換類數組必須含有length屬性，也可用轉換map、set、字符串

3. find()查找數組中符合條件的元素,如有多個符合條件的元素，則返回第一個元素。

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3
複製代碼

4. findIndex()查找數組中符合條件的元素索引，如有多個符合條件的元素，則返回第一個元素索引。

let arr = Array.of(1, 2, 1, 3);
// 參數1：回調函數
// 參數2(可選)：指定回調函數中的 this 值
console.log(arr.findIndex(item => item = 1)); // 0
複製代碼

5. fill()將必定範圍索引的數組元素內容填充爲單個指定的值。

let arr = Array.of(1, 2, 3, 4);
// 參數1：用來填充的值
// 參數2：被填充的起始索引
// 參數3(可選)：被填充的結束索引，默認爲數組末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
複製代碼

6. copyWithin()將必定範圍索引的數組元素修改成此數組另外一指定範圍索引的元素。

// 參數1：被修改的起始索引
// 參數2：被用來覆蓋的數據的起始索引
// 參數3(可選)：被用來覆蓋的數據的結束索引，默認爲數組末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
複製代碼

7. entries()遍歷鍵值對,keys()遍歷鍵名，values()遍歷鍵值

for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b"
 
// 不使用 for... of 循環
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
---------------------------
for(let key of ['a', 'b'].keys()){
    console.log(key);
}
// 0
// 1
---------------------------
for(let value of ['a', 'b'].values()){
    console.log(value);
}
// "a"
// "b"
複製代碼

8. includes()查找數組是否包含值

// 參數1：包含的指定值
[1, 2, 3].includes(1);    // true
 
// 參數2：可選，搜索的起始索引，默認爲0
[1, 2, 3].includes(1, 2); // false
複製代碼

9. flat()嵌套數組轉爲一維數組，flatMap()先對每一個元素處理再執行flat()

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定轉換的嵌套層數
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]
-------------------------------
// 參數1：遍歷函數，該遍歷函數可接受3個參數：當前元素、當前元素索引、原數組
// 參數2：指定遍歷函數中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]
複製代碼

參考自RUNOOB