ES6引入了一個新的資料結構型別:Set，而Set與Array的結構是很類似的,且Set和Array可以相互進行轉換，
特點：只有屬性值，成員值唯一（不重復），
回憶陣列：
使用建構式創建陣列
var arr = new Array(); //創建一個空陣列
var arr1 = new Array(10) //創建一個length為10的陣列
var arr2 = new Array("red","blue","yellow") //創建了一個包含3個字串的陣列
arr.push(6) //向arr陣列中添加一個數字6，該方法回傳陣列長度，
console.log(arr.length) //回傳陣列長度
創建set實體：
創建set的實體同樣需要使用Set建構式，并且傳入的引數必須只能是可迭代物件（帶Symbol(Symbol.iterator)屬性的物件）例如陣列，字串，在ES6...運算子中提及過,回傳給你一個去重后的集合，
let oS = new Set(); //創建一個空set
let oS1 = new Set(['a',1,8,6,1,true]); //Set(5) {"a", 1, 8, 6, true}
let oS2 = new Set('abcdeab'); //Set(5) {"a", "b", "c", "d", "e"}
在Es5中實作去重需要我們手寫一個方法，
var o = {name:'zwq'} var arr = [1,2,3,[1,2],[2,3],4,[1,2],5,o,1,2,o,9,{name:'hehe'},3,{name:'haha'},6]; var obj = {}; var newarr = []; //去重后的陣列，for(var i = 0; i < arr.length; i++){
if(!obj[arr[i]]){
newarr.push(arr[i]);
obj[arr[i]] = true;
}
}
consoel.log(newarr);
利用物件屬性不重復我們可以實作陣列的去重，但是我們發現手寫的陣列去重是不能實作物件去重的，
obj[{name:'z'}] = 5
console.log(obj)
{[object Object]: 5}
var o = {name:'zwq',age:18}
obj.ooo = 100
obj
{2,3: 5, [object Object]: 5, ooo: 100}
當以物件直接作為物件的屬性時，由于物件的屬性時字串，他會自己呼叫toString（）方法，而物件{}[toString()]回傳的是這個["[object Undefined]"]，不過是可以處理陣列的，因為陣列[2,3][toString()]回傳的是"2,3",所以是可以去重的，
使用set去重就可以實作物件的去重，并且直接呼叫就可以回傳去重后的資料集合，但是set無數值名，當使用delete方法時，物件要用變數保存起來，否則無法洗掉，
var oS = new Set(arr);
console.log([...oS]);
set的方法
添加
let oS = new Set([1]);
oS.add(2);
oS.add([1,2]);
oS.add(true);
console.log(oS); //Set(4) {1, 2, Array(2), true}
洗掉
oS.delete(2);
console.log(oS); //Set(3) {1, Array(2), true}
//洗掉陣列，陣列要提前用變數保存起來，否則直接oS.delete([1,2])是刪不掉的，因為每一個陣列都是不一樣的，
清空整個set集合
oS.clear();
console.log(oS); //Set(0) {}
檢測set集合是否存在某個值
oS.has(true) //true
//同樣，在檢測陣列物件是都要用變數保存起來，要不然是找不到他的參考的，
由于set集合沒有屬性名，只有屬性值，因此如果我們行操作某個值可以遍set集合，
遍歷set集合，
oS.forEach(val=>{
console.log(val);
})
也可以使用ES6新增的for of 遍歷，但這個遍歷必須是一個可迭代物件，也就是說這個for of可以遍歷set map 陣列 字串，但是不可以遍歷物件，因為物件不是可迭代物件，
for(let prop of oS){
console.log(prop); //1 [1,2] true
}
for(let prop of [1,2]){
console.log(prop); // 1 2
}
for(let prop of "dsfdf"){
console.log(prop); // d s f d f
}
set集合可以轉換成陣列，方法一使用ES6給Array擴展到的方法form
Array.form()引數同樣必須是可迭代物件，回傳一個陣列，
let arr = [1,2,4,1,3];
let Ab = new Set(arr);
console.log(Array.from (Ab)); //[1,2,4,3]
console.log(Array.from('1235')); //["1","2","3","5"]
方法二：使用...運算子，因為...運算子可以展開可迭代物件
console.log([...Ab]); //[1,2,4,3];
利用set使用陣列的并集，交集，差集
并集
let arr1 = [1, 2, 3, 2, 3];
let arr2 = [3, 2, 4, 4, 5];
// 并集
let newArr = [...arr1,...arr2];
let oS = new Set(newArr);
console.log(oS); //Set(5) {1, 2, 3, 4, 5}
交集
let set1 = new Set(arr1);
let set2 = new Set(arr2)
let newArr = [...set1].filter(ele => set2.has(ele)) //使用陣列的過濾方法filter
console.log(newArr); [2,3]
差集
let set1 = new Set(arr1);
let set2 = new Set(arr2)
let newArr1 = [...set1].filter(ele => {!set2.has(ele))
let newArr2 = [...set2].filter(ele => {!set1.has(ele))
let newArr = [...newArr1,...newArr2];
console.log(newArr); //[1,4,5]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170402.html
標籤：JavaScript
下一篇：SVG撐滿頁面