JavaScript学习指南

主题

集合和映射 ​

集合 (Set) ​

集合是元素的集合。集合只能包含唯一的元素。 让我们看看如何在下面的部分中创建一个集合。

创建空集合 ​

js
const companies = new Set()
console.log(companies)
sh
Set(0) {}

从数组创建集合 ​

js
const languages = [
  'English',
  'Finnish',
  'English',
  'French',
  'Spanish',
  'English',
  'French',
]

const setOfLanguages = new Set(languages)
console.log(setOfLanguages)
sh
Set(4) {"English", "Finnish", "French", "Spanish"}

集合是一个可迭代对象，我们可以遍历每个元素。

js
const languages = [
  'English',
  'Finnish',
  'English',
  'French',
  'Spanish',
  'English',
  'French',
]

const setOfLanguages = new Set(languages)

for (const language of setOfLanguages) {
  console.log(language)
}
sh
  English
  Finnish
  French
  Spanish

向集合添加元素 ​

js
const companies = new Set() // 创建空集合
console.log(companies.size) // 0

companies.add('Google') // 向集合添加元素
companies.add('Facebook')
companies.add('Amazon')
companies.add('Oracle')
companies.add('Microsoft')
console.log(companies.size) // 集合中有5个元素
console.log(companies)
sh
Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"}

我们也可以使用循环向集合添加元素。

js
const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft']
setOfCompanies = new Set()
for (const company of companies) {
  setOfCompanies.add(company)
}
sh
Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"}

从集合删除元素 ​

我们可以使用 delete 方法从集合中删除元素。

js
console.log(companies.delete('Google'))
console.log(companies.size) // 集合中剩余4个元素

检查集合中的元素 ​

has 方法可以帮助我们知道集合中是否存在某个元素。

js
console.log(companies.has('Apple')) // false
console.log(companies.has('Facebook')) // true

清空集合 ​

它会从集合中移除所有元素。

js
companies.clear()
console.log(companies)
sh
Set(0) {}

请看下面的示例来学习如何使用集合。

js
const languages = [
  'English',
  'Finnish',
  'English',
  'French',
  'Spanish',
  'English',
  'French',
]
const langSet = new Set(languages)
console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"}
console.log(langSet.size) // 4

const counts = []
const count = {}

for (const l of langSet) {
  const filteredLang = languages.filter((lng) => lng === l)
  console.log(filteredLang) // ["English", "English", "English"]
  counts.push({ lang: l, count: filteredLang.length })
}
console.log(counts)
js
[
  { lang: 'English', count: 3 },
  { lang: 'Finnish', count: 1 },
  { lang: 'French', count: 2 },
  { lang: 'Spanish', count: 1 },
]

集合的其他用例。例如，计算数组中的唯一项。

js
const numbers = [5, 3, 2, 5, 5, 9, 4, 5]
const setOfNumbers = new Set(numbers)

console.log(setOfNumbers)
sh
Set(5) {5, 3, 2, 9, 4}

集合的并集 ​

要找到两个集合的并集，可以使用扩展运算符。让我们找到集合 A 和集合 B 的并集 (A ∪ B)

js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]
let c = [...a, ...b]

let A = new Set(a)
let B = new Set(b)
let C = new Set(c)

console.log(C)
sh
Set(6) {1, 2, 3, 4, 5,6}

集合的交集 ​

要找到两个集合的交集，可以使用 filter。让我们找到集合 A 和集合 B 的交集 (A ∩ B)

js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]

let A = new Set(a)
let B = new Set(b)

let c = a.filter((num) => B.has(num))
let C = new Set(c)

console.log(C)
sh
Set(3) {3, 4, 5}

集合的差集 ​

要找到两个集合的差集，可以使用 filter。让我们找到集合 A 和集合 B 的差集 (A \ B)

js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]

let A = new Set(a)
let B = new Set(b)

let c = a.filter((num) => !B.has(num))
let C = new Set(c)

console.log(C)
sh
Set(2) {1, 2}

映射 (Map) ​

创建空映射 ​

js
const map = new Map()
console.log(map)
sh
Map(0) {}

从数组创建映射 ​

js
countries = [
  ['Finland', 'Helsinki'],
  ['Sweden', 'Stockholm'],
  ['Norway', 'Oslo'],
]
const map = new Map(countries)
console.log(map)
console.log(map.size)
sh
Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"}
3

向映射添加值 ​

js
const countriesMap = new Map()
console.log(countriesMap.size) // 0
countriesMap.set('Finland', 'Helsinki')
countriesMap.set('Sweden', 'Stockholm')
countriesMap.set('Norway', 'Oslo')
console.log(countriesMap)
console.log(countriesMap.size)
sh
Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"}
3

从映射获取值 ​

js
console.log(countriesMap.get('Finland'))
sh
Helsinki

检查映射中的键 ​

使用 has 方法检查映射中是否存在键。它返回 true 或 false。

js
console.log(countriesMap.has('Finland'))
sh
true

使用循环从映射获取所有值

js
for (const country of countriesMap) {
  console.log(country)
}
sh
(2) ["Finland", "Helsinki"]
(2) ["Sweden", "Stockholm"]
(2) ["Norway", "Oslo"]
js
for (const [country, city] of countriesMap){
 console.log(country, city)
}
sh
Finland Helsinki
Sweden Stockholm
Norway Oslo

🌕 你建立了一个重要的里程碑，你势不可挡。继续前进！你刚刚完成了第10天的挑战，在通往伟大的道路上又前进了10步。现在为你的大脑和肌肉做一些练习。

练习 ​

练习：级别1 ​

js
const a = [4, 5, 8, 9]
const b = [3, 4, 5, 7]
const countries = ['Finland', 'Sweden', 'Norway']
  1. 创建一个空集合
  2. 使用循环创建一个包含0到10的集合
  3. 从集合中移除一个元素
  4. 清空集合
  5. 从数组创建一个包含5个字符串元素的集合
  6. 创建一个国家和国家字符数的映射

练习：级别2 ​

  1. 找到 a 和 b 的并集
  2. 找到 a 和 b 的交集
  3. 找到 a 与 b 的差集

练习：级别3 ​

  1. 在国家对象文件中有多少种语言。

  2. *** 使用国家数据找到10种最常用的语言：

js
   // 你的输出应该像这样
   console.log(mostSpokenLanguages(countries, 10))
   [
     { English: 91 },
     { French: 45 },
     { Arabic: 25 },
     { Spanish: 24 },
     { Russian: 9 },
     { Portuguese: 9 },
     { Dutch: 8 },
     { German: 7 },
     { Chinese: 5 },
     { Swahili: 4 },
     { Serbian: 4 }
   ]

  // 你的输出应该像这样
  console.log(mostSpokenLanguages(countries, 3))
  [
  {English:91},
  {French:45},
  {Arabic:25}
  ]

🎉 恭喜！🎉

Copyright © 2025 e2ways.com