一、symbol
- 回顾数据类型：
基本类型（原始类型）：
- String
- Number
- Boolean
- Undifined
- Null
- Symbol
引用类型:
- Objects
1.1 创建symbol
1. ES 6 为什么引入 Symbol 类型？
a.为了确保每个属性的名称都是独一无二的，从根本上防止属性名的冲突。
b.引入 Symbol 类型之后，对象的属性名就有了两种类型，一种是 String 类型的数据，另一种就是 Symbol 类型的数据
2. 怎样创建 Symbol 类型的数据呢？
其他 5 种原始类型都有各自的字面量形式，而 Symbol 没有字面量形式，但是可以通过全局的 Symbol 函数创建一个 Symbol 类型的数据。例如
1 let firstName = Symbol();
2 let obj = {};
3 obj[firstName] = '李金健';
4 console.log(obj[firstName])
3.Symbol 函数接收一个可选参数，它可以让你添加一段文本，描述即将创建的 Symbol，方便我们进行阅读和调试。
let firstName = Symbol('This is my first name');4. 我们可以使用 typeof 操作符检测变量的值是否为 Symbol 类型。
<script>
// 1. ES 6 为什么引入 Symbol 类型？
// 为了确保每个属性的名称都是独一无二的，从根本上防止属性名的冲突。
// 引入 Symbol 类型之后，对象的属性名就有了两种类型，一种是 String 类型的数据，另一种就是 Symbol 类型的数据
// 2. 怎样创建 Symbol 类型的数据呢？
// 其他 5 种原始类型都有各自的字面量形式，而 Symbol 没有字面量形式，但是可以通过全局的 Symbol 函数创建一个 Symbol 类型的数据。
let firstName = Symbol();
let lastName = Symbol();
let obj = {};
obj[firstName] = '李金健';
console.log(obj) // {Symbol(): "李金健"}
console.log(obj[firstName]) //李金健
console.log(obj[lastName]) //undefined
// 上面的代码创建了一个名为 firstName 的 Symbol，用它作为 obj 对象的属性名，并为属性复制为 '李金健'，
// 每当你想访问这个属性时一定要使用最初定义的 Symbol。
// 例如 obj[firstName] 可以访问到之前添加的属性值，而使用另外一个 Symbol 类型的值 lastName 就不能访问。
// 也就是说，你定义属性时使用的是哪个 Symbol，访问属性时也要使用使用哪个 Symbol。
// 3. Symbol 函数接收一个可选参数，它可以让你添加一段文本，描述即将创建的 Symbol，方便我们进行阅读和调试。
// let firstName = Symbol('This is my first name');
// let obj = {};
// obj[firstName] = '刘逸云';
// console.log(obj[firstName])
// console.log(firstName)
// 4. 我们可以使用 typeof 操作符检测变量的值是否为 Symbol 类型。
// let firstName = Symbol('This is my first name');
// console.log(typeof firstName); // 'symbol'
// 5. Symbol 的使用场景
// 所有用到可计算属性名的地方，都可以用 Symbol。例如：
// 1> 对象字面量的可计算属性名中
// let firstName = Symbol('This is my first name');
// let obj = {
// [firstName]: '王亚坡'
// };
// 2> 在 Object.defineProperty() 方法中使用
// let lastName = Symbol('This is my last name')
// Object.defineProperty(obj, lastName, { value: '尼古拉斯' });
// 3> 在 Object.defineProperties() 方法中使用
// let firstName = Symbol('This is my first name');
// let lastName = Symbol('This is my last name');
// let obj = {};
// Object.defineProperties(obj, {
// [firstName]: {
// value: '王亚坡',
// writable: false
// },
// [lastName]: {
// value: '尼古拉斯',
// writable: false
// }
// })
// console.log(obj[firstName])
// console.log(obj[lastName])
// console.log(obj)
</script>1.2 使用symbol
<script>
let firstName = Symbol('first name');
let lastName = Symbol('last name');
let obj = {
[firstName]: '杨帅',
[lastName]: '泰坦尼',
age: 20,
gender: '男'
};
// 1. 在遍历对象的属性时，Symbol 属性不会被遍历出来
// for (const key in obj) {
// if (obj.hasOwnProperty(key)) {
// console.log(key)
// }
// }
// Object.keys(obj).forEach(key => {
// console.log(key)
// })
// 2. 使用 Object.getOwnPropertySymbols() 方法获取对象中所有的 Symbol 属性。
Object.getOwnPropertySymbols(obj).forEach(key => {
console.log(key, obj[key])
})
console.log(obj[firstName])
console.log(obj[lastName])
</script>二、set
2.1 创建set集合
<body>
<script>
// 集合，集合中的元素是无序的，并且不能重复的。
// 1. 使用构造函数 Set 创建一个空的集合对象
// const set = new Set();
// 2. 也可以使用数组来初始化 set 集合，Set 构造函数会过滤掉数组中重复的元素。
const set = new Set(['black', 'white', 'gray', 'white']);
// 3. 将集合转换成数组
console.log([...set])
// 4. 向集合中添加元素
// set.add('red')
// set.add('green')
// 5. 由于集合中的元素不能重复，因此添加失败，但是不会抛出错误。
// set.add('red')
// 6. 在 Set 集合中，不会对所存的值进行强制类型转，因此数字 5 与 字符串 '5' 是两个不同的值。
// set.add(5)
// set.add('5')
// 7. 获取集合中元素的数量
// console.log(set.size); // 4
// 8. 判断集合中是否有某个元素
// console.log(set.has('green')); // true
// console.log(set.has('blue')); // false
// 9. 获取集合中的键和值
// console.log(set.keys())
// console.log(set.values())
// 10. 遍历集合中的元素
// set.forEach((value, key, self) => {
// console.log(key, value)
// console.log(self === set)
// })
// 11. 删除集合中的元素
// set.delete(5)
// set.delete('red')
// 12. 清空集合
// set.clear()
console.log(set)
</script>
</body>2.2 set集合应用
<body>
<script>
const set1 = new Set([1, 2, 3, 4]);
const set2 = new Set([3, 4, 5, 6]);
// 1. set1 和 set2 的交集
// 求交集的方式一：
// let intersection1 = new Set();
// set1.forEach(value => {
// if (set2.has(value)) {
// intersection.add(value)
// }
// })
// 求交集的方式二：
// let intersection2 = new Set([...set1].filter(value => set2.has(value)))
// 2. set1 和 set2 的并集
// 求并集的方式一：
// let union1 = new Set([...set1, ...set2])
// 求并集的方式二：
// let union2 = new Set([...set2].reduce((result, value) => {
// if (result.indexOf(value) === -1) {
// result.push(value)
// }
// return result;
// }, [...set1]))
// console.log(union1)
// console.log(union2)
// 3. set2 的补集
let difference1 = new Set([...set1].filter(value => !set2.has(value)))
console.log(difference1)
// 4. set1 的补集
let difference2 = new Set([...set2].filter(value => !set1.has(value)))
console.log(difference2)
</script>
</body>2.3 补充知识点 数组对象的filter方法
<body>
<script>
const array1 = new Array(1, 2, 3, 4);
const array2 = array1.filter(function (value, index, self) {
return value > 2 ? true : false;
}, thisObj)
// filter() 方法的参数：
// callback：回调方法，从数组中每遍历出一个元素就调用一次该方法
// callback 函数的形参：
// value: 当前遍历出的元素
// index: 当前遍历出的元素对应的索引
// self: 数组本身
// thisObj：我们可以用过该参数指定回到函数中 this 的指向。
console.log(array2)
</script>2.4补充知识点 数组对象的reduce方法
<body>
<script>
const array1 = new Array(1, 2, 3, 4);
const array2 = new Array(3, 4, 5, 6);
// 求 array1 中所有的元素的和
// const result = array1.reduce(function (sum, value, index, self) {
// console.log(sum, value)
// return sum += value
// }, 0)
// 求 array1 和 array2 的并集（合并数组并去重）
array2.reduce((result, value) => {
if (result.indexOf(value) === -1) {
result.push(value)
}
return result;
}, array1)
console.log(array1)
</script>
</body>2.5补充知识点 数组对象的weakset方法
<body>
<script>
/*
WeakSet 集合与 Set 集合类似，集合中的元素是无序的，并且不能重复的。
但是 WeakSet 集合中的元素只能是对象（引用类型），不能是其他类型。
WeakSet 集合只存储对象的引用，并不存储对象的原始值；集合中的引用如果是对象唯一的引用，则会被回收并释放相应的内存。
*/
const weakset = new WeakSet()
// 也可以在创建集合时向集合中添加元素
// const weakset = new WeakSet([{}, [], new Date()])
// 源对象
let obj = {
name: '张三'
};
// WeakSet 集合支持 3 个方法，add()，has()，delete()
// 向集合中添加对象
weakset.add(obj)
// weakset.add([1, 2, 3])
// 判断集合中是否具有某个对象
console.log(weakset.has(obj))
// 删除集合中的对象
// weakset.delete(obj);
// 清除变量 obj 对源对象的引用
obj = null;
// 过一段时间之后，weakset 集合对源对象的引用也会被删除。
setInterval(function() {
console.log(weakset)
}, 1000)
/*
const set = new Set()
let obj = {};
set.add(obj);
// 移除变量 obj 对空对象的引用
obj = null;
console.log(set.size); // 1 */
</script>
</body>2.6补充知识点 数组对象的map方法
<body>
<script>
// 创建一个空的 Map 集合
// const map = new Map();
// 创建一个具有初始元素的集合
const map = new Map([['firstName', '黄聪聪'], ['age', 20]])
// 向 map 集合中添加键值对
// map.set('fullName', '刘旭凯');
// map.set('age', 19);
// map.set('fullName', '吕鑫洋'); // 修改了 fullName 键名对应的值
// map.set('lastName', '吕鑫洋'); // 值可以相同，只要键名不同即可
// 根据键值名获取对应的值
console.log(map.get('fullName')); // '刘旭凯'
console.log(map.get('age')); // 19
console.log(map.get('gender')); // 'undefined'
// 根据键名删除对应的值
map.delete('age');
// 判断集合是否有某个键值对
console.log(map.has('age')); // false
console.log(map.has('fullName')); // true
// 获取所有的键名
console.log(map.keys())
// 获取所有的键值
console.log(map.values())
// 获取所有的键值对
console.log(map.entries())
// 获取集合中元素的数量
console.log(map.size);
// 变量map集合
map.forEach(function (value, key, self) {
console.log(key, value, self)
console.log(this)
}, map)
</script>
</body>