文章/答案/技术大牛

发布

社区首页 >专栏 >小结ES6基本知识点(二)

小结ES6基本知识点(二)

原创

前端林子

修改于 2019-09-01 14:23:37

2.3K00

代码可运行

文章被收录于专栏：前端技术总结前端技术总结

运行总次数：0

代码可运行

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