续~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 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
随机推荐
- Dynamics 365 Customer Engagement中使用JavaScript和C#调用操作Action示例
微软动态CRM专家罗勇 ,回复334或者20190509可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Action (操作)是流程的一种,可以在工作流中调用,可以使用 ...
- 每天一点产品思考(5)：Web端链接跳转在当前页面刷新还是新标签页打开？
一.与交互设计师的突然撕逼 今天阿白在验收产品的时候,在博客首页打开一篇博文,是在原先的页面进行刷新,而不是新开一个标签页打开.阿白让开发改成在新标签页中打开,但是开发说这是设计师设计 ...
- 7.5 高级数据源---Kafka
一.Kafka简介 Kafka是一种高吞吐量的分布式发布订阅消息系统,用户通过Kafka系统可以发布大量的消息,同时也能实时订阅消费消息.Kafka可以同时满足在线实时处理和批量离线处理. 在公司的大 ...
- grep: /usr/include/php/main/php.h: No such file or directory
异常 grep: /usr/include/php/main/php.h: No such file or directory grep: /usr/include/php/Zend/zend_mod ...
- 2017年蓝桥杯B组C/C++决赛题解
2017年蓝桥杯B组C/C++决赛题目(不含答案) 1.36进制 ok 求36进制,类比二进制转10进制,36^3 + 36^2 + 36^1 + 36^0 2.磁砖样式 ok dfs搜索 我自己写的 ...
- Pwnable-bof
Download : http://pwnable.kr/bin/bof Download : http://pwnable.kr/bin/bof.c 下载之后,先看看c源码 #include < ...
- python3.5.3rc1学习八：文件打包
from cx_Freeze import setup, Executable setup(name='test to exe', version = '0.1', description='test ...
- CodeForces 984C Finite or not?
http://codeforces.com/problemset/problem/984/C Time limit 1000 msMemory limit 262144 kB 题目 You ...
- 2019.6.11_MySQL进阶二：主键与外键
通过图形界面(UI)创建外键 打开设计表,在对应的栏位填写相应的内容.其中FK_deptno是限制名 # 先给主表建立主键 ALTER TABLE dept ADD PRIMARY KEY(dep ...
- 剑指Offer-15.反转链表(C++/Java)
题目: 输入一个链表,反转链表后,输出新链表的表头. 分析: 可以利用栈将链表元素依次压入栈中,再从栈中弹出元素重新建立链表,返回头节点. 也可以在原有的链表上来翻转,先保存当前节点的下一个节点,然后 ...