ES6快速入門（二）

struggle_LZ發表於2018-05-20

1. Map物件

ES6提供了新的資料結構Map，Map結構提供了“值—值”的對應，是一種更完善的Hash結構實現。如果你需要“鍵值對”的資料結構，Map比Object更合適。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。{"b" => "banana"}並且每一項都包含了key和value
我們來新建一個Map物件，併為其賦值：

let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map);  //   Map {"a" => "apple", "b" => "banana"}
複製程式碼

ES6快速入門（二）

獲取Map物件裡面的值（map.get()）：

let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.get('b'));  //banana複製程式碼

刪除Map物件裡面的值（map.delete();）：

let map = new Map();
map.set('a','apple');
map.set('b','banana');
map.delete('a'）；
console.log(map); //{'b' => 'banana'}複製程式碼

獲取Map物件的“長度”：

let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.size) //2
console.log(map.length); //undefined複製程式碼

map.entries()

let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map.entries());    //  MapIterator {["a", "apple"], ["b", "banana"]}複製程式碼

遍歷Map物件（for...of... ）

let map = new Map();
map.set('a','apple');
map.set('b','banana');
for (let name of map){
  console.log(name);  //["a", "apple"]  ["b", "banana"]
}
 //迴圈出來的是以陣列套鍵值對的方式複製程式碼

如果我們只要Map中的“值”怎麼辦？別急

let map = new Map();
map.set('a','apple');
map.set('b','banana');
for (let val of map.values()){
    console.log(val);   //apple banana
}複製程式碼

如果我們只要Map中的“鍵(key)”怎麼辦？別急

let map = new Map();
map.set('a','apple');
map.set('b','banana');
for (let key of map.keys()){
   console.log(key);  //a b
}複製程式碼

如果我們只要Map中的“鍵 --- 值”怎麼辦？也別急

let map = new Map();
map.set('a','apple');
map.set('b','banana');
for (let [key,value] of map.entries()){
    console.log(key,value);  //a apple    b banana
}複製程式碼

2.for迴圈那些事

//迴圈陣列
let arr = [12,6,8];
for (let i = 0;i < arr.length;i++){
     console.log(i);   //0  1  2
     console.log(arr[i]);  //12  5  8
}

let arr = [12,5,8];
for (let i in arr){
     console.log(i);    //0  1  2
     console.log(arr[i]);  //12   5  8
}複製程式碼

//迴圈json的陣列
let json = {a:12,b:5,c:8};
for (let name in json){
   console.log(i);    //0  1  2
   console.log(arr[i]);  //12  5  8
}複製程式碼

b) for ... of ...迴圈

//迴圈陣列
let arr = [12,5,8];
for (let name of arr){
     console.log(name);  //12  5  8
}複製程式碼

//迴圈json資料
let json = {a:'apple',b:'banana'};
for (let name of json){
     console.log(name);
}
//報錯，因為不能用for ...of...來迴圈json資料複製程式碼

c) 刪除json的某一條資料

let json = {a:12,b:5};
delete json.a;
console.log(json);  //  b:5複製程式碼

3. 箭頭函式

ES6標準新增了一種新的函式：Arrow Function（箭頭函式）。
為什麼叫Arrow Function？因為它的定義用的就是一個箭頭：

X => X * X複製程式碼

我們先回顧下ES5函式定義與呼叫：

var show = function(){
     alert(12);
};
show();   //12複製程式碼

const show = () =>{
   alert(12);
};
show();  //12
//個人理解：這裡將function關鍵字去掉然後在“()”後面加一個“=>”複製程式碼

接下來我們舉幾個例子，來進一步瞭解下箭頭函式：

a) 函式有返回值

//ES5函式寫法
var sum = function(a,b) {
    return a + b;
}
alert(sum(12,5));
//ES6函式寫法
let sum = (a,b) => {
    return a + b;
}
alert(sum(12,5));
//進化一下    ...  省略花括號
let sum = (a,b) => a + b;
alert(sum(12,5));複製程式碼

b) 引數是1個

var show = function(a){return 'welcome'}
//相當於    省略括號
var show = a => 'welcome'複製程式碼

c) 引數是0個

var show = function(){return 'welcome'}
//相當於   省略括號
var show = () => 'welcome'複製程式碼

注意：箭頭函式下 ，arguments 不能使用了

var show = (a,b) => console.log(this.arguments); // 報錯

######箭頭函式簡單應用：
陣列排序複製程式碼

var arr = [12,55,8];複製程式碼

//es5寫法
arr.sort(function(n1,n2){
return n1 - n2;
});
//es6寫法
arr.sort((n1,n2) => n1-n2);
alert(arr);


相關文章