set,Map 和数组的扩展方法

5.Set和Map 类型

5.1 Set 类型

一种无重复值得有序列表

let set = new Set();
//1.添加
set.add(1);
set.add(2);
set.add(2);// 重复值会被忽略
console.log(set);// Set(2) {1, 2}
//删除
set.delete(2);
console.log(set.has(1));// 判断值是否在集合中。

set.add(12);
console.log(set.size);//是属性,不需要加括号
set.clear();// 清空集合
console.log(set);

遍历集合

set 中没有键通过set[0] 是获取不到对应的值的，es6规定将set的每一项同时认定为键和值。值就是键，键就是值，由此会出现key和val相等的现象。即集合中的元素，既是值又是键。

let set = new Set([1,2,3,4,5,6,7]); // 直接将数组转换为集合
set.forEach((val,key)=>{
    console.log(val);
    console.log(key);
})// 
>>> 1,1 2,2 ... 7,7

集合转换为数组，使用扩展运算符...直接将集合转换为对应的数组。

let set = new Set([11,22,33,33,44,55,66]);
// 使用扩展运算符
let arr = [...set];
console.log(arr);// 实现数组的 
>>>(6)[11, 22, 33, 44, 55, 66]

weakset 使用较少，但是他可以释放集合中的对象元素。

// set中的对象引用无法被释放
let set = new Set(),key = {};
set.add(key);
// 取消原始引用
key = null;
// 但是打印之后发现没用，因为set中的key的引用没有销毁
console.log(set.size);

key = [...set][0];
console.log(key);

// 为了解决以上问题，es6中包含了Weak Set,该类型只允许存储对象的弱引用，而不能存储基本类型的值。对象的弱引用在它自己成为该对象的唯一引用时，不会阻止垃圾回收
let set = new WeakSet(),key = {};
set.add(key);
console.log(set);

// 取消原始引用
key = null;
// console.log(set);

// 但是打印之后发现没用，因为set中的key的引用没有销毁
// console.log(set.size);

WeakSet 注意事项

1.不能传入非对象类型的参数
2.不可迭代
3.没有forEach()
4.没有size属性

5.2 Map 类型

Map 类型是键和值的有序列表，键和值的可以是任何类型。

// 创建map
let map = new Map();
// 设置值
map.set('name',"章北海");
map.set('age',40);
// 获取值
console.log(map);// {'name' => '章北海', 'age' => 40}
console.log(map.get('name')); //章北海
console.log(map.has('age'));// >>> true ,检查相关的值是否存在
console.log(map.size);// >>> 2
map.clear();// 清空Map
console.log(map);
map.set(['a',['b','c']],"Hello");
console.log(map);// >>> {Array(2) => 'Hello'}

遍历Map

let map = new Map([['a',1],['b',2]]);
console.log(map); //Map(2) {'a' => 1, 'b' => 2}
map.forEach((val,key,ownerMap)=>{
    console.log(key,val);// a,1
    console.log(ownerMap);//{'a' => 1, 'b' => 2}
})

6.数组扩展

6.1 from 函数

// 1.from() 将伪数组转换为数组
function add(){
    console.log(arguments);// Arguments(4)
    let arr = Array.from(arguments);// 直接将多于的参数转换为数组
    console.log(arr); //(4) [1, 2, 3, 4]
}
add(1,2,3,4);// ES6中也可以使用相关的`...`扩展运算符。

form 函数的第二个参数（可选），用来对每个元素进行处理

/* <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul> */

// li 标签的值写入到数组中
let liItems = document.getElementsByTagName('li'); // 获取所有li标签。
let licont = Array.from(liItems,ele => ele.textContent);// 使用Dom属性获取相关的值。
console.log(licont);//
>>> (4) ['1', '2', '3', '4']

6.2 of() 函数

将一组值转换为数组，用途不太广泛

console.log(Array.of(1,2,3,5,6,7,8,8));
>>> (8)[1, 2, 3, 5, 6, 7, 8, 8]

6.3 copywith

//3. copyWithin() 数组内部将制定位置的元素复制到其他位置,返回当前数组
// 上面代码表示将从3号位直到数组结束的成员（3和10），复制到从0号位开始的位置，结果覆盖了原来的1和2。
console.log([1, 2, 9, 3, 10].copyWithin(0, 3));// 
>>> (5) [3, 10, 9, 3, 10]

6.4 find 和 findIndex 函数

find()找出第一个符合条件的数组成员。

let num = [1,2,3,4,5,6].find(n =>{return n>3});// 筛选条件为对应的函数。
console.log(num);// 结果为满足条件的第一个值。
>>> 4

findindex(),返回第一个满足条件值的索引。

let num = [1,2,3,4,5,6].findIndex(n =>{return n>3});// 筛选条件为对应的函数。
console.log(num);// 结果为满足条件的第一个值。对应的索引如下。
>>> 3

6.5 entries 函数

entries(),keys(),values(),用于遍历数组，返回一个遍历器，可以用for ..of ..语句进行遍历

keys() 对键名的遍历【索引遍历】
values() 对键值的遍历【】
entries() 对键值对的遍历

for (let index of ['a','b'].keys()){
    console.log(index);// 0,1
}

for (let elem of ['a','b'].values()){
    console.log(elem);// a,b
}
for (let[index,elem] of ['a','b'].entries()){
    console.log(index,elem); // 0 'a' ,1 'b'
}

相当于对数组的一种遍历。

不使用for .. of 语句循环遍历，可以手动调用遍历器对象的next()方法，用于进行遍历。

let letter = [1,2,3];
let en = letter.entries();
console.log(en.next());//value: Array(2), done: false}
console.log(en.next().value);// [1,2]
console.log(en.next().value);// [2,3]
console.log(en.next().value);// undefined

6.6 includes 与 indeOf 函数

includes 检查相关的值是否存在于数组中，存在返回true,不存在返回false，indexOf函数，检查索引是否存在数组中有对应的值,存在返回1,不存在返回-1。

console.log([1,2,3].includes(2));// true
console.log([1,2,3].includes(4));// false
console.log([1,2,3].indexOf(2));// 1
console.log([1,2,3].indexOf(20));// -1

posted @ 2022-08-06 15:12 紫青宝剑阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

紫青宝剑

set,Map 和 数组的扩展方法