小结ES6基本知识点(二)
原创小结ES6基本知识点(二)
原创
0,本文适合人群和主要内容
ES6初学者，通过阅读本文可对ES6知识点有个大体的概念，强烈建议阅读阮一峰大大的ES6入门。
老司机可以直接绕路。
主要内容：
- let、const命令
- 解构赋值
- 箭头函数
- 模版字符串
- 数组方法：map、filter、reduce
- Symbol
- Set和Map
- Class
- Module
- Promise
- async和await
上一篇文章总结了前五个部分的内容，可以点击阅读小结ES6基本知识点(一)。本文将总结Symbol、Set和Map的有关内容。
1.Symbol
回忆下js中的5种原始类型：number、string、boolean、undefined、null。
在ES6中，新定义了Symbol这种原始类型，主要是为了代表一个独一无二的值（每一个 Symbol 值都是不相等的）
注意点：
- Symbol是一种原始类型，不是对象。所以不要用new Symbol来生成Symbol。直接：Symbol(params) // params可以不传，为空；
- Symbol(params)中的参数params可以是字符串类型的，表示对当前Symbol值的描述。不论是没传params，还是传了参数params，params相等或者不相等，Symbol函数的返回值是不相等的。
- Symbol(params)中的参数params如果是一个对象，会先调用该对象的toString方法，将对象转为字符串，然后再生成一个Symbol值。
- Symbol值可以转为布尔值（Boolean(xxx)）、字符串(String(xxx)、xxx.toString())、但不能转为数组。
验证(1)：
Symbol是一种原始类型
let s = Symbol();
console.log(typeof s); // symbol验证(2)：
生成Symbol不能用new Symbol：
let s1 = new Symbol();
console.log(s1); // Uncaught TypeError: Symbol is not a constructor at new Symbol (<anonymous>)
let s1 = Symbol();
console.log(s1); // Symbol()验证(3)：
参数如果是对象且toString方法时，会调用对应的toString()
//参数是数组
let s1 = Symbol(["a", "b"])
console.log('s1', s1) // Symbol(a,b)
// 参数是对象--没有toString()
let s2 = Symbol({ "name": "Peter" })
console.log('s2', s2) //Symbol([object Object])
// 参数是对象--有toString()
const obj = {
name:'peter',
test(){
return 'def'
},
toString() {
return 'abc'
},
};
const sym = Symbol(obj);
console.log(sym) // Symbol(abc)验证(4)：
每一个 Symbol 值都是不相等的，不论是否传参数、参数值是否相等：
//无参数：
let s1 = Symbol();
let s2 = Symbol();
console.log('s1===s2', s1 === s2); // s1===s2 false
// 有参数、参数不相等：
let s1 = Symbol("a");
let s2 = Symbol("b");
console.log('s1===s2', s1 === s2); // s1===s2 false
// 有参数、参数相等
let s1 = Symbol("a");
let s2 = Symbol("a");
console.log('s1===s2', s1 === s2); // s1===s2 false验证(5)
Symbol值可以转为布尔值（Boolean(xxx)）、字符串(String(xxx)、xxx.toString())、但不能转为数值、也不能和其他类型的值进行运算：
let s1 = Symbol("test");
console.log(s1.toString()); // Symbol(test)
console.log(String(s1)); // Symbol(test)
console.log(Boolean(s1)); // true
console.log(Number(s1)); // Uncaught TypeError: Cannot convert a Symbol value to a number
s1 + 1; // Uncaught TypeError: Cannot convert a Symbol value to a number
s1 + "test"; // test.html:48 Uncaught TypeError: Cannot convert a Symbol value to a string下面介绍Set和Map
Set：
类似数组，不同的是数组中元素是允许重复的，而Set里面的元素都是唯一的。可接受字符串、数组、对象等作为参数。
Map:
类似对象，不同的是对象中的key是字符串或数字，而Map中的key可以是任何数据类型。
2.Set
2.1 Set的基本用法
验证(1)：
参数是数组，可以用于数组去重
[...new Set(array)]let s1 = new Set([1,2,3,4,4,4,4]);
console.log(s1); // Set(4) {1, 2, 3, 4}
console.log([...s1]); // [1, 2, 3, 4]验证(2)：
参数是字符串，也可以用于字符串去重
思路：[...new Set(“xxx”)]可得到去重后的数组，再通过.join(‘’)转成字符串，即可得到去重后的字符串。
[...new Set(“xxx”)].join('')let s1 = new Set("abcddddd")
console.log(s1); // Set(4) {"a", "b", "c", "d"}
console.log([...s1]); // ["a", "b", "c", "d"]
console.log([...s1].join('')); // abcd验证(3)：
参数是对象，添加到Set时，不能直接new Set({a:1})这样写，这样会报错Uncaught TypeError。可以用Set的add方法来添加。且任意两个对象都是不相等的，包括两个空对象，也是不相等的。这意味着add两个空对象后，Set的size是2而不是1：
let s1 = new Set({a:1},{b:1}) // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
console.log(s1);
let s2 = new Set();
// s2.add({a:1}).add({b:1})
s2.add({}).add({})
console.log(s2.size) // 2验证(4)：
Set内部判断相等类似“===”，不过“===”认为NaN和任何值都不相等，Set内部则会认为NaN等于自身。
//Set 内部判断两个值会认为：“4”和4是不相等的
let s1 = new Set([1,2,3,4,4,4,"4"]);
console.log([...s1]); // [1, 2, 3, 4, "4"]
// set 内部判断两个值会认为：NaN和自身相等
let s2 = new Set([1,2,3,4,4,4,NaN,NaN])
console.log([...s2]); // [1, 2, 3, 4, NaN]2.2 Set实例的属性和方法
- 属性：
size：获取元素的数量
- Set的操作方法：
Set的操作方法 | 用途 | 返回值 |
|---|---|---|
add(value) | 添加元素 | 返回Set实例本身 |
delete(value) | 删除元素 | 返回一个布尔值，表示是否删除成功 |
has(value) | 判断是否有该元素 | 返回一个布尔值，表示是否是Set实例的元素 |
clear() | 清除所有元素 | 没有返回值 |
验证：
let s1 = new Set();
s1.add(1).add(2).add(3).add(3);
s1.size // 3
s1.has(1) // true
s1.has(4) // false
s1.delete(1)
s1.has(1) // false
s1.clear()
s1.size // 0- 遍历方法：
keys()：返回键名的遍历器
values()：返回键值的遍历器。由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所有keys()和values()返回结果是一样的。
entries()：返回键值对的遍历器
forEach()：使用回调函数对每个元素执行某种操作，没有返回值。
验证：
let s = new Set(['name', 'age', 'gender'])
for (let i of s.keys()) {
console.log(i)
// name
// age
// gender
}
for (let i of s.values()) {
console.log(i)
// name
// age
// gender
}
for (let i of s.entries()) {
console.log(i)
// ["name","name"]
// ["age","age"]
// ["gender","gender"]
}
s.forEach((key, value) => console.log(key + ":" + value))
// name:name
// age:age
// gender:gender3.Map
3.1基本用法
验证：用对象和数组当做键：
// 对象当做键
let m = new Map();
let obj = {'test':'abc'};
m.set(obj,'def')
// 数组当做键
let arr = ["a","b","c"];
m.set(arr,'d')
console.log(m)结果：
3.2Map实例的属性和方法
- 属性
size：获取元素的数量
- 操作方法
Map的操作方法 | 用途 | 返回值 |
|---|---|---|
set(key,value) | 设置元素key和value | 返回Map实例本身 |
get(key) | 获取key对应的键值 | 返回键对应的键值，没有则返回undefined |
has(value) | 判断是否有value这个键 | 返回一个布尔值 |
delete(value) | 删除value这个键 | 返回一个布尔值，表示是否删除成功 |
clear() | 清除所有元素 | 没有返回值 |
验证：
let m = new Map();
m.set("name","Peter");
m.set("age", 26)
m.set({"gender":"male","add":"street"},"other info")
m.size // 3
m.get('name') // Peter
m.has("age") // true
m.delete("age")
m.has("age") // false
m.clear();
m.size // 0- 遍历方法
keys()：返回键名的遍历器
values()：返回键值的遍历器。
entries()：返回键值对的遍历器
forEach()：使用回调函数对每个元素执行某种操作，没有返回值。
验证：
let m = new Map();
m.set("name", "Peter");
m.set("age", 26)
m.set({ "gender": "male", "add": "street" }, "other info")
for (let key of m.keys()) {
console.log(key);
// name
// age
// {gender: "male",add: "street"}
}
for (let value of m.values()) {
console.log(value)
// Peter
// 26
// other info
}
for (let i of m.entries()) {
console.log(i)
// ["name", "Peter"]
// ["age", 26]
// [{gender: "male", add: "street"},"other info"]
}
m.forEach((value, key) => console.log(key + ":" + value))
// name:Peter
// age:26
// [object Object]:other info注意下这个Map的forEach()方法，第一个参数是键值，第二个参数是键。
4.小结
本文的主要内容是总结了ES6中新增的原始数据类型Symbol、新增的数据结构Set和Map的常用知识点。在下一节中会总结关于class和Module的有关内容。如有问题，欢迎指正。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
