一,简介
对于封装set(),map()方法,首先就要先学会认识set(),map()这两个方法
二,认识set(),map()
set()
set()这个方法是用来存放不重复的数组的一个方法,其常用的原型方法有add(),delete(),has(),clear(),
另外还有可以遍历迭代的方法 for…of,也有重写forEach
//set集合
const s1 = new Set([1,5,3,4,1,24,25,145,555]);
console.log(s1);
//原型方法
//add()往set集合中添加数据
s1.add(2);
console.log(s1)
//has()判断数据是否存在
s1.has(1)
console.log(s1)
//delete 删除
s1.delete(1)
console.log(s1)
//size set集合中的长度
console.log(s1.size)
//clear 清空
// s1.clear()
// console.log(s1)
map()
map()这个方法相当于一个键值对,内部是一个二维数组,同时也要注意键名只能是字符串,获取数据的数量的时候不方便,键名容易和原型上的名称发生冲突。
其常用的原型方法有size(),delete(),clear(),get(),set(),has(),同时也有遍历for…of ,也有重写方法forEach
//map
const s2 = new Map([['a' , 0],['b' , 123],['c' , 456],['d' , 789]])
console.log(s2)
//原型方法
//size map集合长度
console.log(s2.size);
//set() 取值
s2.set('e' , 1112)
console.log(s2)
//get() 存值
s2.get({})
console.log(s2);
//has 判断数据是否存在
s2.has(a)
console.log(s2)
//delete 删除
s2.delete(a)
console.log(s2)
//clear 清空
s2.clear()
console.log(s2)
三,封装
既然认识了解了map(),set()这两个方法,接下来直接来重点的封装这两个方法
封装map
class Mymap{
//通过constructor判断是否数组,然后在里面执行
constructor(iterator = []){
//判断输入的数组是否是可迭代的对象
if(typeof iterator[Symbol.iterator] !== 'function'){
//返回错误
throw new TypeError(`所输入的内容${iterator}不是一个可迭代的对象`)
}
//数组储存数据
this._datas = [];
//因为之前的判断了该数组是可迭代的对象,可以使用for...of遍历数组
for(const item of iterator){
//再次判断
if(typeof item[Symbol.iterator] !== 'function'){
throw new TypeError(`所输入的内容${item}不是一个可迭代的对象`)
}
//声明一个常量接收遍历的数组
const iter = item[Symbol.iterator]();
//声明 key , value两个常量在数组里面的键和值分离
const key = iter.next().value;
const value = iter.next().value;
this.set(key,value);
}
}
//set()里面有两个参数,一个是键,另一个是值,通过调用_getObj方法遍历数组里的值,遍历后然后将数据写入—_datas中
set(key , value){
const obj = this._getObj(key);
if(obj){
obj.value = value;
}else{
this._datas.push({
key,
value
})
}
}
//遍历数组 _datas的数据,然后调用isEqual方法,返回值
_getObj(key){
//键名重复
for(const item of this._datas){
if(this.isEqual(item.key , key)){
return item;
}
}
}
//判断键值对是否为零,如果键值对===0就返回true,不是就返回flase
isEqual(data1 , data2){
if(data1 === 0 && data2 === 0){
return true;
}
return Object.is(data1,data2);
}
//get()这个方法就一个参数,键,通过调用_getObj遍历数组,取出对应的值
get(key){
const item = this._getObj(key);
if(item){
return item.value
}
return undefined
}
//清空处理,将数组的长度等于0,清空
clear(){
return this._datas.length = 0;
}
//长度,返回数组的.length
get size(){
return this._datas.length
}
//查询,一个参数,键,通过调用_getObj 返回
has(key){
return this._getObj(key) !== undefined;
}
//删除处理,一个参数,键,通过循环_datas的长度,声明ele常量存储,然后遍历对于的键值,删除
delete(key){
for(let i = 0; i < this._datas.length; i++){
const ele = this._datas[i];
if(this.isEqual(ele.key,key)){
this._datas.splice(i,1);
return true;
}
}
return false;
}
//重写,一个参数,回调函数,通过遍历获取_datas
forEach(callback){
for(const item of this._datas){
callback(item.value , item.key , this);
}
}
//查看可迭代
*[Symbol.iterator](){
for(const item of this._datas){
yield [item.key,item.value];
}
}
}
let mp = new Mymap([
["a" , 1],
["b" , 2],
["c" , 3],
["d" , 4],
["e" , 5]
])
set()
class mySet{
//通过constructor判断是否数组,然后在里面执行
constructor(iterator = []){
//判断输入的数组是否是可迭代的对象
if(typeof iterator[Symbol.iterator] !== 'function'){
//返回错误
throw new TypeError(`所输入的内容${iterator}不是可迭代的对象`);
}
数组储存数据
this._datas = [];
//直接调用add方法,遍历iterator
for(const item of iterator){
this.add(item);
}
}
//长度,返回_datas的长度.length
get size(){
return this._datas.length;
}
//添加,一个参数,通过查找数组里的数据没有添加的数据,就往数组里添加
add(data){
if(!this.has(data)){
this._datas.push(data);
}
}
//查询,一个参数,调用 isEqual
has(data){
for(const item of this._datas){
if(this.isEqual(data,item)){
return true;
}
}
}
/判断是否为零,如果===0就返回true,不是就返回flase
isEqual(data1 , data2){
if(data1 === 0 && data2 === 0){
return true;
}
return Object.is(data1 , data2);
}
//清空,将数组的长度归零
clear(){
this._datas.length = 0;
}
//删除处理,一个参数,通过循环_datas的长度,声明ele常量存储,然后遍历对于的数据,删除
delete(data){
for(let i = 0; i < this._datas.length;i++){
const ele = this._datas[i];
if(this.isEqual(data,ele)){
this._datas.splice(i,1);
return true;
}
}
return false;
}
//方法重写,回调函数
forEach(callback){
for(const item of this._datas){
callback(item , item , this);
}
}
//方法迭代
*[Symbol.iterator](){
for(const item of this._datas){
yield item;
}
}
}
let s = new mySet([5,25,5,14,12,142,14,14,12]);