【前端八股文】JavaScript系列：Set、Map、String常用属性方法

本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_优快云博客-leecode题解,ACM题目讲解,代码随想录领域博主

Set

概念

Set对象允许我们存储任何类型的唯一值，无论是原始值还是对象引用。

let mySet=new Set();

唯一值，即不重复。

与arr的比较

JavaScript Set 的用法与理解_js set使用_暮春风的博客-优快云博客

• 查找快：O(1)，而Array是O(n)
• 删除不需要知道索引

属性和方法

常规操作

操作演示：大前端JS篇之搞懂【Set】 - 要爱学习鸭 - 博客园 (cnblogs.com)

遍历操作

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员
• 支持for…of

注意：

• Set的遍历顺序就是插入顺序，利用这个特性可以储存一些需要按顺序调用的函数
• keys方法、values方法、entries方法返回的都是遍历器对象
• Set不存在键名，只有键值，也可以认为键名和键值是同一个，所以keys和values返回的值是一样的

let s = new Set(['a', 'b', 'b', 1, 2])

// 遍历key
for (let key of s.keys()) {
    console.log(key)
    // a b 1 2
}

// 遍历value
for (let value of s.values()) {
    console.log(value)
    // a b 1 2
}

// 遍历键值对
for (let entry of s.entries()) {
    console.log(entry)
    // [ 'a', 'a' ]
    // [ 'b', 'b' ]
    // [ 1, 1 ]
    // [ 2, 2 ]
}

// forEach
s.forEach(function (value, key, s) {
    // 参数：value、key、set本身
    console.log('value', value, 'key', key, 's', s);
    // value a key a s Set(4) { 'a', 'b', 1, 2 }
    // value b key b s Set(4) { 'a', 'b', 1, 2 }
    // value 1 key 1 s Set(4) { 'a', 'b', 1, 2 }
    // value 2 key 2 s Set(4) { 'a', 'b', 1, 2 }
})

并集、交集、差集

并集

新Set+解构

let a = new Set([1, 2, 4])
let b = new Set([2, 4, 3])

// 并集
let union = new Set([...a, ...b]);
console.log(union)//Set(4) { 1, 2, 4, 3 }

交集

filter

let a = new Set([1, 2, 4])
let b = new Set([2, 4, 3])

// 交集
let intersect = new Set([...a].filter(item => b.has(item)));
console.log(intersect)//Set(2) { 2, 4 }

差集

let a = new Set([1, 2, 4])
let b = new Set([2, 4, 3])

// 差集a-b
let c = new Set([...a].filter(item => !b.has(item)));
console.log(c) //Set(1) { 1 }

// 差集b-a
let d = new Set([...b].filter(item => !a.has(item)));
console.log(d) //Set(1) { 3 }

Map

概念

Map对象保存键值对，能记住键的原始插入顺序。任何值（对象或基本类型）都可以作为一个键或一个值。

• Map的键只能出现一次，插入多次则更新为最新的值

let a = new Map()
a.set('a', 1)
a.set('a', 2)
a.set('a', 3)
console.log(a)//Map(1) { 'a' => 3 }

• Map的查找复杂度小于O(N)

内部表示为哈希表O(1)、搜索树O(log(N))、或其他数据结构。

属性和方法

遍历方法

• keys
• values
• entries
• forEach
• for…of

有Map如下：

let a = new Map()
a.set('a', 'a')
a.set('a', '1')
a.set('b', '2')
a.set('c', '3')

console.log(a)//Map(3) { 'a' => '1', 'b' => '2', 'c' => '3' }

遍历keys：

for (let key of a.keys()) {
    console.log(key)
    // a
    // b
    // c
}

遍历values：

for (let value of a.values()) {
    console.log(value)
    // 1
    // 2
    // 3
}

遍历entries：

for (let entry of a.entries()) {
    console.log(entry)
    // [ 'a', '1' ]
    // [ 'b', '2' ]
    // [ 'c', '3' ]
}

forEach：获得value

a.forEach(item => console.log(item))
// 1
// 2
// 3

for…of：获得[key,value]的数组

for (let item of a) {
    console.log(item)
    // ['a', '1']
    // ['b', '2']
    // ['c', '3']
}

想要得到分开的key和value可以解构：

for (let item of a) {
    const [key, value] = item;
    console.log(key, value)
    // a 1
    // b 2
    // c 3
}

String

比较全的总结——针对《红宝书》的笔记，跳转到3.3：【JavaScript高级程序设计】重点-第五章笔记：Date、RegExp、原始值包装类、单例内置对象-优快云博客

比较全的总结：JavaScript 28个常用字符串方法及使用技巧 - 掘金 (juejin.cn)

用索引值和charAt()的区别

charAt：''
索引值：undefined

str[index]不兼容ie6-ie8，charAt(index)可以兼容。

const str = 'hello';
str.charAt(1)  // 输出结果：e 
str[1]         // 输出结果：e 
str.charAt(5)  // 输出结果：'' 
str[5]         // 输出结果：undefined

charAt()和charCodeAt()方法的区别

• charAt方法获取对应位置的字符
• charCodeAt方法获取指定位置字符的Unicode值

const str = 'hello';
console.log(str.charAt(0))//h
console.log(str.charCodeAt(0))//104

5个查找方法的区别

• indexOf
• lastIndexOf
• includes
• startsWith
• endsWith

如何把字符串分割为数组

let str = "abcdef"
console.log(str.split(''))
// [ 'a', 'b', 'c', 'd', 'e', 'f' ]

split可以用正则表达式分隔：

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);  // 输出结果：["apples", "bananas", "cherries"]

3个截取方法的区别

大小写转换

• toLowerCase()
• toUpperCase()

3个模式匹配方法（正则表达式）

3个移除字符串收尾空白符

2个获取字符串本身

• valueOf：返回字符串对象原始值
• toString：返回字符串对象本身

其他

• 重复字符串：repeat()
• 补齐字符串长度：padStart()和padEnd()
• 字符串转为数字：parseInt()和parseFloat()

具体看JavaScript 28个常用字符串方法及使用技巧 - 掘金 (juejin.cn)

参考

JavaScript Set 的用法与理解_js set使用_暮春风的博客-优快云博客
大前端JS篇之搞懂【Set】 - 要爱学习鸭 - 博客园 (cnblogs.com)
【JavaScript高级】ES6常见新特性：词法环境、let、const、模板字符串、函数增强、Symbol、Set、Map_es 词法环境_
【JavaScript高级程序设计】重点-第五章笔记：Date、RegExp、原始值包装类、单例内置对象-优快云博客
JavaScript 28个常用字符串方法及使用技巧 - 掘金 (juejin.cn)