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是键值对的无序集合
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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