Promise、Proxy、Map、Set這些ES6新增的api無(wú)法用babel實(shí)現(xiàn)語(yǔ)法降級(jí)，需要使用到polyfill

Set

• 成員是唯一的，不能重復(fù)
• 有iterator接口，可迭代
• 具有iterator接口的所有類型，都能作為new Set()的參數(shù)，如類數(shù)組、數(shù)組
  

const myS = new Set() console.log(myS) myS.add(1) // 只能傳1個(gè)參數(shù) console.log(myS) myS.add(1) // 添加重復(fù)的則無(wú)效果,成員是唯一的 console.log(myS) console.log(new Set([1])) // 初始化傳入數(shù)組

• 對(duì)引用值的判斷依然是地址是否相同

console.log(new Set([NaN,NaN])) // 只會(huì)添加一個(gè)NaN const obj = {} const o2 = obj console.log(new Set([{}, {}])) // 不同 添加2個(gè) console.log(new Set([obj, o2])) // 引用相同 添加1個(gè)

原型屬性及方法

size屬性返回長(zhǎng)度

add方法返回set實(shí)例，鏈?zhǔn)秸{(diào)用

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不一樣，他的操作是實(shí)時(shí)的，即使在操作前打印，看到的也是全部操作執(zhí)行完的結(jié)果

遍歷方法 keys/values/entries

• 由于 Set 結(jié)構(gòu)沒有鍵名，只有鍵值（或者說(shuō)鍵名和鍵值是同一個(gè)值），所以keys方法和values方法的行為完全一致。

const myS = new Set([1, 2, 3]) console.log(myS.keys()) // 鍵名的迭代器 console.log(myS.values()) // 鍵值的迭代器 console.log(myS.entries()) // 鍵值對(duì)的迭代器 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實(shí)例本身也能遍歷

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轉(zhuǎn)數(shù)組/數(shù)組去重

• 用…展開，再放入數(shù)組

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]

和數(shù)組map方法結(jié)合使用

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結(jié)合

let set = new Set([1, 2, 3]); set = new Set(Array.from(set, val => val * 2)); // set的值是2, 4, 6

實(shí)現(xiàn)∩ ∪ 差集 filter has結(jié)合使用

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 相對(duì)于 b 的）差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

map

• 鍵可以是對(duì)象
  

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方法設(shè)置

• set方法設(shè)置鍵名key對(duì)應(yīng)的鍵值為value，然后返回整個(gè) Map 結(jié)構(gòu)。如果key已經(jīng)有值，則鍵值會(huì)被更新，否則就新生成該鍵。

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

• 作為構(gòu)造函數(shù)，Map 可以接受一個(gè)數(shù)組作為參數(shù)。該數(shù)組的成員是一個(gè)個(gè)表示鍵值對(duì)的數(shù)組。
• 鍵名相同時(shí)會(huì)覆蓋

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方法

• 刪除某個(gè)鍵，返回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方法返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前 Map 對(duì)象之中。

遍歷方法

Map 結(jié)構(gòu)原生提供三個(gè)遍歷器生成函數(shù)和一個(gè)遍歷方法。
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// 解構(gòu) for (let [key, value] of map.entries()) {console.log(key, value); }

Map轉(zhuǎn)為數(shù)組

• …可以將部署了迭代器接口的結(jié)構(gòu)轉(zhuǎn)換為數(shù)組

const map = new Map([['F', 'no'],['T', 'yes'], ]); console.log([...map]);

Map轉(zhuǎn)為對(duì)象

• 條件，鍵名為字符串

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)

對(duì)象轉(zhuǎn)為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)

總結(jié)

以上是生活随笔為你收集整理的ES6-15 map与set的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。