由codewars上的一道题目学习ES6的Map

金氏
• 阅读 2158

我对ES6数据结构Map的学习

最近在CodeWars上做了一道题目,嗯,我这个渣渣没有做出来,然后看了别人的解决方案,Map???

是时候学习一下ES6的Map了。。。。。

以下是原题:(https://www.codewars.com/kata...


Description:

You have a positive number n consisting of digits. You can do at most one operation: Choosing the index of a digit in the number, remove this digit at that index and insert it back to another place in the number.

Doing so, find the smallest number you can get.

Task:

Return an array or a tuple depending on the language (see "Your Test Cases" Haskell) with

1) the smallest number you got
2) the index i of the digit d you took, i as small as possible
3) the index j (as small as possible) where you insert this digit d to have the smallest number.

Example:

smallest(261235) --> [126235, 2, 0]

126235 is the smallest number gotten by taking 1 at index 2 and putting it at index 0

smallest(209917) --> [29917, 0, 1]

[29917, 1, 0] could be a solution too but index i in [29917, 1, 0] is greater than
index i in [29917, 0, 1].

29917 is the smallest number gotten by taking 2 at index 0 and putting it at index 1 which gave 029917 which is the number 29917.

smallest(1000000) --> [1, 0, 6]


以下就是某人的解决方案:

Array.prototype.move = function(from, to) {
    this.splice(to, 0, this.splice(from, 1)[0]);
    return this;
};

function smallest(n) {
  let iter = `${n}`.length, res = new Map(); //使用ES6的模板字符串还有Map数据结构
  for (let i = 0; i < iter; i++) {
    for (let j = 0; j < iter; j++) {
      let number = `${n}`.split('').move(i, j).join(''); //排列组合???哈哈
      if (!res.has(+number)) res.set(+number, [i, j]); //添加键值对到Map
    }
  }
  let min = Math.min(...res.keys()); //res.keys()得到键名的遍历器,然后扩展运算符转化为数组,然后最小的number
  return [min, ...res.get(min)]; //res.get(min)得到对应键名的键值
}

以下内容来自大神博客:阮一峰ES6入门书籍

认识Map数据结构

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

Map数据结构类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以作为键。如果你需要“键值对”的数据结构,Map比Object更合适。

var m = new Map();
var o = {p: 'hello world'};

m.set(0, 'connect');
m.get(0); //'connect'

m.has(0); //true
m.delete(o); //true
m.has(o); //false

Map实例的属性和方法

  • size():返回Map结构的成员总数

操作方法

  • set(key, value):设置对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新。

var m = new Map();

m.set("edition", 6)        // 键是字符串
m.set(262, "standard")     // 键是数值
m.set(undefined, "nah")    // 键是undefined

//set方法返回的是Map本身,因此可以采用链式写法。
let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');
  • get(key):读取key对应的键值,如果找不到key返回undefined

var m = new Map();

var hello = function() {
    console.log("hello");
}
m.set(hello, "Hello ES6!") // 键是函数

m.get(hello)  // Hello ES6!
  • has(key):返回一个布尔值,表示某个键是否在Map数据结构中。

  • delete(key):删除某个键,成功返回true;删除失败返回false。

  • clear():删除所有成员,没有返回值。

遍历方法

  • keys():返回键名的遍历器

  • values():返回键值的遍历器

  • entries():返回所有成员的遍历器

  • forEach():遍历Map的所有成员

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

Map数据结构的转换

  • Map转换为数组

使用扩展运算符(...)

let mao = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...mao]; //[ [true, 7], [{foo: 3}, ['abc']] ]

转换为数组结构之后,结合数组的map()方法,filter()方法可以实现Map的遍历和过滤。Map本身没有map和filter方法,但是有一个forEach方法

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

let map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生Map结构 {1 => 'a', 2 => 'b'}

let map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}
  • 数组转为Map

new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}

PS:

下面的例子中,字符串true和布尔值true是两个不同的键。

var m = new Map([
  [true, 'foo'],
  ['true', 'bar']
]);

m.get(true) // 'foo'
m.get('true') // 'bar'

如果对同一个键多次赋值,后面的值将覆盖前面的值。

let map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"

上面代码对键1连续赋值两次,后一次的值覆盖前一次的值。

如果读取一个未知的键,则返回undefined。

new Map().get('asfddfsasadf')
// undefined

注意,只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。

var map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

上面代码的set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined。

由上可知,Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。

如果Map的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map将其视为一个键,包括0和-0。另外,虽然NaN不严格相等于自身,但Map将其视为同一个键。

let map = new Map();

map.set(NaN, 123);
map.get(NaN) // 123 这里是同一个键

map.set(-0, 123);
map.get(+0) // 123
点赞
收藏
评论区
推荐文章
Bill78 Bill78
4年前
Python的map()方法如何使用?
在学习map()方法之前,我们先在交互模式下看下map()的用法说明。(https://imghelloworld.osscnbeijing.aliyuncs.com/5c398969745b516276e1f7f5c7dcb764.png)从上面可以得到的信息是:map()返回的是一个map对象(python2.0中返回的是列表
Stella981 Stella981
3年前
HashMap 初始化时赋值
一般初始化一个map并且给map赋值的写法:HashMap<String,StringmapnewHashMap<String,String();map.put("name","test");map.put("age","20");但是我想在初始化的时候就直接给map中set值。
Stella981 Stella981
3年前
C++中map常用用法
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候,在编程上提供快速通道。这里说下map内部数据的组织,map内部自建一颗红黑树(一种非严格意义上的平衡二叉树),这颗树具有对数据自动排序的功能,所以在map内部
Stella981 Stella981
3年前
ES6——for
  forin和forof乍一听,以为是一样的,都是用来“遍历”的。但是,既然开发出了两个方法,那就一定有所区别iterable  首先,ES6中添加了一个iterable类型,翻译过来叫“可迭代”。  在ES6里,数组Arrray、集合Set以及Map(目前我还不了解……)都是“可迭代的”
Stella981 Stella981
3年前
JavaScript ES6—Map的妙用
多重嵌套for循环太丑,运行效率又低,有没有什么办法可以降低它的嵌套层数?游戏内怎么简洁优雅的获取我想要的数据,又有良好的智能提示效果?有没有通用的提高运行效率的方案?没错,ES6的Map就是为你定制的。先看一个简单的例子,数组去重:
Wesley13 Wesley13
3年前
9个常用ES6特性归纳(一般用这些就够了)
ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6给我们带来很多令人意想不到的功能,在这里我们一起来学习一下9个超级实用的ES6特性。1、展开操作符
Stella981 Stella981
3年前
ES6中的map和reduce
一 实战<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<metaname"viewport"content"widthdevicewidth,initialscale1.0"
Wesley13 Wesley13
3年前
Java之五种遍历Map集合的方式
摘要:在java中所有的map都实现了Map接口,因此所有的Map都可以用以下的方式去遍历。在java中所有的map都实现了Map接口,因此所有的Map都可以用以下的方式去遍历。这篇文章主要给大家介绍了关于Java中遍历Map集合的5种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面一起学习学
Stella981 Stella981
3年前
MapReduce+Shuffle详解
之前一直对Hadoop的MapReduce过程知道皮毛,如今特地深入学习了这个过程一下,把我的理解写下来。以下就是是我读书,看博客,然后根据自己的理解和经验总结出来的。错误的地方,还请大神指出。^\_^由衷感谢~宏观上来说,Hadoop的MapReduce在执行每个作业的时候要经历2个大阶段:Map阶段和Reduce阶段。下图是官方对整个
Stella981 Stella981
3年前
Go语言基础之map补充
点击上方“Go语言进阶学习”,进行关注回复“Go语言”即可获赠Python从入门到进阶共10本电子书今日鸡汤长相思,摧心肝!前言Hey,大家好,我是星期八,咱们接着上次继续说,补充一些map的知识。上节回顾在上节,我们学习了map如何使用。map有两种方式定义,一种是标准
菜园前端 菜园前端
2年前
什么是字典?
原文链接:什么是字典?与集合类似,字典也是一种存储唯一值的数据结构,但它是以键值对的形式来存储。在ES6中新增了Map字典。实现功能delete删除元素clear清空所有元素set添加/覆盖元素get查找/返回元素的值has判断是否包含某个元素应用场景1.