ES6之Symbol和Map

Symbol

es6中新增的一種數據類型,表示獨一無二的值

基本數據類型: String Number Boolean null undefined Symbol

引用數據數據類型: Object

創建:

let s1 = Symbol()
typeof s1      // 'symbol'

注意:

1.Symbol不能使用new調用,原因在於symbol是一個原始類型的值,不是對象

2.Symbol函數接受一個字符串作爲參數,僅僅表示對Symbol的描述,主要是爲了在控制檯顯示,或者轉爲字符串的時候,比較容易區分

eg:

let s1 = Symbol()
let s2 = Symbol()
console.log(s1,s2).  //Symbol() Symbol()
let s3 = Symbol('js') 
let s4 = Symbol('html')
console.log(s3,s4) //Symbol(js) Symbol(html)
console.log(Symbol('html') === Symbol('html')) //false    參數僅僅是Symbol的描述,不代表其他意義

3.如果Symbol參數是一個對象,就會調用該對象的toString方法,將其轉爲字符串然後生成一個Symbol值

eg:

const obj = {
  toString(){
    return 'abc'
  }
}
console.log(Symbol(obj))   // Symbol(abc)
const obj = {
  name: 'aa'
}
console.log(Symbol(obj))   //Symbol([object object])

Symbol類型的轉換

1.轉換成字符串
String(symbol('haha'))
2.轉換成Boolean
console.log(!!Symbol()) //true
3.不能轉換成數字,不能進行任何運算
console.log(Symbol('haha') + 'hello') //報錯
4.作爲對象的屬性名(因爲每一個Symbol值都是不相等的,這意味着Symbol可以作爲標識符用於對象的)
let s = Symbol('s')
const data = {
  [s]: 'haha'
}
console.log(data)  //{Symbol(s): 'haha'}

注意:Symbol()作爲屬性名不能被for…in, for…of遍歷,也不能被Object.keys(),Object.getOwnPropertyNames()返回,但是它也不是私有屬性,可以通過Object.getOwnPropertySymbols方法獲得一個對象的所有的Symbol屬性名

eg:

let obj = {},
    foo = Symbol('foo')
Object.defineProperty(obj, foo, {
    value: 'footer'
})

for(let i in obj) {
    console.log(i)   //沒有返回值
}
console.log(Object.getOwnPropertyNames(obj))  // []
console.log(Object.getOwnPropertySymbols(obj))  [Symbol(foo)]
const data = {
  [Symbol()]: 123
}
console.log(data)     //{Symbol():123}
console.log(data[Symbol()])  //undefined
console.log(Object.getOwnPropertySymbols(data))   //[Symbol()]
console.log(Object.getOwnPropertySymbols(data)[0])    // 123

數據結構Set

類似於數組,成員的值都是唯一的,沒有重複的值。

1.如何創建一個Set

const set = new Set()

2.Set類的屬性

var set = new Set([1,2,3,4])

set.size // 4

3.Set類的方法

1)set.add(value):添加一個數據,返回Set結構本身

​ set.add(‘a’).add(‘b’).add(‘c’). //添加多個值

​ 或者 new Set([1,2,3]) 直接當參數傳進

注意:set不會對所存儲值進行強制類型轉換

​ set.add(5)

​ set.add(“5”)

Object.is(new Set().add(5), new Set().add('5'))   //false
2)set.delete(value):刪除指定數據,返回布爾值,表示是否刪除成功

​ set.delete(‘a’) // true

​ set.delete(‘a’). // false

3)set.has(value):判斷該值是否是Set成員,返回一個布爾值

​ console.log(set.has(‘a’)). //false

​ console.log(set.has(‘b’)). //true

4)set.clear():清除所有數據,並沒有返回值
5)set.keys():返回鍵名的遍歷器

​ const s = new Set([1,2,4])

​ console.log(s.keys())

6)set.values():返回值的遍歷器

​ console.log(s.values())

7 )set.entries():返回鍵值對的遍歷器

​ console.log(set.entries())

8)set.forEach():使用回調函數遍歷每個成員
var set = new Set([1,2,4])
set.forEach((value, key, ownerSet) = > {    
     console.log(`${key}=${value}`)    
     console.log(ownerSet ===  set).  //true
})

將set轉換成數組:

const set = new Set([1,2,4])

[…set]

Array.from(set)

用途:

a.數組去重

const arr = [{},1,2,3,1,4,'a',3]
console.log([...new Set(arr)])   //[{},1,2,3,4,'a']

b.合併去重

 let a = new Set([1,2,3]);
 let b = new Set([3,2,5]);
 let union = new Set([...a,...b]);
 console.log([...union]);    // [1,2,3,5]

數據結構Map

是一種存儲着許多鍵值對的有序列表,鍵和值支持所有數據類型

以前:object只能用字符串當做鍵

eg:

let data1 = {a: 1},    
    data2 = {b: 2}, 
    obj= {}
    obj[data1] = 1  
    obj[data2] = 2
    console.log(obj)    // {[object Object]: 2} 

而map可以解決以上問題

var map = new Map().set({}, 1).set({}, 2)
console.log(map)  // {Object{}=>1, Object{}=>2}

1.創建Map

const map = new Map()

在創建的時候可以初始化參數,傳的是二維數組,裏面的數組是鍵值對的形式

const map = new Map([
	["a", 1],    
    ["b", 2]
])   

console.log(map).  // {"a" => 1, "b" => 2 }

2.Map屬性

map.size:當前數據結構中鍵值對的個數

3.Map的方法

1)set(key, value):設置鍵名key對應的鍵值爲value,返回整個Map結構,如果key已經有值,則鍵值會被更新,否則就新生成該鍵值對

eg:

const map = new Map()
map.set('a',1).set('b',2).set('b',3)       /*鏈式寫法*/
console.log(map).  //{"a" => 1, "b" => 3}
2.get(key):get方法讀取key對應的鍵值,如果找不到key,返回undefined
console.log(map.get('a'))   //1
console.log(map.get('c'))   //undefined
3.delete(key):刪除某個鍵,刪除成功返回true,否則返回false
console.log(map.delete('a'))   // true
console.log(map.delete('d'))   // false
4.has(key):方法返回一個布爾值,表示某個鍵是否在當前Map對象之中
console.log(map.has('a'))   // false
console.log(map.has('b'))   // true
5.clear(): 清除所有數據,沒有返回值
map.clear()
map.size     //0
6)keys():返回鍵名的遍歷器
7)values():返回值的遍歷器
8)entries():返回鍵值對的遍歷器
9)forEach():使用回調函數遍歷每個成員

使用for…of遍歷

const m = new Map()
m.set('a',1).set('b',2).set('c',3)
for(let [key, value] of map){
   consoel.log(key,value)    
}
map轉換成數組:

[…map]

Array.from(map)

map轉換成對象:
function strMapTObj(strMap){
	let obj = Object.create(null)
	for (let [k, v] of strMap){
      obj[k] = v
	}
	return obj
}
const map = new Map().set('yes', true).set('no', false)
strMapTObj(map)    // {yes: true, no: false}

對象轉換成map:

function objToStrMap(obj) {
  let strMap = new Map()
  for (let k of Object.keys(obj)){
    strMap.set(k, obj[k])
  }
  return strMap
}
objToStrMap({yes: true, no: false})  // Map('yes'=> true, 'no'=>false)

Map在使用過程中一些注意事項

const map = new Map()

map.set(NaN, 10).set(NaN, 100). //{NaN => 100}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章