Set，Map

NaN：不是数值的数值类型
特点：NaN与任何值都不相等，包括NaN本身

Set是什么

  • 是一种新型数据结构
  • 是一种存储任何类型的唯一值的新型数据结构

对象的属性名(kay)：必须是字符串或Symbol()或计算属性

什么是计算属性？

  • 计算属性就ES6引入的一种命名对象key的方法。

计算属性

定义：ES6新增对象属性名语法：计算属性是使用 [ ] 设置大小的属性名。

方括号 [ ]
定义：

Set

定义

  • 是构造函数，用来实例化一个对象，用new调用
  • 用来存储任何类型的唯一值。

语法

new set（）//创建一个空set
new set（iterable）//创建一个有值的set
  • iterable：可迭代对象。

返回值：返回新 set 对象

示例

  • 没有参数
 let set = new Set()
 console.log(set); //Set(0) {size: 0}
  • 有参数和唯一的（就是一个值只能出现一次）
let arr = [1,2,3,3,2]
let set = new Set(arr)
console.log(arr); //(5) [1, 2, 3, 3, 2]
console.log(set); //Set(3) {1, 2, 3}
  • 值是对象
let obj = {x:1}
let arr = [obj,{x:1},2,obj,{x:1},2]
let set = new Set(arr)
console.log(arr); //[{…}, {…}, 2, {…}, {…}, 2]
console.log(set);// Set(4) {{…}, {…}, 2, {…}} //因为{x:2}的地址不同，obj是相同的

Set.prototype.add()

定义：用于向Set对象中添加新值。（如果值存在，就不添加）

语法

set.add(value) //value:任意类型值  每次只能添加一个值

返回值：返回更新后的Set对象

示例

  • 基本用法
let set = new Set()
set.add(1)
set.add('hello')
set.add(null)
set.add(undefined)
set.add(NaN) //在这里 Set() 认为 NaN 相等
set.add([1,2,3])
set.add({x:1})
  • 支持链式调用
let set = new Set()

set.add(1).add(2)

set.add('hello')
set.add(null)
set.add(undefined)
set.add(NaN) //在这里 Set() 认为 NaN 相等
set.add([1,2,3])
set.add({x:1})

Set.prototype.has()

定义：用于检索Set对象中是否存在指定值。

语法

Set.has(value) //value是你要检索的值。

返回值 ：布尔值（true / false）

示例

let set = new Set()
set.add(1).add(2)
set.add('hello')
set.add(null)
set.add(undefined)
set.add(NaN)
set.add([1,2,3])
set.add({x:1})
      
console.log(set.has(2));

Set.prototype.delete()

定义：从 Set 对象中删除指定的值

语法

delete(value) //value是你要删除的值。

返回值：成功删除返回 true，否则返回 false。

示例

let arr = [1,2,3]
let set = new Set(arr)
        
console.log(set.delete(2));  //true
console.log(set); //Set(2) {1, 3}

Set.prototype.forEach()

定义：用于遍历Set()方法

语法

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 箭头函数
forEach(() => { /* ... */ } )
forEach((value) => { /* ... */ } )
forEach((value, key) => { /* ... */ } )
forEach((value, key, set) => { /* ... */ } )

// 内联回调函数
forEach(function() { /* ... */ })
forEach(function(value) { /* ... */ })
forEach(function(value, key) { /* ... */ })
forEach(function(value, key, set) { /* ... */ })
forEach(function(value, key, set) { /* ... */ }, thisArg)
  • callbackFn：对Set()对象中的每一个值调用一次回调函数。回调有三个参数
  • value：传入set的每一个值
  • key：传入value的key
  • set：传入set本身

返回值：undefined

示例

Set.prototype.keys()

定义：keys() 方法是 values() 方法的别名。

语法

Set.keys()

返回值:
示例

Set.prototype.values()

定义： 方法返回一个新的迭代器对象，该对象按插入顺序包含 Set 对象中每个元素的值。

语法

Set.values()

返回值:一个新的迭代器对象，按插入顺序包含给定 Set 中每个元素的值。
示例

Set.prototype.clear()

定义：clear() 方法删除 Set 对象中所有元素。

语法

Set.clear()

返回值：undefined

Map对象是什么

  • Map对象是ES6引入的一种新型数据结构。
  • 和ES中的Object一样，也使用键值对形式存储数据。
  • 和Object不一样的地方在：
    - 有序存储：Map会记录存储位置

Map

定义

  • 是ES6新增的内置构造函数
  • 对象保存键值对，并且能够记住键的原始插入顺序。

语法

new Map（）//创建一个空Map
new Map（iterable）//
  • iterable：1.必须是可迭代对象 2.可迭代对象必须是键值对形式。

返回值：

示例

  • 直接调用
const map = new Map()
  • 传入一个数组，也会报错
const arr = [1,2,3]
const map = new Map(arr)
console.log(map);
  • 必须传入一个键值对形式的对象。
const arr =[[1,'老大'],[2,'老二'],[3,'老三']]
const map2 = new Map(arr)
console.log(map2); // Map(3) {1 => '老大', 2 => '老二', 3 => '老三'}

Map.prototype.get()

定义：用于查询Map()里的指定键值对。

语法

Map.get(key)
  • key ：键名

返回值：键值对的值

示例

const arr = [1,2,3] //
const obj = {x:1}
const fn = function () {}
const map = new Map([
            [0,'a'],
            ['hello','b'],
            [true,'c'],
            [undefined,'d'],
            [null,'e'],
            // [{x:1},'f'],
            [obj,'f'],
            // [[1,2,3],'g'],
            [arr,'g'],
            // [function () {},'h']
            [fn,'h']
        ])
console.log(map);
console.log(map.get(0));
console.log(map.get('hello'));
console.log(map.get(true));
console.log(map.get(undefined));
console.log(map.get(null));
console.log(map.get(obj));
console.log(map.get(arr));
console.log(map.get(fn));

Map.prototype.set()

定义用于给Map()添加键值对

语法

Map.set(key，value)
  • key：名
  • value：值

返回值：返回更改后的Map 对象

示例

const arr = [1,2,3] //
        const obj = {x:1}
        const fn = function () {}
        const map = new Map([
            [0,'a'],
            ['hello','b'],
            [true,'c'],
            [undefined,'d'],
            [null,'e'],
            // [{x:1},'f'],
            [obj,'f'],
            // [[1,2,3],'g'],
            [arr,'g'],
            // [function () {},'h']
            [fn,'h']
        ])
       
        map.set('黄永福','投影仪')
        map.set('陈有红','饮水机')
        console.log(map);

Map.prototype.has()

定义：用于查询指定键的元素是否存在。

语法

Map.has(key)

返回值：如果 Map 对象中存在具有指定键的元素，则返回 true；否则返回 false。

Map.prototype.delete()

定义：用于用于删除 Map 对象中指定的元素。

语法

Map.delete(key)

返回值：如果 Map 对象中的元素存在并已被移除，则为 true；如果该元素不存在，则为 false。

示例

const arr = [1,2,3] //
        const obj = {x:1}
        const fn = function () {}
        const map = new Map([
            [0,'a'],
            ['hello','b'],
            [true,'c'],
            [undefined,'d'],
            [null,'e'],
            // [{x:1},'f'],
            [obj,'f'],
            // [[1,2,3],'g'],
            [arr,'g'],
            // [function () {},'h']
            [fn,'h']
        ])
        map.set('黄永福','投影仪')
        map.set('陈有红','饮水机')
        console.log(map);
        console.log(map.get('黄永福'));
        console.log(map.get('陈有红'));


        map.delete('陈有红')
        console.log(map);

Map.prototype.forEach()

定义：用于遍历Map对象的

语法

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 箭头函数
forEach(() => { /* ... */ } )
forEach((value) => { /* ... */ } )
forEach((value, key) => { /* ... */ } )
forEach((value, key, set) => { /* ... */ } )

// 内联回调函数
forEach(function() { /* ... */ })
forEach(function(value) { /* ... */ })
forEach(function(value, key) { /* ... */ })
forEach(function(value, key, set) { /* ... */ })
forEach(function(value, key, set) { /* ... */ }, thisArg)
  • callbackFn：对Set()对象中的每一个值调用一次回调函数。回调有三个参数
  • value：传入set的每一个值
  • key：传入value的key
  • set：传入set本身

返回值：undefined

示例

let boy1 = {name:'cyh'}
let girl1 = {name:'wl'}
let boy2 = {name:'tl'}

let map = new Map([
    [boy1,'纪律委员'],
    [girl1,'门管理员'],
    [boy2,'插板管理员']
])
map.forEach((value,key,map)=>{
   console.log(value,key,map);
})

Map.prototype.keys()

定义：用来获取Map对象的key (键名)

语法

Map.keys()

返回值：一个新的 Map 迭代器对象。

示例

let boy1 = {name:'cyh'}
let girl1 = {name:'wl'}
let boy2 = {name:'tl'}

let map = new Map([
    [boy1,'纪律委员'],
    [girl1,'门管理员'],
    [boy2,'插板管理员']
])

const a  = map.keys()

console.log(a.next().value);
console.log(a.next().value);
console.log(a.next().value);

Map.prototype.values()

定义：用来获取Map对象的value （键值）

语法

Map.values()

返回值：一个新的 Map 迭代器对象。

示例

let boy1 = {name:'cyh'}
let girl1 = {name:'wl'}
let boy2 = {name:'tl'}

let map = new Map([
    [boy1,'纪律委员'],
    [girl1,'门管理员'],
    [boy2,'插板管理员']
])

const a  = map.values()

console.log(a.next().value);
console.log(a.next().value);
console.log(a.next().value);

Map.prototype.entries()

定义：把可迭代的全部输出出去

Map.prototype.clear()

定义：clear() 方法会删除 Map 对象中的所有元素。

语法

Map.clear()

返回值：undefined

Map和Object的区别

  • 长度
    - map有
    - Object没有
  • 可迭代
    - map可迭代
    - Object不可迭代
  • key
    - map的key可以是任意值
    - Object的key只能是字符串、计算属性、Symbol
  • 顺序
    - map是键值对的有序集合
    - Object是键值对的无序集合
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,701评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,649评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,037评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,994评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,018评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,796评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,481评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,370评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,868评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,832评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,494评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2赞 356

推荐阅读更多精彩内容

  • js考点
    1. undefined 和 null 有什么区别？ 相似之处： 它们属于 JavaScript 的 7 种基本类...
    耶啵_阅读 276评论 0赞 0
  • es6新特性
    ES6 新特性 ES6 新特性 一ES6简介 二块级作用域绑定1 let声明2 const声明Constant D...
    _无为_阅读 845评论 0赞 3
  • 70道JavaScript面试题
    原文章链接https://mp.weixin.qq.com/s?__biz=Mzg3ODAyMzkxOQ==&mi...
    炎奕阅读 350评论 0赞 1
  • 现代JavaScript语言
    这篇文章主要介绍如何编写面向对象的JavaScript。我们先从现代JavaScript语言的基本概念开始介绍，然...
    Leesper阅读 1,255评论 0赞 0
  • JavaScript面试知识点
    前言 针对面试的 JavaScript 知识点整理 1.介绍一下js的数据类型有哪些，值是如何存储的 JavaSc...
    Moon_f3e1阅读 231评论 0赞 0