首頁 > web前端 > js教程 > JavaScript字典與集合(總結分享)

JavaScript字典與集合(總結分享)

WBOY
發布: 2022-07-28 15:37:47
轉載
2508 人瀏覽過

本篇文章為大家帶來了關於javascript的相關知識,主要介紹了JavaScript字典與集合詳解,集合是由一組無序且不重複的元素構成。我們可以將集合看成一種特殊的數組,它的特殊之處就是無序且不重複,這也意味著我們不能透過下標的方式進行訪問,而且集合中不會出現重複的元素。

JavaScript字典與集合(總結分享)

【相關推薦:javascript影片教學web前端

##字典

什麼是字典

說到字典,第一時間想到的應該就是新華字典,實際上,這跟程式設計中的字典類似,兩者都有一個特點,就是

一一對應(yi yi dui ying),或者說是映射

字典通常以**【鍵,值】** 對的形成存儲,因為是以鍵值對的形式存儲,更方便通過

key來獲取value

例如儲存使用者資訊:

{
  'username': '一碗周',
  'age': 18
}
登入後複製

#JavaScript中的字典

在JavaScript中,物件似乎擁有字典的所有特點,但是在ES6中新增

Map,用來表示字典,這裡的map不是翻譯成地圖,而是映射。

範例程式碼如下:

// 创建一个字典
const map = new Map()

// 往字典中存储信息
map.set('username', '一碗周')
map.set('age', 18)
console.log(map) // Map(2) { 'username' => '一碗周', 'age' => 18 }
登入後複製

字典的應用

在學習鍊錶的時候我們做了一個演算法題,是力扣中題號為20的一題,它的題目:

有效的括號,題目大意就是判斷給定字串中的括號是否匹配,匹配返回true#,否則回傳false

解題想法如下:

    判斷字串的長度是否為偶數,不直接回傳
  • false,因為括號都是成對出現的;
  • 新建一個棧;
  • 遍歷字串,遍歷到每一項時如果時左括號,將其壓入棧;如果是右括號,與棧頂對比,如果相符則出棧,不符則回傳
  • false

我們原本的解法:

/**
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    if (s.length % 2 !== 0) return false
    const stack = []
    for(let i = 0; i<s.length; i++) {
        const c = s[i] // 记录当前项
        if (c === &#39;(&#39; || c === &#39;[&#39; || c===&#39;{&#39;) {
            stack.push(c)
        } else {
            const t = stack[stack.length - 1] // 获取栈顶元素
            if (
                (t === &#39;(&#39; && c === &#39;)&#39;) ||
                (t === &#39;[&#39; && c === &#39;]&#39;) ||
                (t === &#39;{&#39; && c === &#39;}&#39;) 
            ) {
                stack.pop()
            } else {
                return false
            }
        }
    }
    // 如果为0表示全部匹配,有剩余则表示不匹配
    return stack.length === 0
};
登入後複製

在上面的程式碼中,條件判斷中的判斷條件非常的長,這時我們就可以利用字典來最佳化這個寫法,

實作程式碼如下:

/**
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    // 1. 判断字符串的长度是否为偶数,不为偶数直接返回false,因为括号都是成对出现的;
    if (s.length % 2 !== 0) return false
    const stack = []
    const map = new Map() // 将所有括号的对应关系存储在字典中
    map.set(&#39;(&#39;, &#39;)&#39;)
    map.set(&#39;[&#39;, &#39;]&#39;)
    map.set(&#39;{&#39;, &#39;}&#39;)
    for(let i = 0; i<s.length; i++) {
        const c = s[i] // 记录当前项
        // 判断是否存在 key 也就是左括号,如果存储,将左括号存储在栈中
        if (map.has(c)) {
            stack.push(c)
        } else {
            const t = stack[stack.length - 1] // 获取栈顶元素
            if (map.get(t) === c) { // 获取最后一个左括号,判断是否与右括号匹配
                stack.pop() // 出栈
            } else {
                return false
            }
        }
    }
    // 如果为0表示全部匹配,有剩余则表示不匹配
    return stack.length === 0
};
登入後複製

在這個程式碼中,我們優化了

if語句中的判斷條件。

集合

什麼是集合

#集合是由一組

無序且不重複#的元素構成。我們可以將集合看成一種特殊的數組,它的特殊之處就是無序且不重複,這也就意味著我們不能透過下標的方式進行訪問,而且集合中不會出現重複的元素;

JS中的集合

在JavaScript中提供了集合這個資料結構,即

SetMDN中的描述如下:

Set物件是值的集合,你可以按照插入的順序迭代它的元素。 Set中的元素只會在出現一次,也就是Set中的元素是唯一的。

集合中的運算

在集合中主要有下列場景運算:

##新增元素到集合中;
  • 在集合中刪除某元素;
  • 判斷元素是否在集合中;
  • 清空集合;
  • 求交集、並集、差集;
  • 除了最後一種
Set

物件就為我們提供了對應的方法,範例程式碼如下:

const arr = [1, 2, 3, 2, 3, 4, 5]
// 利用set实现去重
const set = new Set(arr) // [1, 2, 3, 4, 5]

// 往集合中添加元素
set.add(3) // [1, 2, 3, 4, 5] 添加失败,集合中不允许出现重复元素
set.add(6) // [1, 2, 3, 4, 5, 6]

// 判断元素是否在集合中
set.has(2) // true
set.has(7) // false

// 删除集合中的元素
set.delete(1) // [2, 3, 4, 5, 6]

// 清空集合
set.clear()
登入後複製
交集、並集、差集的封裝

首先我們需要了解什麼交集、並集、差集。

    並集:
  • 對於給定的兩個集合,傳回一個包含兩個集合中所有元素的新集合
  • 交集:
  • 對於給定的兩個集合,傳回一個包含兩個集合中共有元素的新集合
  • 差集:
  • 對於給定的兩個集合,傳回一個包含所有存在於第一個集合且不存在於第二個集合的元素的新集合
  • 下面這個圖更好的解釋了什麼是交集、並集、差集。

封裝程式碼如下:

// 求两个集合的并集
export function union(setA, setB) {
  let _union = new Set(setA)
  for (let elem of setB) {
    _union.add(elem) // 因为集合中不存在重复元素
  }
  return _union
}

// 求两个集合的交集
export function intersection(setA, setB) {
  let _intersection = new Set()
  for (let elem of setB) {
    if (setA.has(elem)) {
      _intersection.add(elem)
    }
  }
  return _intersection
}
// 求两个集合的差集
export function difference(setA, setB) {
  let _difference = new Set(setA)
  for (let elem of setB) {
    _difference.delete(elem)
  }
  return _difference
}
登入後複製
封裝的這三個方法全部利用了集合不能重複的特性。

【相關推薦:

javascript影片教學

web前端

以上是JavaScript字典與集合(總結分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板