专栏首页前端技术总结小结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: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的有关内容。如有问题,欢迎指正。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

相关文章

  • 小结ES6基本知识点(四):数组的扩展

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

    前端林子
  • 小结ES6基本知识点(一)

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • 一览js模块化:从CommonJS到ES6

    js模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。本文将依次介绍下每个规范。

    前端林子
  • 【学习笔记】ES6新的语法

    无道
  • JavaScript学习笔记009-Json对象0解构赋值0扩展运算符

    Mr. 柳上原
  • ES6

    在cmd命令窗口初始化项目-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。

    楠楠
  • 12个必备的JavaScript装逼技巧

    原文: 12 Amazing JavaScript Shorthand Techniques

    Fundebug

扫码关注云+社区

领取腾讯云代金券