网站建设与维护课程标准,济南公众平台网站建设,wordpress nextpage,海口网站建设方案优化文章目录 1. Map 和 Object 的不同API 不同以任意类型为 keyMap 是有序结构Map 很快WeakMap总结 2. Set 和数组的区别Set 元素不能重复API 不一样Set 是无序的#xff0c;而数组是有序的 —— 这一点很少有人提到#xff0c;却很关键#xff01;#xff01;#xff01;Wea… 文章目录 1. Map 和 Object 的不同API 不同以任意类型为 keyMap 是有序结构Map 很快WeakMap总结 2. Set 和数组的区别Set 元素不能重复API 不一样Set 是无序的而数组是有序的 —— 这一点很少有人提到却很关键WeakSet总结 3. 数组求和传统方式reduce 方法的使用reduce 的其他用法 1. Map 和 Object 的不同
API 不同
// 初始化
const m new Map([[key1, hello],[key2, 100],[key3, { x: 10 }]
])// 新增
m.set(name, 双越)// 删除
m.delete(key1)// 判断
m.has(key2)// 遍历
m.forEach((value, key) console.log(key, value))// 长度Map 是有序的下文会讲所有有长度概念
m.size以任意类型为 key
const m new Map()
const o { p: Hello World }m.set(o, content)
m.get(o) // contentm.has(o) // true
m.delete(o) // true
m.has(o) // falseMap 是有序结构
Object key 不能按照既定顺序输出
// Object keys 是无序的
const data1 {1:aaa,2:bbb,3:ccc,测试:000}
Object.keys(data1) // [1, 2, 3, 测试]const data2 {测试:000,1:aaa,3:ccc,2:bbb};
Object.keys(data2); // [1, 2, 3, 测试]Map key 可以按照既定顺序输出
const m1 new Map([[1, aaa],[2, bbb],[3, ccc],[测试, 000]
])
m1.forEach((val, key) { console.log(key, val) })
const m2 new Map([[测试, 000],[1, aaa],[3, ccc],[2, bbb]
])
m2.forEach((val, key) { console.log(key, val) })Map 很快
Map 作为纯净的 key-value 数据结构它比 Object 承载了更少的功能。 Map 虽然有序但操作很快和 Object 效率相当。
// Map
const m new Map()
for (let i 0; i 1000 * 10000; i) {m.set(i , i)
}
console.time(map find)
m.has(2000000)
console.timeEnd(map find)
console.time(map delete)
m.delete(2000000)
console.timeEnd(map delete)// Object
const obj {}
for (let i 0; i 1000 * 10000; i) {obj[i ] i
}
console.time(obj find)
obj[200000]
console.timeEnd(obj find)
console.time(obj delete)
delete obj[200000]
console.timeEnd(obj delete)另外Map 有序指的是 key 能按照构架顺序输出并不是说它像数组一样是一个有序结构 —— 否则就不会这么快了 但这就足够满足我们的需求了。
WeakMap
WeakMap 也是弱引用。但是WeakMap 弱引用的只是键名 key 而不是键值 value。
// 函数执行完obj 会被销毁因为外面的 WeakMap 是“弱引用”不算在内
const wMap new WeakMap()
function fn() {const obj {name: zhangsan}// 注意WeakMap 专门做弱引用的因此 WeakMap 只接受对象作为键名null除外不接受其他类型的值作为键名。其他的无意义wMap.set(obj, 100)
}
fn()
// 代码执行完毕之后obj 会被销毁wMap 中也不再存在。但我们无法第一时间看到效果。因为
// 内存的垃圾回收机制不是实时的而且是 JS 代码控制不了的因此这里不一定能直接看到效果。另外WeakMap 没有 forEach 和 size 只能 add delete has 。因为弱引用其中的 key 说不定啥时候就被销毁了不能遍历。
WeakMap 可以做两个对象的关联关系而不至于循环引用例如
const userInfo { name: 双越 }
const cityInfo { city: 北京 }// // 常规关联可能会造成循环引用
// userInfo.city cityInfo
// cityInfo.user userInfo// 使用 WeakMap 做关联则无任何副作用
const user_to_city new WeakMap()
user_to_city.set(userInfo, cityInfo)总结
key 可以是任意数据类型key 会按照构建顺序输出很快WeakMap 弱引用
2. Set 和数组的区别
Set 元素不能重复
const arr [10, 20, 30, 30, 40]
const set new Set([10, 20, 30, 30, 40]) // 会去重
console.log(set) // Set(4) {10, 20, 30, 40}// 数组去重
function unique(arr) {const set new Set(arr)return [...set]
}
unique([10, 20, 30, 30, 40])API 不一样
// 初始化
const set new Set([10, 20, 30, 30, 40]) // 新增没有 push unshift 因为 Set 是无序的下文会讲
set.add(50)// 删除
set.delete(10)// 判断
set.has(20)// 长度
set.size// 遍历
set.forEach(val console.log(val))// set 没有 index 因为是无序的Set 是无序的而数组是有序的 —— 这一点很少有人提到却很关键
先看几个测试
数组前面插入元素 vs 后面插入元素数组插入元素 vs Set 插入元素数组寻找元素 vs Set 寻找元素
// 构造一个大数组
const arr []
for (let i 0; i 1000000; i) {arr.push(i)
}// 数组 前面插入一个元素
console.time(arr unshift)
arr.unshift(a)
console.timeEnd(arr unshift) // unshift 非常慢
// 数组 后面插入一个元素
console.time(arr push)
arr.push(a)
console.timeEnd(arr push) // push 很快// 构造一个大 set
const set new Set()
for (let i 0; i 1000000; i) {set.add(i)
}// set 插入一个元素
console.time(set test)
set.add(a)
console.timeEnd(set test) // add 很快// 最后同时在 set 和数组中寻找一个元素
console.time(set find)
set.has(490000)
console.timeEnd(set find) // set 寻找非常快
console.time(arr find)
arr.includes(490000)
console.timeEnd(arr find) // arr 寻找较慢什么是无序什么是有序参考 x1-有序和无序.md
无序插入、查找更快有序插入、查找更慢
因此如果没有强有序的需求请用 Set 会让你更快更爽
WeakSet
WeekSet 和 Set 类似区别在于 —— 它不会对元素进行引用计数更不容易造成内存泄漏。
// 函数执行完obj 就会被 gc 销毁
function fn() {const obj {name: zhangsan}
}
fn()// 函数执行完obj 不会被销毁因为一直被外面的 arr 引用着
const arr []
function fn() {const obj {name: zhangsan}arr.push(obj)
}
fn()// 函数执行完obj 会被销毁因为外面的 WeakSet 是“弱引用”不算在内
const wSet new WeakSet()
function fn() {const obj {name: zhangsan}wSet.add(obj) // 注意WeakSet 就是为了做弱引用的因此不能 add 值类型无意义
}
fn()【注意】内存的垃圾回收机制不是实时的而且是 JS 代码控制不了的因此这里不一定能直接看到效果。 WeekSet 没有 forEach 和 size只能 add delete 和 has。因为垃圾回收机制不可控js 引擎看时机做垃圾回收那其中的成员也就不可控。
总结
Set 值不能重复Set 是无序结构WeakSet 对元素若引用
3. 数组求和
传统方式
function sum(arr) {let res 0arr.forEach(n res res n)return res
}
const arr [10, 20, 30]
console.log( sum(arr) )reduce 方法的使用
// 累加器
const arr1 [10, 20, 30, 40, 50]
const arr1Sum arr1.reduce((sum, curVal, index, arr) {console.log(reduce function ......)console.log(sum, sum)console.log(curVal, curVal)console.log(index, index)console.log(arr, arr)return sum curVal // 返回值会作为下一次执行的 sum
}, 0)
console.log(arr1Sum, arr1Sum)reduce 的其他用法
// 计数
function count(arr, value) {// 计算 arr 中有几个和 value 相等的数return arr.reduce((c, item) {return item value ? c 1 : c}, 0)
}
const arr2 [10, 20, 30, 40, 50, 10, 20, 10]
console.log( count(arr2, 20) )// 数组输出字符串
const arr3 [{ name: xialuo, number: 100 },{ name: madongmei, number: 101 },{ name: zhangyang, number: 102 }
]
// // 普通做法 1需要声明变量不好
// let arr3Str
// arr3.forEach(item {
// arr3Str ${item.name} - ${item.number}\n
// })
// console.log(arr3Str)
// // 普通做法 2map 生成数组再进行 join 计算
// console.log(
// arr3.map(item {
// return ${item.name} - ${item.number}
// }).join(\n)
// )
// reduce 做法只遍历一次即可返回结果
console.log(arr3.reduce((str, item) {return ${str}${item.name} - ${item.number}\n}, )
)
