前言

JavaScript中对象的本质是键值对的集合,ES5中的数据结构,主要是用Array和Object,但是键只能是字符串。为了弥补这种缺憾,ES6带来了一种新的数据结构Map。

Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇)。请看下面例子。。下面话不多说了,来一起看看详细的介绍吧。

Map 对象

Map结构提供了“值—值”的对应,任何值(对象或者原始值) 都可以作为一个键或一个值,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

属性

Map属性

  • Map.length 属性length的值为0。

  • Map.prototype 表示Map构造器的原型。允许添加属性从而应用与所有的Map对象

Map实例 - 所有Map对象的实例都会继承Map.prototype。

  • Map.prototype.constructor 返回创建给map实例的构造函数,默认是Map函数。

  • Map.prototype.size 返回Map对象的键值对的数量。

    var map = new Map([['one',1], ['two', 2], ['three', 3]]);
console.log(map.constructor); //function Map() { [native code] }
console.log(map.size); //

方法

    //Iterator对象:可以使用for..of进行迭代的对象
var map = new Map([[1, 'one'],[2, 'two'], [3, 'three']]);

1.Map.prototype.set(key, value) 设置Map对象中键的值,返回该Map对象。

    console.log(map.has(4));    //false
map.set(4, 'four');
console.log(map.has(4)) //true

2.Map.prototype.get(key) 返回键对应的值,如果不存在,则返回undefined。

    map.get(1); //'one'

3.Map.prototype.has(key) 返回一个布尔值,表示Map实例是否包含键对应的值。

    map.has(1); // true
map.has(5); //false

4.Map.prototype.delete(key) 移除任何与键相关联的值,并且返回该值,该值在之前会被Map.prototype.has(key)返回为true。之后再调用则返回false。

    console.log(map.has(1));    //true
map.delete(1);
console.log(map.has(1)); //false

5.Map.prototype.clear() 移除Map对象的所有键值对。

    console.log(map.size);    //3
map.clear();
console.log(map.size); //0

6.Map.prototype.entries() 返回一个新的Iterator对象,它按插入顺序包含了Map对象中每个元素的[key, value]数组。

    console.log(map);    //Map {1 => "one", 2 => "two", 3 => "three"}
map.entries();
console.log(map); //Map {1 => "one", 2 => "two", 3 => "three"}

7.Map.prototype.forEach(callbackFn[, thisArg]) 按插入顺序,为Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg,他将在每次回调函数中作为this值。

    map.forEach(function(value, key, mapObj) {
console.log(value + '---' + key + '---' + mapObj);
//value - Map对象里每一个键值对的值
//key - Map对象里每一个键值对的键
//mapObj - Map对象本身
console.log(this); //this === window
}); map.forEach(function(value, key, mapObj) {
console.log(value + '---' + key + '---' + mapObj);
console.log(this); //this === map
}, map)

8.Map.prototype.keys() 返回一个新的Iterator对象,它按插入顺序包含了Map对象中每个元素的键。

    map.keys();    //MapIterator {1, 2, 3}

9.Map.prototype.values() 返回一个新的Iterator对象,它按插入顺序包含了Map对象中每个元素的值。

    map.values(); //

使用for..of方法迭代映射

    var map = new Map();
map.set(1, 'one');
map.set(2, 'two');
for (var [key, value] of map) {
console.log(key + '---' + value);
}
// 1 --- one 2 --- two for (var key of map.keys()) {
console.log(key);
}
// 1 2 for (var value of map.values()) {
console.log(value);
}
// 'one' 'two'

常规用法综合

var map = new Map();  //创建map对象
map.set('one', 1);
map.set('two', 2);
map.set('three', 3);
//或者 var map = new Map([['one',1], ['two', 2], ['three', 3]]); m.set(ul,'content'); //为Map增加成员
m.get(ul);//获取键 ul对应的值
m.has(ul);//返回布尔值,判断是否含有键 ul
m.delete(ul);//删除键 ul,成功返回true,失败返回false
m.size //返回m长度
m.clear(); //清除m所有成员

Map VS Object

  • 一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。不过,从ES5开始可以使用map = Object.create(null)来创建一个没有原型的对象。

  • 一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。

  • 你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。

数据类型转换

...扩展语句

扩展语法允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展。

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1];
console.log(arr1) // [3, 4, 5, 0, 1, 2]

Map转数据的最简单方式是使用 ... 扩展运算符。例如:

var map = new Map([['one',1], ['two', 2], ['three', 3]]);
console.log(...map); //["one", 1]   ["two", 2]  ["three", 3]

Map转对象时,必须所有键都是字符串,使用Object.create()函数。Map转JSON时,要求也要求所有键都是字符串,使用JSON.Stringify()函数。

需要注意的

1、转换时注意

2、当键是对象时,必须是引用相同,才认为键是相同的。只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。

var map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
//上面代码的set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined。

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

    var map = new Map();
map.set(Number('aa111'), 'isNaN');
map.set(Number('bb222'), 'also is NaN');
map.get(NaN); //'also is NaN'

4、注意区分Map对象与JavaScript Array map() 方法 

Array map() 语法
array.map(function(currentValue,index,arr), thisValue) 实例1
//返回一个数组,数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
//2,3,4,5 实例2
//数值项求平方:
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16

Set 对象

简要

ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

Set对象允许你存储任意类型的唯一值(不能重复),无论它是原始值或者是对象引用。

Set本身是一个构造函数,用来生成Set数据结构。

Set结构有以下属性:

  • Set.prototype.constructor: 构造函数,默认就是Set函数。
  • set.prototype.size : 返回Set的成员总数。

Set结构有以下方法:

  • add(value) : 添加某个值,返回Set结构本身。
  • delete(value) : 删除某个值,返回一个布尔值,表示是否成功。
  • has(value) : 返回一个布尔值,表示该值是否为Set的成员。
  • clear() : 清除所有成员,没有返回值。

Set遍历操作:

  • keys():返回键名的遍历器
  • values(): 返回健值对的遍历器
  • entries():返回键值对的遍历器
  • forEach(): 每个成员

Set属性

  • Set.length 属性length的值为0。

  • Set.prototype 表示Set构造器的原型。允许向所有Set对象添加新的属性。

Set实例

所有Set对象的实例都会继承Set.prototype。

  • Set.prototype.constructor 返回创建给set实例的构造函数,默认是Set函数。

  • Set.prototype.size 返回Set对象的键值对的数量。

    var sset = new Set(['one', 'two', 'three']);
console.log(sset.constructor); //function Set() { [native code] }
console.log(sset.size); //3

Set方法


//创建Set实例
//1.
var sset = new Set();
sset.add('one');
sset.add('two');
sset.add('three');
//2.
var sset= new Set(['one', 'two', 'three']);

1.Set.prototype.add(value) 在Set对象尾部添加一个元素。返回该Set对象。

    sset.add('four');
console.log(sset); //Set {"one", "two", "three", "four"}

2.Set.prototype.clear() 移除Set对象内的所有元素。

    sset.clear();
console.log(sset.size); //0

3.Set.prototype.delete(value) 移除Set的中与这个值相等的元素,返回Set.prototype.has(value)在这个操作前会返回的值(即如果该元素存在,返回true,否则返回false)。Set.prototype.has(value)在此后会返回false。

    console.log(sset.has('one'));    //true
sset.delete('one');
console.log(sset.has('one')); //false

4.Set.prototype.entries() 返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似, 每个值的键和值相等。

5.Set.prototype.forEach(callbackFn[, thisArg]) 按照插入顺序,为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数,回调中的this会是这个参数。

    sset.forEach(function(value, key, setObj) {
console.log(value + '---' + key + '---' + setObj);
//value - Set对象里每一个键值对的值
//key - Set对象里每一个键值对的键 === 值
//mapObj - Set对象本身
console.log(this); //this === window
}); sset.forEach(function(value, key, setObj) {
console.log(value + '---' + key + '---' + setObj);
console.log(this); //this === sset
}, sset)

6.Set.prototype.has(value) 返回一个布尔值,表示Map实例是否包含键对应的值。

    sset.has('one'); // true
sset.has('fivr'); //false

7.Set.prototype.keys() 与values()方法相同,返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。

    sset.keys();    //SetIterator {"one", "two", "three"}

8.Set.prototype.values() 返回一个新的Iterator对象,它按插入顺序包含了Map对象中每个元素的值。

    sset.values(); //SetIterator {"one", "two", "three"}

使用for..of方法迭代映射

    var sset = new Set();
sset.add(1);
sset.add(2);
for (var value of sset) {
console.log(value);
}
// 1 2 for (var key of sset.keys()) {
console.log(key);
}
// 1 2 for (var value of sset.values()) {
console.log(value);
}
// 1 2

Set 与 Array

var myArray = ["value1", "value2", "value3"];

// 用Set构造器将Array转换为Set
var mySet = new Set(myArray); mySet.has("value1"); // returns true // 用...(展开操作符)操作符将Set转换为Array
console.log([...mySet]); // 与myArray完全一致

Array.from方法可以将Set结构转换为数组。

var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from( items );

这也提供了一种除去数组中重复元素的方法。

function dedupe( array ) {
return Array.from( new Set(array) );
}

或者如下写也可以,比较简单的数组去重

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]

Set 注意

1、var sset = new Set('one', 'two', 'three');  //这样的错误的

2、值的相等规则:NaN 是与NaN是相同的(虽然NaN !== NaN),除此之外所有的值都根据'==='判断。

    var sset= new Set();
sset.add(Number('aa111'));
sset.add(Number('bb222'));
sset.add('cc333'));
//Set {NaN, "cc333"}

3、向Set加入值的时候,不会发生类型转换。这意味着,在Set中5和”5”是两个不同的值。

weakset对象

WeakSet结构与Set类似,也是不重复的值的集合。

WeakSet和Set的区别:

  • 1.WeakSet的成员只能是对象,而不能是其他类型的值
  • 2.WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。这个特点意味着,无法引用WeakSet的成员,因此WeakSet是不可遍历的。

WeakSet结构的三个方法
add
delete
has
WeakSet的一个用处是储存DOM节点,而不用担心这些节点会从文档中移除时,会引发内存泄露。

Js基础知识7-Es6新增对象Map和set数据结构的更多相关文章

  1. Js基础知识2-对象、对象属性全解

    Object对象 Object对象包含如下属性和方法,也就意味着一切对象(函数也是对象)都包含如下方法. 每种方法和属性在不同的对象中有不同的作用,并不是每种对象都有使用每个方法的必要. 下面是Obj ...

  2. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  3. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  4. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  5. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  6. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  7. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  8. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  9. 前端JS基础知识

    1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...

随机推荐

  1. nginx动静分离小示例

    server { listen ; server_name www.xxx.cn; #静态页面 #匹配首页,url:www.xxx.cn index index.html; root /usr/loc ...

  2. zookeeper 安装的三种模式

    Zookeeper安装 zookeeper的安装分为三种模式:单机模式.集群模式和伪集群模式. 单机模式 首先,从Apache官网下载一个Zookeeper稳定版本,本次教程采用的是zookeeper ...

  3. Centos6.5 (或Linux) 安装Elasticsearch

    一.可以在网上下载对饮的版本:https://github.com/elastic/elasticsearch,本次安装的是5.5.3. 首先保证虚拟机上安装了jdk,jdk的版本只是是1.7或以上 ...

  4. 7.20 python线程3

    2018-7-20 18:46:49 去俺弟家玩去 后天回来 1.复习 # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018 ...

  5. mysql语句性能分析

    1.开启慢查询 slow_query_log = 1 //开启 slow_query_log_file = mysql_slow_query.log //日志文件位置 long_query_time ...

  6. CNN中的卷积理解和实例

    卷积操作是使用一个二维卷积核在在批处理的图片中进行扫描,具体的操作是在每一张图片上采用合适的窗口大小在图片的每一个通道上进行扫描. 权衡因素:在不同的通道和不同的卷积核之间进行权衡 在tensorfl ...

  7. WebFlux Spring Security配置

    最小化可运行配置 package com.terwergreen.bugucms.config; import org.apache.commons.logging.Log; import org.a ...

  8. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SVN版本控制系统搭建(结合http服务)

    SVN版本控制服务器搭建 Svn(subversion)是一个开源代码管理的控制系统,用来管理和存储开发的源代码,基于C/S模式.可以单独提供服务,也可以结合http服务来实现. 运行方式  运行端口 ...

  10. 跨平台的移动应用开发框架-Sencha Touch

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/tommychen1228/article/details/32959529 近期决定转以日常技术类文 ...