ES6學習之 -- Set數據結構

wawor4827 發布于2019-08-21 18:34 / 2771人閱讀

摘要：類似于數組，但是中不存在重復元素。可以接受一個數組或者其他具有接口的數據結構作為參數從上面的代碼可以看出有去重的功能。去重還有另一個方法將數據結構的數據轉換成數組。清除實例的指定成員。返回一個布爾值，表示某個值是否在實例之中。

Set

Set類似于數組，但是Set中不存在重復元素。
Set可以接受一個數組（或者其他具有itarable接口的數據結構）作為參數

const set = new Set([1,1,2,3,4,5,4,5]);
console.log([...set]);//[1, 2, 3, 4, 5]

從上面的代碼可以看出Set有去重的功能。[...new Set(arr)]
去重還有另一個方法,Array.from將Set數據結構的數據轉換成數組。

function removelArr(arr) {
    return Array.from(new Set(arr));
}
removelArr([1, 1, 2, 3, 2, "1"]);//[1, 2, 3, "1"]
或者
[...new Set([1, 1, 2, 3, 2, "1"])];//[1, 2, 3, "1"]

Set加入值的時候不會發生類型轉變

const set = new Set([1,"1"]);
console.log([...set]);//[1, "1"]

Set內部判斷兩個值是否相同使用了Object.is(a, b)方法，這個方法與嚴格等于的不同之處在于NaN，Object.is(NaN, NaN)返回的是true。

let a = NaN;
let b = NaN;
let set = new Set();
set.add(a);
set.add(a);
console.log([...set]);//[NaN]

捎帶提一下兩個對象的總是不相等的，這就不用多說了吧，內存地址不同。。。

let obj1 = {};
let obj2 = {};
let set = new Set();
set.add(obj1);
set.add(obj2);
console.log([...set]);//[{}, {}]

Set的屬性

size：獲取成員個數

Set的方法

add(value)：增加一個成員，返回值為set結構本身

delete(value)：刪除某個成員，返回值是一個布爾值，是否刪除成功

clear()：清空所有成員，無返回值

has(value)：判斷是否有某個成員，返回一個布爾值，是否存在某個元素

let set = new Set();
set.add(1).add(2).add(2).add("1");
set.size;//3
set.delete("1");//true
set.size;//2
set.has(2);//true
set.clear();
set.size;//0

Set的遍歷操作

keys()：返回鍵名的遍歷器

let set = new Set([1, 1, 2, 3, 2, "1"]);
//因為keys返回的是遍歷器，所以可以使用`for...of`，數組沒有鍵名只有鍵值，所以keys和values返回的是一致的
for(let item of set.keys()){
    console.log(item);// 1 2 3 "1"
}

values()：返回值名的遍歷器

let set = new Set([1, 1, 2, 3, 2, "1"]);
//因為values返回的是遍歷器，所以可以使用`for...of`
for(let item of set.values()){
    console.log(item);// 1 2 3 "1"
}

entries()：返回鍵值對的遍歷器

//entries方法返回的遍歷器，同時包括鍵名和鍵值
let set = new Set([1, 1, 2, 3, 2, "1"]);
//因為values返回的是遍歷器，所以可以使用`for...of`
for(let item of set.entries()){
    console.log(item);// [1, 1] [2, 2] [3, 3] ["1", "1"]
}

forEach()：使用回調函數遍歷每個成員

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + " : " + value))
// 1 : 1
// 4 : 4
// 9 : 9

Set 結構的實例默認可遍歷，它的默認遍歷器生成函數就是它的values方法。

Set.prototype[Symbol.iterator] === Set.prototype.values
//true

這意味著我們可以直接遍歷Set

let set = new Set([1, 4, 9]);
for(let item of set) {
    console.log(item);//1 4 9
}

WeakSet

注意點：

WeakSet的成員只能是對象

WeakSet的成員是弱引用，隨時都可能消失，所以無法遍歷也就無法獲取成員數量

WeakSet的方法

add(value)向 WeakSet 實例添加一個新成員。

delete(value)清除 WeakSet 實例的指定成員。

has(value)返回一個布爾值，表示某個值是否在 WeakSet 實例之中。

WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文檔移除時，會引發內存泄漏。

下面是 WeakSet 的另一個例子。

const foos = new WeakSet()
class Foo {
  constructor() {
    foos.add(this)
  }
  method () {
    if (!foos.has(this)) {
      throw new TypeError("Foo.prototype.method 只能在Foo的實例上調用！");
    }
  }
}

method只能通過Foo的實例調用不然就會拋出異常，當刪除實例的時候，不用操作foos也不會引發內存泄露

GPU云服務器云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90592.html

es6學習之map和set

摘要：和定義一組鍵值對的集合它是一組鍵值對的數據結構，由于之前的鍵必須是字符串。 Map和Set Map 定義：一組鍵值對的集合它是一組鍵值對的數據結構，由于之前javascript的鍵（key）必須是字符串。為了使鍵可以是多種類型的于是在最新的es6中引入了map這種數據結構，這樣可以加快查詢速度，類似于查字典方法和屬性 var m = map() //空map m.set(學生年齡,...

lvzishen 2019-08-23 16:48 評論0 收藏0
ES6學習之 -- 解構（使數據訪問更便捷）

摘要：數組的解構賦值規定允許按照一定模式，從數組和對象中提取值對變量進行賦值，我們稱之為解構。的規則是，只要有可能導致解構的歧義，就不得使用圓括號。數組的解構賦值 ES6規定：允許按照一定模式，從數組和對象中提取值對變量進行賦值，我們稱之為解構。以前賦值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允許以下這種做法 let [a, b, c] = ...

mrcode 2019-08-21 18:32 評論0 收藏0
【搶先領】《React 學習之道》我們翻譯了一本最簡單，且最實用的 React 實戰教程……

摘要：學習之道簡體中文版通往實戰大師之旅掌握最簡單，且最實用的教程。前言學習之道這本書使用路線圖中的精華部分用于傳授，并將其融入一個獨具吸引力的真實世界的具體代碼實現。完美展現了的優雅。膜拜的學習之道是必讀的一本書。《React 學習之道》The Road to learn React (簡體中文版) 通往 React 實戰大師之旅：掌握 React 最簡單，且最實用的教程。 showIm...

oneasp 2019-08-22 14:03 評論0 收藏0
es6學習之let和const命令

摘要：和命令命令是在它所在的代碼塊有效，它屬于塊級作用域，新增。只有全局作用域和函數作用域。 let和const命令 let命令是在它所在的代碼塊有效，它屬于塊級作用域，es6新增。es5只有全局作用域和函數作用域。let命令存在暫時性死區（TDZ），即在申明前使用就會報錯,不存在變量提升 console.log(a); // 報錯 let a = 111; ==let不允許在相同作用域中，...

DrizzleX 2019-08-23 16:49 評論0 收藏0
JS學習之Object

摘要：文中的多為構造函數原型對象屬性為函數的專屬屬性，表示函數的原型對象。關于各種數據類型的屬性的展示對象的構造器函數該屬性指向創建該對象原型的構造函數。對對象的凍結狀態的設置和判斷，前者讓凍結對象，后者判斷對象是否被凍結。前言上篇文章介紹了JS的對象,本文將介紹Object這個基類，主要介紹其屬性和方法（其實這些在MDN里都有^_^,點擊這里可以直通MDN）。好了廢話不多說了，直接開始...

qujian 2019-08-20 13:42 評論0 收藏0