數組

#數組#

##數組基礎##

數組是大多數語言裏面最多見的一種數據結構，它是一個有序的值列表。

###建立數組###

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' ]

##重排##

1.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 ]

2.sort()：按照升序順序排列數組每一項

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort());

//[ -12, 0, 12, 23, 3, 7 ]

能夠看到，咱們調用sort（）方法後排序並無正確的按照升序來排序。

緣由是sort（）方法排序會先調用每個元素的toString（）轉型方法，而後比較獲得的字符串，即便每一項都是數值，sort（）方法比較的也是字符串

解決辦法：sort（）能夠接受一個比較函數做爲參數

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort(function(a,b){

if(a < b){

return -1;

}else if(a > b){

return 1;

}else{

return 0;

}

}));

若是要進行降序排列只須要將返回值修改便可。

固然，還有一種更簡單的方法，

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort(function(a,b){

return a - b;

//降序就返回 b - a

}));

注：reverse（）和sort（）返回值是通過排列後的數組

##位置##

1.indexOf（）：查找項目索引，他是從數組開頭開始找，若是沒找到就返回-1

例：

let arr = ["H","e","l","l","o"];

console.log(arr.indexOf("l"));//2

console.log(arr.indexOf("z"));//-1

2.lastIndexOf（）：查找起點位置索引，從數組末尾開始找，沒找到就返回-1

例：

let arr = ["H","e","l","l","o"];

console.log(arr.lastIndexOf("l"));//3

console.log(arr.indexOf("z"));//-1

3.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集合是一種無重複（重點！！！）元素的列表，這是這種數據結構最大的特色。

##建立集合##

let s1 = new Set();

let s2 = new Set([1,2,3]);

console.log(s1);//Set {}

console.log(s2);//Set { 1, 2, 3 }

注：JS中嚴格區分大小寫

##添加##

咱們能夠用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 }

例2：

let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set { [ 1, 2, 3 ] }

##相關屬性和方法##

1.size:

它能夠獲取元素的個數，和數組的length類似

例：

let s1 = new Set([1,2,3]);

console.log(s1.size);//3

2.has（）：

它能夠查看一個集合中是否包含某一個值

例：

let s1 = new Set([1,2,3]);

console.log(s1.has(1));//true

console.log(s1.has("1"));//false

3.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 }

注：delete沒法刪除集合中的數組

4.clear（）：

它能夠刪除全部的元素

例：

let s1 = new Set([1,2,3]);

s1.clear()

console.log(s1);//Set {}

注：它將一次清空集合的全部內容，包括刪除數組

##遍歷##

1.for-of：

let s = new Set([1,2,3,4,5]);

for(let i of s){

console.log(i);

}// 1

// 2

// 3

// 4

// 5

2.forEach：

//使用forEach進行遍歷

let s = new Set([1,2,3,4,5]);

s.forEach(ele => console.log(ele));

// 1

// 2

// 3

// 4

// 5

3.keys（）：

它能夠遍歷集合的鍵：

let s = new Set(["Bill","Lucy","David"]);

for(let i of s.keys()){

console.log(i);

}

// Bill

// Lucy

// David

4.values（）：

它能夠遍歷集合的值：

let s = new Set(["Bill","Lucy","David"]);

for(let i of s.values()){

console.log(i);

}

// Bill

// Lucy

// David

5.entries（）：

它能夠遍歷集合的鍵和值：

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 ]

或者使用Array對象提供的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 ]

注：由於集合不能存放相同的元素，因此能夠用這種方法給數組去重

##弱集合##

let arr = [1,2,3];

let s = new Set(arr);

arr = null;//刪除arr數組的指向

console.log(s);//Set { 1, 2, 3 }數組依然存在在集合中

console.log(arr);//null

注：這就是刪除數組，但沒法刪除

1.內存泄漏

也就是站着空間卻沒有用，形成內存浪費，瀏覽器使用變慢

例：

let arr = [1,2,3];

arr = null;

解決方法：在JS中採用的是動態內存管理技術，例如垃圾回收機制，會自動從內存中刪除再也不被程序須要的東西。

注：弱集合沒法在建立弱集合時傳入一個數組進行初始化，不過弱集合也有has(),add(),delete()等方法

#映射#

JS對象，本質上是鍵值對的集合，爲了解決這個問題，ES6提供了Map數據結構。

它相似對象，也是鍵值對的集合，它提供了「值-值」的對應，是一種更完善的Hash結構的實現

##建立映射##

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

注：JS中嚴格區分大小寫

在對象中沒法用對象最爲對象屬性的鍵名。而在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 }

##相關屬性和方法##

在映射中一樣支持：

has(key)：檢查制定的鍵名在Map映射中是否存在

delete（key）：從Map映射中移除指定鍵名及對應的值

clear（）：移除Map映射中全部的鍵值

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 {}

##遍歷##

1.for-of：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m){

console.log(i);

}

// [ 'name', 'xiejie' ]

// [ 'age', 18 ]

2.keys（）：

遍歷映射的鍵

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.keys()){

console.log(i);

}

// name

// age

3.values（）：

遍歷映射的值：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.values()){

console.log(i);

}

// xiejie

// 18

4.entries（）：

遍歷映射的鍵和值：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.entries()){

console.log(i);

}

// [ 'name', 'xiejie' ]

// [ 'age', 18 ]

##映射轉數組##

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 ] ]

##弱映射##

主要是解決存在映射內部的垃圾數據問題

let weakMap = new WeakMap();

注：弱映射和普通映射同樣，具備has()，get(),set(),delete()等方法