python入门指南bl-Vue 3 高阶指南之 Map

高阶指南

在进入 Vue 3 组合 API，深入响应式之前，我们需要搞懂 ES6 出现的几个 API，其中包含以下几个

map

weakMap

set

weakSet

proxy

reflect

如果不知道的小伙伴，可以自行到 MDN 进行查阅。

Map

简单来说就是用于保存键值对对象，能够记住键的原始插入顺序，对于 key 来说，任何值都可以作为一个 key，或者 value。

我们都知道，Map 是一个构造函数，也就是传统的面向对象编程的类的概念，所以可以通过以下方式来创建 map 实例:

new Map()

属性

Map.length

属性 length 的值为 0 。想要计算一个Map 中的条目数量，使用 Map.prototype.size.

Map.prototype.size

返回Map对象的键/值对的数量

new Map().size

方法

Map.prototype.clear()

移除Map对象的所有键/值对。

Map.prototype.delete(key)

如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 *false*。随后调用 Map.prototype.has(key) 将返回 false 。

Map.prototype.entries()

返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的「[key, value]」 **数组**。

Map.prototype.forEach(callbackFn[, thisArg])

按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。

Map.prototype.get(key)

返回键对应的值，如果不存在，则返回undefined。

Map.prototype.has(key)

返回一个布尔值，表示Map实例是否包含键对应的值。

Map.prototype.keys()

返回一个新的 Iterator对象，它按插入顺序包含了Map对象中每个元素的「键」。

Map.prototype.set(key, value)

设置Map对象中键的值。返回该Map对象。

Map.prototype.values()

返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的「值」。

实例

使用 Map 对象

let myMap = new Map();

let keyObj = {};

let keyFunc = function(){};

let keyString = 'a string';

添加 key

myMap.set(keyString, "Ken")

myMap.set(keyObj, 'Ken')

myMap.set(keyFunc,"ken")

size 获取

myMap.size;

读取值

myMap.get(keyFunc)

myMap.get(keyString)

myMap.get(keyObj)

将 NaN 作为 Map 的 key

NaN 也可以作为Map对象的键。虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，但下面的例子表明，NaN作为Map的键来说是没有区别的:

myMap.set(NaN, 'not a number')

myMap.get(NaN)

let otherNaN = Number('foo')

myMap.get(otherNaN)

使用 for .. of 方法来迭代 Map

Map可以使用for..of循环来实现迭代：

for(let [key, value] of myMap) {

console.log(key + " = " + value)

}

循环 keys

for (let key of myMap.keys()) {

console.log(key);

}

循环 values

for (let value of myMap.values()) {

console.log(value);

}

循环 entries

for (let [key, value] of myMap.entries()) {

console.log(key + " = " + value);

}

使用 forEach() 方法迭代 Map

Map也可以通过forEach()方法迭代：

myMap.forEach(function(value, key){

console.log(key + " = " + value);

})

Map 与数组的关系

let kvArray = [["key1", "value1"], ["key2", "value2"]]

let map = new Map(kvArray)

map.get('key1')

map.get("key2")

console.log(map)

console.log(Array.from(map))

console.log([...map])

Array.from(map.keys())

Array.from(map.values())

Array.from(map.entries())

复制或合并 Maps

map 能像数组一样被复制：

let original = new Map([

[1, 'one']

]);

let clone = new Map(original);

console.log(clone.get(1)); // one

console.log(original === clone); // false. 浅比较不为同一个对象的引用

Map 对象间可以进行合并，但是会保持键的唯一性。

let first = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

let second = new Map([

[1, 'uno'],

[2, 'dos']

]);

// 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。

// 展开运算符本质上是将Map对象转换成数组。

let merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno

console.log(merged.get(2)); // dos

console.log(merged.get(3)); // three

Map对象也能与数组合并：

let first = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

let second = new Map([

[1, 'uno'],

[2, 'dos']

]);

// Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。

let merged = new Map([...first, ...second, [1, 'eins']]);

console.log(merged.get(1)); // eins

console.log(merged.get(2)); // dos

console.log(merged.get(3)); // three

删除与判断

let myMap = new Map()

myMap.set('bla','blaa')

myMap.set('bla2','blaa2')

console.log(myMap) // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' }

myMap.has('bla') // true

myMap.delete('bla') // true

console.log(myMap) // Map { 'bla2' => 'blaa2' }

python入门指南bl-Vue 3 高阶指南之 Map相关推荐

python阶乘匿名函数_python的高阶函数与匿名函数
一.高阶函数的定义高阶函数:就是把函数当成参数传递的一种函数,例如: defadd(x,y,f):return f(x)+f(y)print(add(-8,11,abs) 结果:19 解释: 1.调 ...
python中高阶函数map怎么用_python六十课——高阶函数之map
1.高阶函数: 特点:函数的形参位置必须接受一个函数对象分类学习: 1).map(fn,lsd1,[lsd2...]): 参数一:fn --> 函数对象参数二:lsd1 --> 序列对 ...
gdb调试lua_gdb 调试入门，大牛写的高质量指南
原标题:gdb 调试入门,大牛写的高质量指南 (点击上方公众号,可快速关注) 来源: 伯乐在线 - 道法子如需转载,发送「转载」二字查看说明没想到Brendan Gregg这样的大牛,会写出这样一 ...
python在匿名函数作和_跟光磊学Python开发-匿名函数函数和高阶函数
跟光磊学Python开发-匿名函数函数和高阶函数跟光磊学Python开发-匿名函数函数和高阶函数跟光磊学Python开发匿名函数匿名函数就是函数定义时没有名字的函数,也称为匿名表达式. 普通函数 ...
一文看懂Python（八）-----内置高阶函数用法总结
函数是Python的核心内容之一,能够提高代码的重复利用率.为了更好的使用函数,有必要了解函数的一些高级用法. Python内置了三个高阶函数:所谓高阶函数就是以函数作为参数,或者返回一个函数的函数, ...
Python学习之Part09.高阶函数filter(),map(),reduce(),sorted()
1.高阶函数一个函数作为参数传给另外一个函数: 一个函数的返回值为另外一个函数(若返回值为该函数本身,则为递归) # abs()用来求一个数的绝对值 # 将abs函数赋值,则f==abs f = a ...
写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件递归函数深拷贝对象正则匹配近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
Python学习笔记__4.1章高阶函数
# 这是学习廖雪峰老师python教程的学习笔记 1.概览我们知道Python内置的求绝对值的函数是abs() # 调用abs()函数可以获得一个值 >>> abs(-10) 10 ...
python高级语法-高阶函数之map的使用方法
python标准库内置了不少常用的高阶函数. 这里简单介绍一下比较实用的几个的用法. 首先,什么叫高阶函数? 高阶函数,把函数作为参数的函数,这是源于python中函数可以像变量一样赋值等操作,这是其 ...

python入门指南bl-Vue 3 高阶指南之 Map

python入门指南bl-Vue 3 高阶指南之 Map相关推荐

最新文章

热门文章