ES6-15 map与set

Promise、Proxy、Map、Set这些ES6新增的api无法用babel实现语法降级，需要使用到polyfill

Set

  • 成员是唯一的，不能重复
  • 有iterator接口，可迭代
  • 具有iterator接口的所有类型，都能作为new Set()的参数，如类数组、数组
    在这里插入图片描述
const myS = new Set()
console.log(myS)
myS.add(1) // 只能传1个参数
console.log(myS)
myS.add(1) // 添加重复的则无效果,成员是唯一的
console.log(myS)
console.log(new Set([1])) // 初始化传入数组

在这里插入图片描述

  • 对引用值的判断依然是地址是否相同
console.log(new Set([NaN,NaN])) // 只会添加一个NaN
const obj = {}
const o2 = obj
console.log(new Set([{}, {}])) // 不同 添加2个
console.log(new Set([obj, o2])) // 引用相同 添加1个

原型属性及方法

size属性返回长度

add方法返回set实例，链式调用

const myS = new Set()
myS.add(1).add(2)
console.log(myS)

在这里插入图片描述

delete方法 返回值是删除与否

const myS = new Set([1, 2, 3])
console.log(myS.delete(1)) // true
console.log(myS, myS.size) // Set(2) {2, 3} 2
console.log(myS.delete(1)) // false

clear方法

const myS = new Set([1, 2, 3])
console.log(myS.clear()) // undefined
console.log(myS) // Set(0) {}

has方法 判断是否有该值

const myS = new Set([1, {}, 3])
console.log(myS.has(1)) // true
console.log(myS.has(4)) // false
console.log(myS.has({})) // false

set和obj不一样，他的操作是实时的，即使在操作前打印，看到的也是全部操作执行完的结果

遍历方法 keys/values/entries

  • 由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
const myS = new Set([1, 2, 3])
console.log(myS.keys()) // 键名的迭代器
console.log(myS.values()) // 键值的迭代器
console.log(myS.entries()) // 键值对的迭代器
for(let i of myS.keys()){console.log(i)
}
for(let i of myS.values()){console.log(i)
}
for(let i of myS.entries()){console.log(i)
}

在这里插入图片描述

  • set实例本身也能遍历
const myS = new Set([1, 2, 3])
for(let i of myS){console.log(i) // 1 2 3
}
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values) // true
console.log(Set.prototype[Symbol.iterator] === Set.prototype.keys) // true

forEach方法

const myS = new Set([1, 2, 3])
myS.forEach((val, key, set) => {console.log(val, key, set)
})

在这里插入图片描述

set转数组/数组去重

  • 用…展开，再放入数组
const myS = new Set([1, 2, 3])
console.log([...myS]) // [1, 2, 3]
console.log([...new Set([2, 2, 3, 4, 5])]) // [2, 3, 4, 5]

和数组map方法结合使用

const myS = new Set([1, 2, 3])
const myS2 = new Set([...myS].map(item => item * 2))
console.log(myS2) // Set(3) {2, 4, 6}

const arr = [1, 0, 1, 2]
console.log(new Set([...arr].map(parseInt))) // Set(3) {1, NaN, 2}

和Array.from结合

let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

实现∩ ∪ 差集 filter has结合使用

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

map

  • 键可以是对象
    在这里插入图片描述
const m = {}
const x = {id:1}
const y = {id:2}
m[x] = "foo"
m[y] = "bar"
console.log(m[x]) // bar
console.log(m[y]) // bar

Map原型方法、属性

set方法设置

  • set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
const m = new Map()
const x = { id: 1 }
const y = { id: 2 }
m.set(x, 'foo').set(y, 'bar')
console.log(m)
console.log(m.get(x)) // foo
console.log(m.get(y)) // bar

在这里插入图片描述

  • 作为构造函数，Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
  • 键名相同时会覆盖
const map = new Map([['name', '张三'],['title', 'Author']
]);map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

let items = [['name', 'Lee'], ['title', 'Teacher']]
let map = new Map()
items.forEach(([key, value]) => {map.set(key, value)
})
console.log(map)

let map = new Map()
map.set(-0, 1)
console.log(map.get(+0)) // 1
map.set(NaN, 2)
console.log(map.get(NaN)) // 2

delete方法

  • 删除某个键，返回true。如果删除失败，返回false。
const m = new Map();
m.set(undefined, 'nah');
console.log(m.delete(undefined)) // true
console.log(m.delete(1)) // false

clear

  • clear方法清除所有成员，没有返回值。

has

  • has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。
Map.prototype.keys()：返回键名的遍历器。
Map.prototype.values()：返回键值的遍历器。
Map.prototype.entries()：返回所有成员的遍历器。
Map.prototype.forEach()：遍历 Map 的所有成员。

const map = new Map([['F', 'no'],['T', 'yes'],
]);for (let item of map.entries()) {console.log(item);
}
// ["F", "no"]
// ["T", "yes"]
// 或者
for (let item of map) {console.log(item);
}
// ["F", "no"]
// ["T", "yes"]
console.log(map[Symbol.iterator] === map.entries) // true// 解构
for (let [key, value] of map.entries()) {console.log(key, value);
}

Map转为数组

  • …可以将部署了迭代器接口的结构转换为数组
const map = new Map([['F', 'no'],['T', 'yes'],
]);
console.log([...map]);

Map转为对象

  • 条件，键名为字符串
let map = new Map()
map.set(true, 7).set('foo', ['abc'])
let obj = {}
for (let [key, value] of map) {obj[key] = value
}
console.log(obj)

在这里插入图片描述

对象转为map

const obj = {foo: [1, 2],bar: 1
}
let map = new Map()
for (let k in obj) {map.set(k, obj[k])
}
console.log(map)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/250988.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ES6-16 WeakMap与WeakSet、proxy与reflect

ES6-16 WeakMap与WeakSet、proxy与reflect

WeakMap/WeakSet 原型上不存在遍历方法(没有部署iterator接口)成员只能是对象垃圾回收机制不考虑对成员对象的应用 WeakSet/WeakMap 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象…
阅读更多...
ES6-17 class与对象

ES6-17 class与对象

class 模拟类的方式语法糖（把以前的写法换了一个方式） 类内部的方法是不可枚举的 ES5用Object.assign拓展的原型属性是可枚举的 function Point(x, y) {this.x x;this.y y; } // 这样定义的原型上方法eat\drink是可枚举的 Point.prototype Object…
阅读更多...
算法 --- 二叉树的最大深度

算法 --- 二叉树的最大深度

思路: 1.二叉树的深度,等于Max(左子树最大深度,右子树最大深度) 1 2.节点不存在时,此时的深度为0 3.当节点存在,左右子树不存在时(此时为叶子节点) 返回1 /*** Definition for a binary tree node.* function TreeNode(val) {* this.val val;* this.left this.righ…
阅读更多...
ES6-18/19 异步的开端-promise

ES6-18/19 异步的开端-promise

ES6-18异步的开端-promise ES6-19 promise的使用方法和自定义promisify try catch只能捕获同步异常，不能捕获异步的 等待所有异步都执行完，打印结果，比较笨拙的方法，在每个异步操作加arr.length 3 && show(arr) Promis…
阅读更多...
算法 --- 平衡二叉树

算法 --- 平衡二叉树

解题思路: 1.首先写一个返回深度的函数d 2.写一个遍历函数t 3.在t中首先判断,r是否为空(为空则此时就是平衡二叉树,返回true),然后判断是否为叶子节点(r.left null && r.right null)若是则返回true,最后判断,其左子树的深度与右子树的深度之差是否大于1.若是则返回fal…
阅读更多...
【co】ES6-20/21 iterator与generator

【co】ES6-20/21 iterator与generator

ES6-20 iterator与generator ES6-21 async与await、ES6的模块化 try catch不能捕获异步异常 try catch是同步代码 try {setTimeout(() > {console.log(a)}) } catch (e) {console.log(e) }iterator 内部迭代器：系统定义好的迭代器接口（如数组Symbol…
阅读更多...
驱动芯片

驱动芯片

一 LED驱动芯片： 1.1 TM1640:16位数码管驱动芯片，2线制控制（CLK/DIN）,SCLK低电平时DIN输入，而SCLK高电平时保持DIN保持不变；开始传输：SCLKH时DIN由高变低，停止传输SCLKH时DIN由由低变…
阅读更多...
confusion_matrix（混淆矩阵）

confusion_matrix（混淆矩阵）

作者：十岁的小男孩 凡心所向，素履可往 目录 监督学习—混淆矩阵 是什么？有什么用？怎么用？ 非监督学习—匹配矩阵 混淆矩阵 矩阵每一列代表预测值，每一行代表的是实际的类别。这个名字来源于它可以非常容…
阅读更多...
Python 21 Django 实用小案例1

Python 21 Django 实用小案例1

实用案例 验证码与验证 KindEditor 组合搜索的实现 单例模式 beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow1、首先需要借助pillow模块用来画一个验证码图形，这里单独封装了一个py文件，调用一个方法就好了 1 #!/user/bin/env python…
阅读更多...
数据恢复软件

数据恢复软件

链接：https://pan.baidu.com/s/1n6x5vhW-3SY8MAvvnqVtog 密码：thh0转载于:https://www.cnblogs.com/huanu/p/9452039.html
阅读更多...
VMware

VMware

1.VMware软件安装： https://jingyan.baidu.com/article/9f7e7ec09da5906f281554d6.html 2，镜像文件下载地址：http://www.cnbeta.com/articles/tech/566773.htm 有图形界面。 或是在官网：https://wiki.centos.org/Download 2.cento…
阅读更多...
【重要】ES6-23 JavaScript模块化

【重要】ES6-23 JavaScript模块化

前端js模块化的演变发展 模块化解决的问题 传统模块化、插件化 CommonJS AMD/CMD ES6模块化 ES6以前 没有js引擎 一开始js写在html的script标签里js内容增多，抽取出index.js文件，外部引入js再增加，index.html对应index.js index2.html对应ind…
阅读更多...
jquery --- 多选下拉框的移动(穿梭框)

jquery --- 多选下拉框的移动(穿梭框)

效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected EOF, got # at position 3: (#̲id option:selec…(#id option:not(:selected)) 下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解 添加选中到右边: // …
阅读更多...
ES6-24 生成器与迭代器的应用

ES6-24 生成器与迭代器的应用

手写生成器 先done再false，不然index就提前了一步1 var arr [1,2] function generator(arr){var i 0;return{next(){var done i > arr.length ? true : false,value done ? undefined : arr[i];return {value : value,done : done} }} } var gen gener…
阅读更多...
jquery --- 收缩兄弟元素

jquery --- 收缩兄弟元素

点击高亮的收缩兄弟元素. 思路: 1.点击的其实是tr.(类为parent) 2.toggleClass可以切换样式 3.slblings(’.class’).toggle 可以根据其类来进行隐藏显示 代码如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"><style>.pa…
阅读更多...
Webpack基础

Webpack基础

path.resolve // 只要以/开头&#xff0c;就变为绝对路径 // ./和直接写效果相同 var path require("path") //引入node的path模块path.resolve(/foo/bar, ./baz) // returns /foo/bar/baz path.resolve(/foo/bar, baz) // returns /foo/bar/baz path.res…
阅读更多...
LeetCode：二叉树相关应用

LeetCode：二叉树相关应用

LeetCode&#xff1a;二叉树相关应用 基础知识 617.归并两个二叉树 题目 Given two binary trees and imagine that when you put one of them to cover the other, some nodes of the two trees are overlapped while the others are not. You need to merge them into a new …
阅读更多...
jquery --- 网页选项卡

jquery --- 网页选项卡

点击,不同的tab_menu,显示不同的tab_box 注意点: 1.获取ul下,当前li的编号. $(‘div ul li’).index(this) 2.显示ul下编号为$index的li -> $(‘ul li’).eq($index) <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style&g…
阅读更多...
Webpack进阶（二）代码分割 Code Splitting

Webpack进阶（二）代码分割 Code Splitting

源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入&#xff08;如lodash包&#xff09;的代码 1mb若更新了业务逻辑代码&#xff0c;但在浏览器运行时每次都下载2mb的index.js显然不合理&#xff0c;第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.re…
阅读更多...
5177. 【NOIP2017提高组模拟6.28】TRAVEL (Standard IO)

5177. 【NOIP2017提高组模拟6.28】TRAVEL (Standard IO)

Description Input Output Solution 有大佬说&#xff1a;可以用LCT做。&#xff08;会吗&#xff1f;不会&#xff09; 对于蒟蒻的我&#xff0c;只好用水法&#xff08;3s&#xff0c;不虚&#xff09;。 首先选出的泡泡怪一定是连续的一段 L&#xff0c; R 然后 L 一定属于虫…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023