Promise、Proxy、Map、Set這些ES6新增的api無法用babel實現語法降級，需要使用到polyfill
Set
- 成員是唯一的，不能重復
- 有iterator接口，可迭代
- 具有iterator接口的所有類型，都能作為new Set()的參數，如類數組、數組
const myS = new Set()
console.log(myS)
myS.add(1) // 只能傳1個參數
console.log(myS)
myS.add(1) // 添加重復的則無效果,成員是唯一的
console.log(myS)
console.log(new Set([1])) // 初始化傳入數組
- 對引用值的判斷依然是地址是否相同
console.log(new Set([NaN,NaN])) // 只會添加一個NaN
const obj = {}
const o2 = obj
console.log(new Set([{}, {}])) // 不同 添加2個
console.log(new Set([obj, o2])) // 引用相同 添加1個
原型屬性及方法
size屬性返回長度
add方法返回set實例，鏈式調用
const myS = new Set()
myS.add(1).add(2)
console.log(myS)
delete方法 返回值是刪除與否
const myS = new Set([1, 2, 3])
console.log(myS.delete(1)) // true
console.log(myS, myS.size) // Set(2) {2, 3} 2
console.log(myS.delete(1)) // false
clear方法
const myS = new Set([1, 2, 3])
console.log(myS.clear()) // undefined
console.log(myS) // Set(0) {}
has方法 判斷是否有該值
const myS = new Set([1, {}, 3])
console.log(myS.has(1)) // true
console.log(myS.has(4)) // false
console.log(myS.has({})) // false
set和obj不一樣，他的操作是實時的，即使在操作前打印，看到的也是全部操作執行完的結果
遍歷方法 keys/values/entries
- 由于 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致。
const myS = new Set([1, 2, 3])
console.log(myS.keys()) // 鍵名的迭代器
console.log(myS.values()) // 鍵值的迭代器
console.log(myS.entries()) // 鍵值對的迭代器
for(let i of myS.keys()){console.log(i)
}
for(let i of myS.values()){console.log(i)
}
for(let i of myS.entries()){console.log(i)
}
- set實例本身也能遍歷
const myS = new Set([1, 2, 3])
for(let i of myS){console.log(i) // 1 2 3
}
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values) // true
console.log(Set.prototype[Symbol.iterator] === Set.prototype.keys) // true
forEach方法
const myS = new Set([1, 2, 3])
myS.forEach((val, key, set) => {console.log(val, key, set)
})
set轉數組/數組去重
- 用…展開，再放入數組
const myS = new Set([1, 2, 3])
console.log([...myS]) // [1, 2, 3]
console.log([...new Set([2, 2, 3, 4, 5])]) // [2, 3, 4, 5]
和數組map方法結合使用
const myS = new Set([1, 2, 3])
const myS2 = new Set([...myS].map(item => item * 2))
console.log(myS2) // Set(3) {2, 4, 6}
const arr = [1, 0, 1, 2]
console.log(new Set([...arr].map(parseInt))) // Set(3) {1, NaN, 2}
和Array.from結合
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6
實現∩ ∪ 差集 filter has結合使用
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}// （a 相對于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
map
- 鍵可以是對象
const m = {}
const x = {id:1}
const y = {id:2}
m[x] = "foo"
m[y] = "bar"
console.log(m[x]) // bar
console.log(m[y]) // bar
Map原型方法、屬性
set方法設置
- set方法設置鍵名key對應的鍵值為value，然后返回整個 Map 結構。如果key已經有值，則鍵值會被更新，否則就新生成該鍵。
const m = new Map()
const x = { id: 1 }
const y = { id: 2 }
m.set(x, 'foo').set(y, 'bar')
console.log(m)
console.log(m.get(x)) // foo
console.log(m.get(y)) // bar
- 作為構造函數，Map 可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。
- 鍵名相同時會覆蓋
const map = new Map([['name', '張三'],['title', 'Author']
]);map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"
let items = [['name', 'Lee'], ['title', 'Teacher']]
let map = new Map()
items.forEach(([key, value]) => {map.set(key, value)
})
console.log(map)
let map = new Map()
map.set(-0, 1)
console.log(map.get(+0)) // 1
map.set(NaN, 2)
console.log(map.get(NaN)) // 2
delete方法
- 刪除某個鍵，返回true。如果刪除失敗，返回false。
const m = new Map();
m.set(undefined, 'nah');
console.log(m.delete(undefined)) // true
console.log(m.delete(1)) // false
clear
- clear方法清除所有成員，沒有返回值。
has
- has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。
遍歷方法
Map 結構原生提供三個遍歷器生成函數和一個遍歷方法。
Map.prototype.keys()：返回鍵名的遍歷器。
Map.prototype.values()：返回鍵值的遍歷器。
Map.prototype.entries()：返回所有成員的遍歷器。
Map.prototype.forEach()：遍歷 Map 的所有成員。
const map = new Map([['F', 'no'],['T', 'yes'],
]);for (let item of map.entries()) {console.log(item);
}
// ["F", "no"]
// ["T", "yes"]
// 或者
for (let item of map) {console.log(item);
}
// ["F", "no"]
// ["T", "yes"]
console.log(map[Symbol.iterator] === map.entries) // true// 解構
for (let [key, value] of map.entries()) {console.log(key, value);
}
Map轉為數組
- …可以將部署了迭代器接口的結構轉換為數組
const map = new Map([['F', 'no'],['T', 'yes'],
]);
console.log([...map]);
Map轉為對象
- 條件，鍵名為字符串
let map = new Map()
map.set(true, 7).set('foo', ['abc'])
let obj = {}
for (let [key, value] of map) {obj[key] = value
}
console.log(obj)
對象轉為map
const obj = {foo: [1, 2],bar: 1
}
let map = new Map()
for (let k in obj) {map.set(k, obj[k])
}
console.log(map)
