续~ES6 新语法 （symbol、set集合、 数组对象的filter（），reduce（），weakset（），map（）方法）
一、symbol
- 回顾数据类型：
基本类型（原始类型）：
- String
- Number
- Boolean
- Undifined
- Null
- Symbol
引用类型:
- Objects
1.1 创建symbol
1. ES 6 为什么引入 Symbol 类型？
1 let firstName = Symbol();
2 let obj = {};
3 obj[firstName] = '李金健';
4 console.log(obj[firstName])
let firstName = Symbol('This is my first name');
<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>
续~ES6 新语法 （symbol、set集合、 数组对象的filter（），reduce（），weakset（），map（）方法）的更多相关文章
- ES6新语法
ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...
- ES6新语法之let关键字；有别于传统关键字var的使用
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
- ES6新语法的介绍
对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring
- ES6入门五：箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- php删除多重数组对象属性，重新赋值的方法
php删除多重数组对象属性,重新赋值的方法 实例:sphinx搜索出来的结果,要去掉某个属性值:$cl = new SphinxClient ();$query = $cl->Query ( $ ...
- ES6新语法概览
简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委员会(TC39)制 ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- 总结常见的ES6新语法特性。
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- ES6 | ES6新语法 在编码实践中的应用
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
随机推荐
- iOS 常用算法之设计一个算法,验证某字符是否为合法IPV4字符
浅析 : 一个IPV4字符由3个大于0小于255的数字 以及 3个点构成, 所有我们需要判断小数点数量是否满足条件, 以及小数点隔开的每部分是否满足条件即可. 思路: 1. 校验是否有3个小数点; 2 ...
- Android O的通知渠道适配
在 Android O 以后,Google引入了通知通道的概念,如果目标API大于 Android O ,不直指定通知渠道是不能发送通知的. 这里放一个我写好的通知方法,大家可以适当的改改再用,*当 ...
- linux用户管理-用户的基本操作
目录 linux用户管理-用户的基本操作 用户相关的命令 linux用户管理-用户的基本操作 什么是用户 用户指能够正常登录linux或windows系统 区别 本质都是登录系统的,只不过Linux支 ...
- shell脚本一次性将tab制表符改为4空格的方法
问题描述: 今天需要修改一些bash脚本,因为考虑到pycharm里面能够直接写,而我用pycharm比较多,所以直接用pycharm写了,由于改的那个bash脚本是别的同事写的,里面的缩进都是用的T ...
- MYSQL第一课
rm-rf /* 不能用 完全删除 数据库不能直接存储数据 table 表 DB 数据库 DBMS 数据库操作系统 SQL 结构化查询语言 语句不区分大小写,但字符串常量区区分大小写.建议命令大写. ...
- 18.Java基础_关键字this及其内存原理
this使用 this的内存原理 执行函数setName时,首先是创建函数栈空间,然后创建形参name,除此之外还会有一个this(实质是堆内存中对象的首地址),这个this会索引对象的成员变量nam ...
- you have new mail in /var/spool/mail/root ！
今天开发的同事告诉我,他在登录系统时老是提示you have new mail in /var/spool/mail/root ! 我一猜就知道他们肯定又自己写定时任务了,这样的事已经发生过好几回了, ...
- Pwnable-blackjack
游戏源码 http://cboard.cprogramming.com/c-programming/114023-simple-blackjack-program.html 打开之后是一个游戏 你有5 ...
- SpringBoot之异步定时任务
如果每个Scheduled方法是同步执行的,万一有一个发生死锁,那么其他任务就没法执行,下面介绍异步定时任务 异步定时任务 Spring为任务调度与异步方法执行提供了注解支持,即通过在方法上设置@As ...
- office 2016 下载链接
[安装环境]:win7/win8/win10 [64位下载] 百度网盘链接:pan.baidu.com/s/1AkiLQtjhayGdx6mw1DQyqw 提取码:qyx9