es6----set map應用場景

1.數組去重

2.字符串去重

屬性：

• Set.prototype.size：返回Set實例的成員總數。

Set 實例的方法分為兩大類：操作方法（用於操作數據）和遍歷方法（用於遍歷成員）。下面先介紹四個操作方法。

• add(value)：添加某個值，返回 Set 結構本身。
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• has(value)：返回一個布爾值，表示該值是否為Set的成員。
• clear()：清除所有成員，沒有返回值。

 

 

遍歷操作

Set 結構的實例有四個遍歷方法，可以用於遍歷成員。

• keys()：返回鍵名的遍歷器
• values()：返回鍵值的遍歷器
• entries()：返回鍵值對的遍歷器
• forEach()：使用回調函數遍歷每個成員

需要特別指出的是，Set的遍歷順序就是插入順序。這個特性有時非常有用，比如使用 Set 保存一個回調函數列表，調用時就能保證按照添加順序調用。

（1）keys()，values()，entries()

keys方法、values方法、entries方法返回的都是遍歷器對象

 

 

（2）forEach()

 

Map 對象

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

 

Map方法

var myMap = new Map();
myMap.set("bar", "baz");
myMap.set(1, "foo");

myMap.size;       // 2
myMap.has("bar"); // true

myMap.clear();

myMap.size;       // 0
myMap.has("bar")  // false

 

使用for..of方法遍歷

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

for (var key of myMap.keys()) {
  console.log(key);
}
// 將會顯示兩個log。 一個是 "0" 另一個是 "1"

for (var value of myMap.values()) {
  console.log(value);
}
// 將會顯示兩個log。 一個是 "zero" 另一個是 "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// 將會顯示兩個log。 一個是 "0 = zero" 另一個是 "1 = one"

 

使用forEach()方法迭代映射

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// 將會顯示兩個logs。 一個是 "0 = zero" 另一個是 "1 = one"
Set 對象

 

Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。

Set 對象方法

var mySet = new Set();
mySet.add(1);
mySet.add("foo");

mySet.size;       // 2
mySet.has("foo"); // true

mySet.clear();

mySet.size;       // 0
mySet.has("bar")  // false

 

迭代Set對象

// 迭代整個set
// 按順序輸出：1, "some text" 
for (let item of mySet) console.log(item);

// 按順序輸出：1, "some text" 
for (let item of mySet.keys()) console.log(item);

// 按順序輸出：1, "some text" 
for (let item of mySet.values()) console.log(item);

// 按順序輸出：1, "some text" 
//(鍵與值相等)
for (let [key, value] of mySet.entries()) console.log(key);

// 轉換Set為Array (with Array comprehensions)
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 替代方案(with Array.from)
var myArr = Array.from(mySet); // [1, "some text"]

// 如果在HTML文檔中工作，也可以：
mySet.add(document.body);
mySet.has(document.querySelector("body")); // true

// Set和Array互換
mySet2 = new Set([1,2,3,4]);
mySet2.size; // 4
[...mySet2]; // [1,2,3,4]

// 用forEach迭代
mySet.forEach(function(value) {
  console.log(value);
});

 

Set 與 Array 的聯系

var myArray = ["value1", "value2", "value3"];

// 用Set構造器將Array轉換為Set
var mySet = new Set(myArray);

mySet.has("value1"); // returns true

// 用...(展開操作符)操作符將Set轉換為Array
console.log([...mySet]); // 與myArray完全一致

 

...擴展語句

擴展語法允許一個表達式在期望多個參數（用於函數調用）或多個元素（用於數組字面量）或多個變量（用於解構賦值）的位置擴展。

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];

arr1 = [...arr2, ...arr1]; 

console.log(arr1) // [3, 4, 5, 0, 1, 2]

 

應用一：Set對象數組去重

var arr=[3, 62, 3, 38, 20, 42, 14, 5, 38, 29, 42];
console.log(new Set(arr))
可以封裝一個函數

function uniqueArray(arr){
    return Array.from(new Set(arr));
}
用這個函數可以數組去重。

或者如下寫也可以，比較簡單的數組去重

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]