數(shù)組淤齐、Set和Map比較

1. 都是JavaScript的數(shù)據(jù)結(jié)構(gòu)
2. Set是ES6提供的新的數(shù)據(jù)結(jié)構(gòu), 類似于數(shù)組, 但是它的成員是唯一的, 不能重復
3. Map是ES6提供的新的數(shù)據(jù)結(jié)構(gòu), 本質(zhì)上是鍵值對的集合（Hash 結(jié)構(gòu)）, 但是傳統(tǒng)上只能用字符串當作鍵啦鸣。這給它的使用帶來了很大的限制瞒津，所有ES6中新增了Ｍap數(shù)據(jù)結(jié)構(gòu), 它類似于對象蝉衣，也是鍵值對的集合，但是“鍵”的范圍不限于字符串巷蚪，各種類型的值（包括對象）都可以當作鍵病毡。

Array

• 創(chuàng)建數(shù)組

let arr = new Array(3);  // 創(chuàng)建一個包含3項的數(shù)組
let names = new Array("張三"); // 創(chuàng)建一個包含1項, 值為“張三”的數(shù)組
let colors = ["red", "blue", "green"];  // 創(chuàng)建一個包含3個字符串的數(shù)組
let names = []; // 創(chuàng)建一個空數(shù)組

• 判斷是不是數(shù)組

if(value instanceof Array){
}
instanceof操作符存在一個問題， 就是它假定只有一個全局執(zhí)行環(huán)境, 如果網(wǎng)頁中包含多個框架, 實際上就存在多個不同的全局執(zhí)行環(huán)境, 如果從一個框架向另外一個框架傳入一個數(shù)組, 那么傳入的數(shù)組和框架的原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)
怎么解決這個問題屁柏？
ECMAScript5新增了Array.isArray()方法
if(Array.isArray(value)){
}

• 數(shù)組長度

let colors = ["red", "blue", "green"];
colors.length;
注: 數(shù)組的length是可以修改的
colors.length = 2; //這個時候數(shù)組的長度就是2了
console.log(colors[2]); // undefined

• 數(shù)組轉(zhuǎn)字符串

let colors = ["red", "blue", "green"];
console.log(colors.toString()); //red,blue,green

• 數(shù)組增加和刪除元素

1.棧方法, 后進先出

let colors = new Array();
colors.push("red", "blud"); //[ 'red', 'blud' ]  數(shù)據(jù)入棧
colors.push("green"); //[ 'red', 'blud', 'green' ] 
colors.pop(); //  green出棧
console.log(colors); //[ 'red', 'blud' ]

2.隊列方法, 先進先出

let colors = new Array();
colors.unshift("red", "green"); //[ 'red', 'green' ] 入隊
let color = colors.shift();
console.log(color); //red 出隊
console.log(colors);

• 數(shù)組排序

反轉(zhuǎn)
let vals = [1, 2, 3, 4, 5];
vals.reverse(); 
console.log(vals);//[ 5, 4, 3, 2, 1 ]

升序排列
let vals = [3, 5, 1, 2, 4];
vals.sort(); //[ 1, 2, 3, 4, 5 ]
console.log(vals);

• 數(shù)組拼接
  concat

1. 該方法會先創(chuàng)建當前數(shù)組的一個副本
2. 無參數(shù)的情況下, 直接返回副本, 有參數(shù)的情況下, 將參數(shù)中的數(shù)組元素添加到數(shù)組的尾部
let colors1 = ["red", "green"];
let colors2 = colors1.concat("yellow", ["black", "blue"]);
console.log(colors2); //[ 'red', 'green', 'yellow', 'black', 'blue' ]

• 數(shù)組截取
  slice, 基于當前數(shù)組中的一項或多項創(chuàng)建一個新的數(shù)組

let colors1 = ["red", "green", "blue", "yellow", "black", "white"];
let colors2 = colors1.slice(1); //[ 'green', 'blue', 'yellow', 'black', 'white' ]  //從下標為1的元素開始截取
let colors3 = colors1.slice(1, 3);//[ 'green', 'blue' ]  //截取下標1到3但是不包含3

• 數(shù)組增啦膜、刪、改
  splice, 這個方法很強大, 根據(jù)傳入的參數(shù)不同, 可以實現(xiàn)對數(shù)組進行增淌喻、刪僧家、改

刪除: 2個參數(shù), 從第幾項開始刪和刪除幾項
let colors = ["red", "green", "blue", "yellow", "black", "white"];
let removed = colors.splice(0, 1);
console.log(removed);  //[ 'red' ]
console.log(colors);//[ 'green', 'blue', 'yellow', 'black', 'white' ]

插入: 3+個參數(shù), 起始位置, 要刪除幾項(填0), 要插入的項(可以寫多個參數(shù))
let colors = ["red", "blue"];
colors.splice(1, 0, "yellow"); //[ 'red', 'yellow', 'blue' ]
colors.splice(1, 0, "black", "green"); //[ 'red', 'black', 'green', 'yellow', 'blue' ]
console.log(colors);

替換: 參數(shù), 起始位置、要刪除的項裸删、要插入的項
let colors = ["red", "blue"];
colors.splice(1, 1, "yellow"); //[ 'red', 'yellow' ]
console.log(colors);

• 數(shù)組查找

indexOf()和lastIndexOf()
參數(shù): 要查找的項八拱、起點位置索引(可選)
indexOf() 從數(shù)組開頭開始查找
lastIndexOf() 從數(shù)組的末尾開始查找
let colors = ["red", "green", "blue", "yellow", "black", "white"];
let index = colors.indexOf("blue");
let lastIndex = colors.lastIndexOf("white");
console.log(index, lastIndex); //2, 5

• 數(shù)組迭代

every
對數(shù)組中的每一項運行給定函數(shù)，如果該函數(shù)對每一項都返回 true涯塔，則返回 true, 否則返回false

var numbers = [1,2,3,4,5,4,3,2,1]; 
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
});
console.log(everyResult); //false

some
對數(shù)組中的每一項運行給定函數(shù)肌稻，如果該函數(shù)只要有一項返回 true，則返回 true

var someResult = numbers.some(function(item, index, array){ 
    return (item > 2); 
}); 
console.log(someResult);

filter
對數(shù)組中的每一項運行給定函數(shù)匕荸，返回該函數(shù)會返回 true 的項組成的數(shù)組

var numbers = [1,2,3,4,5,4,3,2,1]; 
var result = numbers.filter(function(item, index, array){ 
 return (item > 2); 
});
console.log(result); //[ 3, 4, 5, 4, 3 ]

forEach
對數(shù)組中的每一項運行給定函數(shù)爹谭。這個方法沒有返回值

var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){ 
  // 執(zhí)行某些操作
});

map
對數(shù)組中的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組

var numbers = [1,2,3,4,5,4,3,2,1]; 
var result = numbers.map(function(item, index, array){ 
  return item * 2;
});
console.log(result); //[ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]

Set

• 創(chuàng)建Set
  值不會重復

let set = new Set([1, 2, 3, 3, 4]);
set.add(4); //4已經(jīng)存在榛搔， 不會添加
set.add(5); //5添加成功
console.log(set); //Set { 1, 2, 3, 4, 5 }

• Set的屬性和方法

size, Set中元素的數(shù)量

let set = new Set([1, 2, 3, 3, 4]);
console.log(set.size); //Set的長度 4

添加和刪除元素

let set = new Set([1, 2, 3]);
set.add(4);
console.log(set); //Set { 1, 2, 3, 4 }
set.delete(2);
console.log(set); //Set { 1, 3, 4 }

元素是否存在

let set = new Set([1, 2, 3]);
console.log(set.has(1)); //true
console.log(set.has(4)); //false

• 清空所有元素

let set = new Set([1, 2, 3]);
console.log(set); //Set { 1, 2, 3 }
set.clear(); //清空Set
console.log(set); //Set {}

• 遍歷Set
  4個遍歷方法
  Set.prototype.keys()：返回鍵名的遍歷器
  Set.prototype.values()：返回鍵值的遍歷器
  Set.prototype.entries()：返回鍵值對的遍歷器
  Set.prototype.forEach()：使用回調(diào)函數(shù)遍歷每個成員

遍歷
let set = new Set(['Java', 'Php', 'Node']);
由于 Set 結(jié)構(gòu)沒有鍵名诺凡，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致践惑。

// keys
for(let item of set.keys()){
    console.log(item);
}
輸出:
Java
Php
Node

// values
// Set 的默認遍歷器生成函數(shù)就是它的values方法, 所以這里的values是可以省略的
for(let item of set.values()){
    console.log(item);
}
或
for(let item of set){
    console.log(item);
}
輸出:
Java
Php
Node

// entries
for(let item of set.entries()){
    console.log(item);
}
輸出:
[ 'Java', 'Java' ]
[ 'Php', 'Php' ]
[ 'Node', 'Node' ]

//forEach
// 參數(shù)依次是 鍵值绑洛、鍵名、集合本身
set.forEach((value, key, set) => console.log(key + ' : ' + value))

Map

JavaScript 的對象（Object）童本，本質(zhì)上是鍵值對的集合（Hash 結(jié)構(gòu)）真屯，但是傳統(tǒng)上只能用字符串當作鍵。這給它的使用帶來了很大的限制穷娱，所有ES6中新增了Ｍap數(shù)據(jù)結(jié)構(gòu), 它類似于對象绑蔫，也是鍵值對的集合，但是“鍵”的范圍不限于字符串泵额，各種類型的值（包括對象）都可以當作鍵配深。

const map = new Map();
const obj = {name: '張三'};
map.set(obj, 'zhang san is a man');
console.log(map.get(obj)); //zhang san is a man

• 創(chuàng)建Map

// 構(gòu)造方法創(chuàng)建Map
const map = new Map([
    ['name', 'zhangsan'],
    ['des', 'zhangsan is a man']
]);

• 屬性和方法

1. size
   成員總數(shù)

console.log(map.size);  //2

2. has
   has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中

console.log(map.has('name')); //true

3. set
   set方法設(shè)置鍵名key對應(yīng)的鍵值為value嫁盲，然后返回整個 Map 結(jié)構(gòu)篓叶。如果key已經(jīng)有值烈掠，則鍵值會被更新，否則就新生成該鍵缸托。

map.set('name', 'lisi');

4. get
   get方法讀取key對應(yīng)的鍵值左敌，如果找不到key，返回undefined俐镐。

map.get('name');

5. delete
   delete方法刪除某個鍵矫限，返回true。如果刪除失敗佩抹，返回false叼风。

map.delete('name');

6. clear
   clear方法清除所有成員，沒有返回值棍苹。

map.clear()

• 遍歷方法
  Map.prototype.keys()：返回鍵名的遍歷器无宿。
  Map.prototype.values()：返回鍵值的遍歷器。
  Map.prototype.entries()：返回所有成員的遍歷器枢里。
  Map.prototype.forEach()：遍歷 Map 的所有成員

const map = new Map([
    ['name', 'zhangsan'],
    ['des', 'zhangsan is a man']
]);

//keys
for(let key of map.keys()){
    console.log(key);
}
輸出:
name
des

//values
for(let val of map.values()){
    console.log(val);
}
輸出:
zhangsan
zhangsan is a man

//entries
for(let item of map.entries()){
    console.log(item);
}
輸出:
[ 'name', 'zhangsan' ]
[ 'des', 'zhangsan is a man' ]

for(let [key, value] of map.entries()){
    console.log(key, value);
}
輸出:
name zhangsan
des zhangsan is a man

// 等價于map.entries
for(let [key, value] of map){
    console.log(key, value);
}
輸出:
name zhangsan
des zhangsan is a man

forEach, 跟數(shù)組中的forEach用法一致

const map = new Map([
    ['name', 'zhangsan'],
    ['des', 'zhangsan is a man']
]);
map.forEach(function(value, key, map){
    console.log(key, value);
});