這篇文章主要介紹“JavaScript字典與集合應用實例分析”，在日常操作中，相信很多人在JavaScript字典與集合應用實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript字典與集合應用實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

康縣網(wǎng)站建設公司創(chuàng)新互聯(lián),康縣網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為康縣超過千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的康縣做網(wǎng)站的公司定做！

字典

什么是字典

說到字典，第一時間想到的應該就是新華字典，實際上，這跟編程中的字典類似，兩者都有一個特點，就是一一對應（yi yi dui ying），或者說是映射。

字典通常以**【鍵，值】** 對的形成存儲，因為是以鍵值對的形式存儲，更方便通過key來獲取value

比如存儲用戶信息：

{
  'username': '一碗周',
  'age': 18
}

JavaScript中的字典

在JavaScript中，對象好像擁有字典的所有特點，但是在ES6中新增Map，用來表示字典，這里的map不是翻譯成地圖，而是映射。

示例代碼如下：

// 創(chuàng)建一個字典
const map = new Map()

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

字典的應用

在學習鏈表的時候我們做了一個算法題，是力扣中題號為20的一道題，它的題目：有效的括號，題目大意就是判斷給定字符串中的括號是否匹配，匹配返回true，否則返回false。

解題思路如下：

• 判斷字符串的長度是否為偶數(shù)，不為偶數(shù)直接返回false，因為括號都是成對出現(xiàn)的；

• 新建一個棧；

• 遍歷字符串，遍歷到每一項時如果時左括號，將其壓入棧；如果是右括號，與棧頂對比，如果相匹配則出棧，不匹配則返回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 === '(' || c === '[' || c==='{') {
            stack.push(c)
        } else {
            const t = stack[stack.length - 1] // 獲取棧頂元素
            if (
                (t === '(' && c === ')') ||
                (t === '[' && c === ']') ||
                (t === '{' && c === '}') 
            ) {
                stack.pop()
            } else {
                return false
            }
        }
    }
    // 如果為0表示全部匹配，有剩余則表示不匹配
    return stack.length === 0
};

在上面的代碼中，條件判斷中的判斷條件非常的長，這時我們就可以利用字典來優(yōu)化這個寫法，

實現(xiàn)代碼如下：

/**
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    // 1. 判斷字符串的長度是否為偶數(shù)，不為偶數(shù)直接返回false，因為括號都是成對出現(xiàn)的；
    if (s.length % 2 !== 0) return false
    const stack = []
    const map = new Map() // 將所有括號的對應關系存儲在字典中
    map.set('(', ')')
    map.set('[', ']')
    map.set('{', '}')
    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
};

在這個代碼中，我們優(yōu)化了if語句中的判斷條件。

集合

什么是集合

集合是由一組無序且不重復的元素構成。我們可以將集合看成一種特殊的數(shù)組，它的特殊之處就是無序且不重復，這也就意味著我們不能通過下標的方式進行訪問，而且集合中不會出現(xiàn)重復的元素；

JS中的集合

在JavaScript中提供了集合這個數(shù)據(jù)結(jié)構，即Set，MDN中的描述如下：

Set對象是值的集合，你可以按照插入的順序迭代它的元素。Set中的元素只會出現(xiàn)一次，即Set中的元素是唯一的。

集合中的操作

在集合中主要有以下場景操作：

• 添加元素到集合中；

• 在集合中刪除某元素；

• 判斷元素是否在集合中；

• 清空集合；

• 求交集、并集、差集；

除了最后一種Set對象就為我們提供了對應的方法，示例代碼如下：

const arr = [1, 2, 3, 2, 3, 4, 5]
// 利用set實現(xiàn)去重
const set = new Set(arr) // [1, 2, 3, 4, 5]

// 往集合中添加元素
set.add(3) // [1, 2, 3, 4, 5] 添加失敗，集合中不允許出現(xiàn)重復元素
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字典與集合應用實例分析”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章標題：JavaScript字典與集合應用實例分析
網(wǎng)站地址：http://chinadenli.net/article42/ggpsec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、域名注冊、移動網(wǎng)站建設、網(wǎng)站內(nèi)鏈、ChatGPT、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)