续~ES6 新语法 （symbol、set集合、 数组对象的filter（），reduce（），weakset（），map（）方法）
一、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>
续~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 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
随机推荐
- weblogic 安装及配置
修改AdminServer为不需要输入密码的方式开启 : 安装使用的是production模式,不是开发模式,如果要后台启动Weblogic, 需要在如下DOMAIN_HOME/servers/Adm ...
- UITableView总结
.协议介绍 UITableViewDataSource() UITableViewDelegate(常用) .刷新 下拉刷新: 上拉刷新 .搜索 .重用 自定义cell 不使用重用方法 注册Cell ...
- js的运用
JS数组的4种声明方法: //第一种 ,,,,] console.log(A) //第二种 var B=new Array(); B[]= B[]= B[]= console.log(B)//第三种 ...
- PHP代码篇（二）-- array_column函数将二维数组格式化成固定格式的一维数组，及优化查询方法
小白因为经常用到多表查询,比如获取一个会员领取的卡卷list,里面当然包含了1“会员优惠券记录表t_coupon_members”主表,然后2“门店优惠券表t_coupon”,和3“门店信息表t_sh ...
- Oracle有哪些诊断事件
作者:eygle | [转载请注出处]链接:https://www.eygle.com/archives/2004/12/oracle_diagnostics_events_list.html 经常有 ...
- .net core从版本 3.0 迁移到 3.1引发的BUG
前几天微软的.net core3.1发布后,随把visual studio 2019升级到16.4.1版本并把项目进行框架升级.升级后的项目在IdentityServer4授权后在360安全浏览器竟然 ...
- CodeForces - 1256C （思维+贪心）
题意 https://vjudge.net/problem/CodeForces-1256C 有一条宽度为n的河.河的左岸编号为0,右岸编号为n+1.河流上还有m个木制平台,第i个平台的长度为ci(所 ...
- 【HDU1814】Peaceful Commission（2-sat+暴力染色）
传送门 \(2-sat\)的模板题,首先得出题目中的二元关系为:对于有矛盾的\(x_i,x_j\),至多选择一个,那么连边\(x_i\rightarrow x_j',x_j\rightarrow x_ ...
- linux so库方式
gcc test_a.c test_b.c test_c.c -fPIC -shared -o libtest.so
- 利用OpenCV实现图像拼接Stitching模块讲解
https://zhuanlan.zhihu.com/p/71777362 1.1 图像拼接基本步骤 图像拼接的完整流程如上所示,首先对输入图像提取鲁棒的特征点,并根据特征描述子完成特征点的匹配,然后 ...