续~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 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
随机推荐
- 简单两行，实现无线WiFi共享上网，手机抓包再也不用愁了
你是否为WiFi共享而发愁,各个无线共享软件,某某共享精灵,某某免费WiFi,某某共享大师,某某随身WiFi,一个比一个难用,一个比一个私货多,一个比一个广告多,如果装上了它们,你的电脑就基本沦陷了, ...
- Xcode 11新建工程.--iOS 13 SceneDelegate适配
收录文章::::::::::::::: iOS 13 适配要点总结 在Xcode 11 创建的工程,运行设备选择 iOS 13.0 以下的设备,运行应用时会出现黑屏现象.原因: Xcode 11 默认 ...
- Python的包package的导入与被导入（包的类和方法的导入，__init__()怎么写）
包package的导入与被导入: 参考一下: https://blog.csdn.net/guowujun321/article/details/80764468 1.文件目录: | |-- A/ ...
- Python—日志模块(logging)和网络模块
https://blog.csdn.net/HeatDeath/article/details/80548310 https://blog.csdn.net/chosen0ne/article/det ...
- Falling back to java on path. This behavior is deprecated
windows启动elasticsearch报错:warning: Falling back to java on path. This behavior is deprecated. Specify ...
- [Go] gocron源码阅读-空接口类型interface{}
gocron源代码中的Action那个地方,就是个空接口类型Action interface{},可以传递任意类型进去,这里是传了个函数进去 command := cli.Command{ Name: ...
- C++ 学习六 operator关键字（重载）
转载:http://blog.sina.com.cn/s/blog_4b3c1f950100kker.html operator是C++的关键字,它和运算符一起使用,表示一个运算符函数,理解时应将 o ...
- 【Spring AOP】AOP实现原理（六）
原文链接:https://my.oschina.net/guangshan/blog/1797461
- （day56）八、删除框、批量创建、分页器组件
目录 一.ajax结合sweetalert实现删除按钮的动态效果 二.bulk_create批量插入数据 三.自定义分页器 (一)手动推导 (二)自定义分页器 (1)模板 (2)用法 一.ajax结合 ...
- array 数组