數組
數組基礎
數組是大多數語言里面最常見的一種數據結構，它是一個有序的值列表。
創建數組
1.創建字面量數組 let arr=[]; 2.創建構造函數數組 let arr=new Array(); 注：無論是字面量形式數組，還是構造函數數組，當我們要使用typeof打印數據類型時，都會返回一個object
例：
let arr1 = []; let arr2 = new Array(); console.log(typeof arr1);//object console.log(typeof arr2);//object
賦值
1.先聲明再賦值 let arr = []; arr[0] = 1; arr[1] = 2; arr[2] = 3; 注（重要！！！）：數組的下標是從0開始的。 2.聲明直接賦值 let arr = [1,2,3,4,5]; 注：我們可以在數組任意位置進行賦值，數組長度會自動改變，空的位置使用undefined填充。
例：
let arr = []; arr[0] = 1; arr[4] = 10; console.log(arr); //[ 1, <3 empty items>, 10 ]
訪問
例：
let arr = [1,2,3,4,5]; console.log(arr[0]);//1 //訪問下標為0的值，也就是數組的第一個數 除了這種方式，我們還可以使用變量的方式來訪問 例2： let arr = [1,2,3,4,5]; let i = 2; console.log(arr[i]);//3
刪除
我們可以用delete來刪除數組的某一個元素，但刪除的元素位置不會消失，會有個替代： let arr = [1,2,3,4,5]; delete arr[2];//刪除數組中的第3個元素； console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ]
遍歷
1.for循環遍歷 使用最多的一種遍歷方法，
例：
let arr = [1, 2, 3, 4, 5]; for (let i=0;i<arr.length;i++) { console.log(arr[i]); }// 1 // 2 // 3 // 4 // 5
2.for-in遍歷 for-in主要迭代的是數組的鍵，然后我們通過鍵就可以找到相應的數組元素。
例：
let arr = [1, 2, 3, 4, 5]; for (let i in arr) { console.log(鍵為{i}的元素值為${arr[i]}); } // 鍵為0的元素值為1 // 鍵為1的元素值為2 // 鍵為2的元素值為3 // 鍵為3的元素值為4 // 鍵為4的元素值為5 注（再次聲明！！！）：數組的下標是從0開始.
3.for-of遍歷 for-of是直接迭代數組的值
例：
let arr = [1, 2, 3, 4, 5]; for (let i of arr) { console.log(i); }// 1 // 2 // 3 // 4 // 5
4（擴展）.forEach遍歷 forEach涉及到了回調，目前並不說回調內容： let arr = [1,2,3,4,5,6,7,8,9,10]; //將數組的每一項傳入到回調函數，然后執行回調函數里面的操作 let i = arr.forEach(function(item){ console.log(item); });
5.使用迭代器遍歷 在ES6中，還專門提供了三個使用迭代可迭代的元素方法，分別是keys（），values（）和entries（）。
（1）keys（）它便利出的是數組的鍵
例：
let arr = [3,5,8,1]; for(let i of arr.keys()){ console.log(i); } // 0 // 1 // 2 // 3 （2）entrise（）遍歷出的是數組的鍵和值
例：
let arr = [3,5,8,1]; for(let i of arr.entries()){ console.log(i); } // [ 0, 3 ] // [ 1, 5 ] // [ 2, 8 ] // [ 3, 1 ]
（3）values（）它可以找到可迭代元素的值 注：數組內部無法使用values（）方法
解構
在JS中，解構數組就是講一個復雜類型的數據分解為一個普通類型的數據。
例：
let arr = [1,2,3]; let [a,b,c] = arr; console.log(a);//1 console.log(b);//2 console.log(c);//3 在其中，可以使用，跳過不想解構的數組
例：
let arr = [1,2,3];
let [a,,b] = arr; console.log(a);//1 console.log(b);//3
多維數組
例： let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [a,b];//這里c就是一個多維數組 1.訪問: let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [a,b]; console.log(c[0][2]);//Lucy 2.解構 let arr = [[1,2,3],4,5]; let [a,b,c] = arr; console.log(a);//[1,2,3] console.log(b);//4 console.log(c);//5
擴展運算符
從ES6開始新增的運算符，用於去除刻碟帶對象的每一項。 1.例： let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [...a,...b]; console.log(c); //[ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ] 2.字符串轉化為數組 例： let str = "Hello"; let arr = [...str]; console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]
數組屬性
相關屬性
length：返回數組元素的個數
例： let arr = [1,2,3,4,5]; console.log(arr.length);//5
數組的相關方法
1.添加刪除 數組像棧一樣。 棧是一種LIFO(Last-In-First-Out)數組解構，這種數據結構特點是后進先出。
例：
let arr = []; let i = arr.push("red","blue");
//push
在數組后面插入括號中內容，內容可以用，隔開，插入多個。 console.log(arr);
//[ 'red', 'blue' ] console.log(i);
//2 let j = arr.pop();
//pop從數組最后開始刪除 console.log(arr);
//[ 'red' ] console.log(j);
//blue let arr = []; arr.push("red","green","pink") let item = arr.shift();
//shift從數組前面刪除 console.log(item);//red console.log(arr);
//[ 'green', 'pink' ] let arr = []; arr.unshift("red","green","pink");
//unshift從數組前面開始添加 let item = arr.pop(); console.log(item);
//pink console.log(arr);
//[ 'red', 'green' ]
2.操作方法
（1）concat（）：先船艦當前數組的一個副本，然后將接收到的參數添加到副本的末尾，最后返回新構建的數組，但原來的數組不會變化
例： let arr = [1,2,3]; let arr2 = arr.concat("red","blue"); console.log(arr);//[ 1, 2, 3 ] console.log(arr2);//[ 1, 2, 3, 'red', 'blue' ] （2）slice（）：它可以接受一個或者兩個參數，代表返回項的起始和結束位置。 一個參數：代表起始位置，返回從指定的起始位置到數組末尾的所有項目 兩個參數：代表從指定的起始位置到指定的末尾位置的項，但不包括結束位置的項目。
注：slice（）方法不會影響原始數組
例： let arr = [1,2,3,4,5,6,7,8,9,10];
//一個參數
let i = arr.slice(3);
console.log(i);
//[ 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr);
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
//兩個參數
let j = arr.slice(2,6);
console.log(j);
//[ 3, 4, 5, 6 ]
console.log(arr);
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
注：如果傳入的是負數，用數組的長度加上該數來確定相應的位置 （3）splice（）：它可以實現三種類型操作，刪除插入和替換 ——刪除
例： let arr = [1,2,3,4,5,6,7,8,9,10];
//從下標為3的元素開始刪除，刪除5個元素 //將刪除的元素返回給i let i = arr.splice(3,5); console.log(i);
//[ 4, 5, 6, 7, 8 ] console.log(arr);
//[ 1, 2, 3, 9, 10 ] ——插入
例： let arr = [1,2,3,4,5,6,7,8,9,10];
//從下標為3的元素之前開始插入
let i = arr.splice(3,0,"red","blue");
console.log(i);
//[] console.log(arr);
//[ 1, 2, 3, 'red', 'blue', 4, 5, 6, 7, 8, 9, 10 ] ——替換
例： let arr = [1,2,3,4,5,6,7,8,9,10];
//從下標為3的元素之前開始插入
//插入多少，就剛好刪除多少
let i = arr.splice(3,2,"red","blue");
console.log(i);
//[ 4, 5 ] console.log(arr);
//[ 1, 2, 3, 'red', 'blue', 6, 7, 8, 9, 10 ]
（4）join（）：將數組轉為字符串，可以傳入分隔符作為參數
例： let arr = [1,2,3];
let str = arr.join("");
console.log(str);
//123 let str2 = arr.join(","); console.log(str2);
//1,2,3
（5）split（）：將字符串轉為數組，傳入參數指明以什么作為分隔符 let str = "Hello";
let arr = str.split("");
console.log(arr);
//[ 'H', 'e', 'l', 'l', 'o' ] let arr2 = str.split("l");
console.log(arr2);
//[ 'He', '', 'o' ]
3、數組重排序方法
重排序涉及到兩個方法：reverse()和strt()
reverse。：反轉數組項的順序，注意使用該方法時會改變原來數組的順序，而不是返回一個副本
let arr = [1,2,3,4,5];
console.log(arr.reverse());//[ 5, 4, 3, 2, 1 ] console.log(arr);//[ 5, 4, 3, 2, 1 ]
strt()：按照升序排列數組每一項
let arr = [-6,-1,-12,1,9,47,3,45];
console.log(arr.sort(function(a,b){
return a - b;
}));
最后需要注意的是，reverse。和sort。方法，返回值是經過排序之后的數組
ECMAScript還為數組提供了兩個位置方法：indexOf。和lastlndexOf。
這兩個方法都接收兩個參數：要查找的項目和查找的起點位置索引。區別在於一個是從數組開頭
開始找，一個是從數組末尾開始找。如果沒找到就返回-1
let arr = ["H","e","l","l","o"];
console.log(arr.indexOf("l"));//2 console.log(arr.lastIndexOf("l"));//3 console.log(arr.indexOf("z"));//-1
這兩個方法進行查找時使用的是全等進行比較
includes（）：用於查看數組里面是否包含某個元素，包含返回true，否則返回false
let arr = ["1","2","3"];
console.log(arr.includes(2));//flase
console.log(arr.includes("2"));//true
console.log(arr.includes(7));//false
集合
集合(set)是在ES6中引入的一種數據結構，用於表示唯一值的集合，所以它不能包含重復值。接 下來這一小節，就讓我們具體來看一下這種新的數據結構。
Set集合是一種無重復元素的列表，這是這種數據結構的最大的一個特點。
要創建一個集合，方法很簡單，直接使用new就可以創建一個Set對象。如果想要集合在創建時 就包含初始值，那么我們可以傳入一個數組進去。
let s1 = new Set();
let s2 = new Set([1,2,3]);
console.log(s1);//Set {}
console.log(s2);//Set { 1, 2, 3 }
使用add()方法可以給一個集合添加值，由於調用add()方法以后返回的又是一個Set對象，所 以我們能連續調用add()方法進行值的添加，這種像鏈條一樣的方法調用方式被稱為鏈式調用。
let s1 = new Set();
s1.add(1);
console.log(s1);//Set { 1 }
s1.add(2).add(3).add(4);
console.log(s1);
//Set { 1, 2, 3, 4 } 我們還可以直接將一個數組傳入add()方法里面 let s1 = new Set();
s1.add([1,2,3]);
console.log(s1);
//Set { [ 1, 2, 3 ] }
需要注意的是建立Set對象時傳入數組與調用add()方法時傳入數組是效果是不一樣，區別 如下：
建立Set對象時傳入數組，數組每一項成為Set對象的一個元素
let s1 = new Set([1,2,3]);
console.log(s1);
//Set { 1, 2, 3 }
console.log(s1.size);//3
調用add()方法時傳入數組，就是作為Set對象的一個元素
let s1 = new Set();
s1.add([1,2,3]);
console.log(s1);
//Set { [ 1, 2, 3 ] }
console.log(s1.size);//1
在Set對象中，不能夠添加相同的元素，這是很重要的一個特性
let s1 = new Set();
s1.add(1).add(2).add(2).add(3);
console.log(s1);
//Set { 1, 2, 3 }
集合相關屬性和方法
- 用size屬性獲取元素個數
let s1 = new Set([1,2,3]);
console.log(s1.size);//3
- 使用has（）方法來查看一個集合中是否包含某一個值
let s1 = new Set([1,2,3]);
console.log(s1.has(1));//true
- 刪除集合值
使用delete刪除Set對象里面的某一個元素
let s1 = new Set([1,2,3]);
s1.delete(2);
console.log(s1);//Set { 1, 3 }
//沒有的元素也不會報錯
s1.delete("2");
console.log(s1);//Set { 1, 3 }
如果要一次性刪除所有的元素，可以使用clear方法
let s1 = new Set([1,2,3]);
s1.clear()
console.log(s1);//Set {}
遍歷集合
集合也是可以枚舉的，我們同樣可以使用for-o f來對集合進行遍歷，如下:
let s = new Set([1,2,3,4,5]);
for(let i of s){ console.log(i);
}
// 1
// 2
// 3
// 4
// 5
或者通過for Each來進行遍歷，示例如下：
//使用forEach進行遍歷
let s = new Set([1,2,3,4,5]); s.forEach(ele => console.log(ele));
//1
//2
//3
//4
//5
除此之外，我們也可以使用集合里面自帶的keys() , values()以及ent ries()方法來對集合 進行遍歷。順便要說一下的是，在集合里面鍵和值是相同的。
keys()方法遍歷集合的鍵
let s = new Set(["Bill","Lucy","David"]); for(let i of s.keys()){
console.log(i);
}
// Bill
// Lucy
// David
values()方法遍歷集合的值
let s = new Set(["Bill","Lucy","David"]); for(let i of s.values()){
console.log(i);
}
// Bill
// Lucy
// David
ent ries()方法同時遍歷集合的鍵與值
let s = new Set(["Bill","Lucy","David"]); for(let i of s.entries()){
console.log(i);
}
// [ 'Bill', 'Bill' ]
// [ 'Lucy', 'Lucy' ]
// [ 'David', 'David' ]
集合轉數組
集合轉為數組，最快的方法就是使用前面所講過的擴展運算符，如下:
let s1 = new Set([1,2,3]);
console.log(s1);//Set { 1, 2, 3 }
let arr = [...s1]; console.log(arr);//[ 1, 2, 3 ]
除此之外，我們還可以使用Arra y對象所提供的from。方法來進行轉換
let s1 = new Set([1,2,3]); console.log(s1);//Set { 1, 2, 3 }
let arr = Array.from(s1); console.log(arr);//[ 1, 2, 3 ]
前面我們有提到過，Set對象里面是不能夠存放相同的元素的，利用這個特性，我們可以快速的 為數組去重，如下：
let arr = [1,2,2,3,4,3,1,6,7,3,5,7];
let s1 = new Set(arr);
let arr2 = [...s1]; console.log(arr2);//[ 1, 2, 3, 4, 6, 7, 5 ]
弱集合(擴展)
當對象添加到集合中時，只要集合存在，它們就一直存儲在集合。即使對象的引用被刪除了也依 然如此，我們來看下面的這個例子：
let arr = [1,2,3];
let s = new Set(arr);
arr = null;//刪除arr數組的指向
console.log(s);//Set { 1, 2, 3 }數組依然存在於集合中 console.log(arr);//null
映射
映射(Map)也是ES6規范中引入的一種數據結構。
使用new關鍵字與Map()構造函數，就可以創建一個空的m ap對象。如果要向Map映射中添加 新的元素，可以調用set()方法並分別傳入鍵名和對應值作為兩個參數。如果要從集合中獲取 信息，可以調用get()方法。
let m = new Map();
m.set("name","xiejie");
m.set("age",18);
console.log(m);
//Map { 'name' => 'xiejie', 'age' => 18 }
console.log(m.get("name"));
//xiejie
在對象中，無法用對象作為對象屬性的鍵名。但是在Map映射中，卻可以這樣做，可以這么說， 在Map映射里面可以使用任意數據類型來作為鍵。
let m = new Map();
m.set({},"xiejie"); m.set([1,2,3],18);
m.set(3581,18);
console.log(m);
//Map { {} => 'xiejie', [ 1, 2, 3 ] => 18, 3581 => 18 }
傳入數組來初始化Map映射 可以向Map構造函數傳入一個數組來初始化Map映射，這一點同樣與Set集合相似。數組中的每 個元素都是一個子數組，子數組中包含一個鍵值對的鍵名與值兩個元素。因此，整個Map映射中 包含的全是這樣的兩個元素的二維數組
let arr = [["name","xiejie"],["age",18]];
let m = new Map(arr);
console.log(m);
//Map { 'name' => 'xiejie', 'age' => 18 }
映射相關屬性和方法
在設計語言新標准時，委員會為Map映射與Set集合設計了如下3個通用的方法 has(key):檢測指定的鍵名在Map映射中是否已經存在 delete(key):從Map映射中移除指定鍵名及其對應的值
clear。：移除M ap映射中的所有鍵值對
Map映射同樣支持size屬性，其代表當前集合中包含的鍵值對數量
let arr = [["name","xiejie"],["age",18]]; let m = new Map(arr);
console.log(m);//Map { 'name' => 'xiejie', 'age' => 18 } console.log(m.size);//2 console.log(m.has("name"));//true console.log(m.get("name"));//xiejie m.delete("name");
console.log(m);//Map { 'age' => 18 } m.clear();
console.log(m);//Map {}
映射的遍歷
與集合一樣，映射也是可以枚舉的，所以可以用與集合類似的方式進行遍歷。 使用for-of來遍歷映射
let m = new Map([["name","xiejie"],["age",18]]); for(let i of m){
console.log(i);
}
// [ 'name', 'xiejie' ]// [ 'age', 18 ]
keys()方法遍歷映射的鍵
let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.keys()){
console.log(i);
}
// name
// age
values()方法遍歷映射的值
let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.values()){
console.log(i);
}
// xiejie
// 18
ent ries()方法同時遍歷映射的鍵與值
let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.entries()){
console.log(i);
}
// [ 'name', 'xiejie' ]
// [ 'age', 18 ]
映射轉為數組
Map結構轉為數組結構，比較快速的方法還是使用前面介紹過的擴展運算符...。
let arr = [["name","xiejie"],["age",18]];
let m = new Map(arr);
console.log([...m.keys()]);//[ 'name', 'age' ]
console.log([...m.values()]);//[ 'xiejie', 18 ]
console.log([...m.entries()]);//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ]
console.log([...m]);//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ] 或者使用Array對象的from。方法
let arr = [["name","xiejie"],["age",18]];
let m = new Map(arr);
console.log(Array.from(m));
//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ]