目录
1.扩展运算符 (...)
1.对象的扩展运算符
扩展运算符是三个点(...)。用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。
只要是具有遍历器的类数组对象(可以遍历),都可以利用扩展运算符转为真正的数组,同样Map也可以,来看这样一个例子:
<script>
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map];
console.log(arr);
</script>
结果:
用...操作符,将 Set 转 Array
<script>
// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符,将 Set 转 Array
var myArray = [...mySet];
console.log(myArray); // ['value1', 'value2', 'value3']
</script>
1.扩展运算符运用举例说明:
<script>
//新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中。
let a = {x:3,y:4};
let b = {...a};
console.log(b); //{x: 3, y: 4}
</script>
2.用于合并两个对象
<script>
//新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中。
let a = {x:3,y:4};
let b = {m:1,n:2};
let c = {...a,...b};
console.log(c); //{x: 3, y: 4, m: 1, n: 2}
</script>
注意点:合并时,如果自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
<script>
let a = {x:1,y:2};
let c = {...a,x:3,z:5};
console.log(c); //{x: 3, y: 2, z: 5} x:1被覆盖为x:3
</script>
2. 数组的扩展运算符 (三个点相当于数组展开)
1.复制数组
扩展运算符提供了复制数组的简便写法。
<script>
let arr1 = [1,2];
//取出参数对象的所有可遍历属性,然后拷贝到当前对象
let arr2 = [...arr1];
console.log(arr2); //(2) [1, 2]
</script>
2.合并数组
<script>
let arr1 = [1,2];
let arr2 = [3,4];
//取出参数对象的所有可遍历属性,然后拷贝到当前对象
let arr3 = [...arr1,...arr2];
console.log(arr3); //(4) [1, 2, 3, 4]
//let arr3 = [...arr2,...arr1];
//console.log(arr3); //(4) [3, 4, 1, 2]
</script>
3.字符串变数组
<script>
let a = [..."helloGirl!"];
console.log(a);//['h', 'e', 'l', 'l', 'o', 'G', 'i', 'r', 'l', '!']
</script>
2.Set()对象里面存数据方式
01. 调用add()方法 ,里面参数为要存的数据
<script>
let setvalue2 = new Set();
setvalue2.add(1);
setvalue2.add(null);
setvalue2.add(undefined);
setvalue2.add(function(){});
setvalue2.add([1,2,3]);
console.log(setvalue2); //Set(5) {1, null, undefined, ƒ, Array(3)}
</script>
02. 写到Set()括号里面:
Set 函数可以接受一个数组(或类似数组的对象)作为参数,用来进行数据初始化。
eg: let i = new Set([1, 2, 3, 4, 4]); 会得到 set{1, 2, 3, 4,}
<script>
let set = new Set(['red', 'green', 'blue']);
console.log(set);
</script>
<script>
//字符串也是一个类数组 想到字符串可以去下标
let set1 = new Set("hello");
console.log(set1); //Set(4) {'h', 'e', 'l', 'o'}
</script>
3.Set函数的语法
01.Set 对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。
也可通俗的说是:Set类似于数组,但是Set成员的值都是唯一的,没有重复的值,所以可以利用Set里面没有重复的值这一特性,实现去重操作。
对 允许存储任何类型的唯一值 的理解:Set数据容器里面可以存任何数据类型数据,但是相同的数据(同一引用空间的数据)只能存一次,重复存也只能存入一次。但是形式相同,不是同一内存空间数据可以一起存入,例如:{ } 和 { }
<script>
let setvalue = new Set();
setvalue.add(1);
setvalue.add(1);
setvalue.add({});
setvalue.add({});
console.log(setvalue); //Set(3) {1, {…}, {…}}
</script>
02.Set()本身是一个构造函数(ES6中提出),通过new关键字来生成Set数据结构(集合)
<script>
let setvalue = new Set();
</script>
03. 虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true),但是Set认为NaN等于自身
<script>
console.log(NaN !== NaN);//true
let setvalue = new Set();
let a = NaN;
let b = NaN;
setvalue.add(a);
setvalue.add(b);
console.log(setvalue);//Set(1) {NaN}
</script>
04.Set数据容器的size属性含义是:返回Set实例的成员总数。所以形式相同,不是同一内存空间数据一起存入,例如:{ } 和 { },size会把这两个成员都记录
<script>
let setvalue = new Set();
setvalue.add({});
setvalue.add({});
console.log(setvalue);
</script>
4. Set 实例的方法
Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)
1.操作方法有4个
01.内置方法 :add(value) 添加某个值,返回 Set 结构本身。
<script>
let setvalue = new Set();
//因为 add(value):添加某个值,返回 Set 结构本身
//所以setvalue.add(1)返回的是这个 Set 结构
setvalue.add(1).add(2).add(3);
console.log(setvalue); //Set(3) {1, 2, 3}
</script>
02.内置方法:delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
<script>
let setvalue = new Set();
setvalue.add(1).add(2).add(3);
console.log(setvalue.delete(1)); //删除成功返回true
console.log(setvalue.delete(4)); //没有4,删除失败 返回false
console.log(setvalue); //Set(2) { 2, 3}
</script>
删除成功,返回true; 删除失败返回 false
03.内置方法:has(value):该方法返回一个布尔值,表示该值是否为Set的成员。
<script>
let setvalue = new Set();
setvalue.add(1).add(2).add(3);
console.log(setvalue.has(1)); //true
console.log(setvalue.has(4)); //false
</script>
04.内置方法:clear():清除所有成员,没有返回值。
<script>
let setvalue = new Set();
setvalue.add(1).add(2).add(3);
setvalue.clear(); //清楚所有成员,没有返回值
console.log(setvalue); //Set(0)
</script>
2.遍历方法4个 (Set.prototype.)
01. 内置方法:keys():返回键名的遍历器
02. 内置方法:values():返回键值的遍历器
注意点:Set.prototype.keys()返回Set实例对象的键名遍历器。但由于Set没有键名,只有键值,故keys()方法和Set.prototype.values()方法的返回值是一致的,也可以理解成keys()方法是values()方法的别名 (出于与 Map 对象保持相似的原因),返回的都是键值。
03. 内置方法:entries():返回键值对的遍历器
Set.prototype.entries()方法返回一个键值对的遍历器。由于Set对象实例没有键名,故返回的迭代器的每一项的值都是两个相同值组成的数组。
<script>
let set = new Set(['red', 'green', 'blue']);
// 返回键名的遍历器 keys()
for (let item of set.keys()) {
console.log(item);
}
console.log("-----------------------------------");
//内置方法:values():返回键值的遍历器
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
console.log("-----------------------");
//
//内置方法:entries():返回键值对的遍历器
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
</script>
04. 内置方法:forEach():使用回调函数遍历每个成员 取数据
Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。
4、Set 对象的应用
1.去重
<script>
// 数组去重
let a = [...new Set([1, 3, 3, 5, 7])];
console.log(a); //(4) [1, 3, 5, 7]
// 字符串去重
let b = [...new Set('ababbc')].join('');// "abc"
console.log(b); //abc
</script>
分析: [...new Set([1, 3, 3, 5, 7])]; new Set([1, 3, 3, 5, 7])生成了一个 Set()数据,因为是互异性,所以去重后结果是Set(4) {1, 3, 5, 7},然后取出参数对象的所有 可遍历属性 ,然后拷贝到当前对象,所以把其把其可遍历的属性拷贝到[ ]中,就是(4) [1, 3, 5, 7]
分析:把传入Set()的字符串参数'ababbc'去重后,取出可遍历数据["a","b","c"],再把数组元素用分隔符分开后传出。因为传入jion的参数是"",所以没有分隔符,结果就是"abc"
2.并集(求与)
<script>
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var c = new Set([...a, ...b]);
console.log(c); //Set(4) {1, 2, 3, 4}
</script>
3.交集(求交)
学完箭头函数再回来写。。。
4.差集
学完箭头函数再回来写。。。
Set数据(集合) 与 Map数据(字典) 的区别:
共同点:集合、字典 可以储存不重复的值。
不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存。