JS基础知识总结（十）：ES6基本知识点（2）

“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！

作者：前端林子 https://cloud.tencent.com/developer/article/1380512

上一篇文章总结了前五个部分的内容，可以点击阅读小结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可以是任何数据类型。

• 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:gender 

3.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的有关内容。如有问题，欢迎指正。

最近几天会陆续更新的~~，觉得总结的可以的话，麻烦给小编点一个 在看, 谢谢！

往期：

JS基础知识总结（九）：ES6基本知识点（1)

JS基础知识总结（八）：这次聊聊Promise对象

JS基础知识总结（七）：聊聊ajax的创建过程

JS基础知识总结（六）：只知道ajax？你已经out了

JS基础知识总结（五）：防抖和节流

请各位帅哥美女多多支持帅编，回复“1”即可加入前端技术交流群，回复"2"即可领取 500G 前端干货