天天看点

ES6那些不知道的事儿

这篇主要是整理一些ECMAScript中后来新增的不常用的语法,有的甚至都没见过。像es6新增的let、const、Promise、箭头函数、默认参数等等这些常用就不做介绍了,相信大家使用的都很6,就不再赘述

1. 模板字符串语法(``) 

相信大家看到这个并不会感到陌生,甚至相当熟悉,别着急,还有别的用处,相信多数人都没使用过,甚至没见过 

①字符串拼接

 在es6之前我们进行字符串的拼接基本都是通过下面的方式

var name = 'wft'
var age = 18

var info_str = 'My name is ' + name + ' age is ' + age

console.log(info_str, '----->>>') //My name is wft age is 18 ----->>>      

es6之后就可以通过模板字符串的方式来进行拼接,写起来更加方便 

let name = 'wft'
let age = 18

let info_str = `My name is ${ name } age is ${ age }`

console.log(info_str, '----->>>') //My name is wft age is 18 ----->>>      

②函数调用 

模板字符串还可以进行函数的调用,我当时看到这个时候也是一脸懵,但确确实实的存在的。 

正常我们函数的调用都是下面方式 

let name = 'wft'
let age = 18

function fn(list, name, age) {
  console.log(list, 'list----->>>')
  console.log(name, 'name----->>>')
  console.log(age, 'age----->>>')
}

fn([1,2,3], name, age)      

通过模板字符串调用

let name = 'wft'
let age = 18

function fn(list, name, age) {
  console.log(list, 'list----->>>')
  console.log(name, 'name----->>>')
  console.log(age, 'age----->>>')
}

fn`1${ name }2${ age }3`      

没错,这种方式跟上面的方式效果是一模一样的,它会将我们的字符串切割开来放在一个数组中作为第一个参数传递进去,然后再依次将变量作为参数传递。相信大家平时开发中没人会使用这种方式,但是有些框架中可能会出现这种方式,到时候能认识就行,免得到时候一脸懵圈

2. 超长数字的定义方式 

这个其实也不重要,就是我们看到一些数字比较长的时候,会使用千分位的方式显示(14,432,586,000) ,我们定义变量的时候,如果是个字符串的时候我们也可以使用“,”隔开的方式定义

let money = '14,432,586,000'      

但是如果定义数字的话,肯定就是不行的

ES6那些不知道的事儿

直接就报错了 ,但这时候有个替代方案

let money = 14_432_586_000

// 等同于 let money = 14432586000
console.log(money, '----->>>') //14432586000 ----->>>      

这个语法其实就是仅仅为了方便阅读,也是为了我们今后见到能够不陌生 

3. Symbol 

 Symbol是什么呢?Symbol是ES6中新增的一个基本数据类型,翻译为符号

Symbol最大的特点就是它的唯一性 

  • 在ES6之前,对象的属性名都是字符串形式,那么很容易造成属性名的冲突
  • 比如原来有个对象,某些场景下,我们希望在其中添加一个新的属性和值,但是我们不确定它原来内部有什么内容的情况下,很容易造成冲突,从而覆盖掉它内部的某个属性
  • 比如我们开发中使用混入,那么混入中出现了同名的属性,必然有一个会被覆盖掉

① 基本使用 

const s1 = Symbol()
const s2 = Symbol()

console.log(s1 === s2, '----->>>') // false      

② Symbol的描述 

const s3 = Symbol("哈哈哈")

console.log(s3.description, '----->>>') //哈哈哈      

③Symbol作为对象的key 

const s1 = Symbol()
const s2 = Symbol()
const s3 = Symbol("哈哈哈")

// 定义对象字面量是使用Symbol作为key
let o = {
  [s1]: "aaa",
  [s2]: "bbb"
}
// 新增属性
o[s3] = "ccc"

console.log(o, '----->>>') // { [Symbol()]: 'aaa', [Symbol()]: 'bbb', [Symbol(哈哈哈)]: 'ccc' } ----->>>      

④ 获取Symbol的属性值

 不能通过“点语法 ”获取属性值

console.log(o.s1) //undefined      

使用Symbol作为对象的key的属性名,在遍历、Object.keys、Object.getOwnPropertyNames等中是获取不到这些Symbol值的 

// 不能通过Object.keys、Object.getOwnPropertyNames获取Symbol值
let sKeys1 = Object.keys(o)
console.log(sKeys1) //[]
let sKeys2 = Object.getOwnPropertyNames(o)
console.log(sKeys2) //[]      

正确获取应该通过Object.getOwnPropertySymbols获取,然后遍历所有的Symbol  key 再拿对应的属性值 

Object.getOwnPropertySymbols(o).forEach(sKey => {
  console.log(sKey, '-->>', o[sKey])
})      

⑤ Symbol.for() 和 Symbol.keyFor() 

前面说Symbol是唯一的,但是我们也有办法创建出两个一样的Symbol值,就是通过 Symbol.for 方法

let sa = Symbol.for("aaa")
let sb = Symbol.for("aaa")
console.log(sa === sb, '----->>>') // true

let key = Symbol.keyFor(sa)
console.log(key, '----->>>') // aaa

let sc = Symbol.for(key)
console.log(sa === sc, '----->>>')// true      

4. WeakSet的使用 

和Set类似的另外一个数据结构称之为WeakSet,也是内部元素不能重复的数据结构 

 和Set数据结构的区别

  • WeakSet中只能存放对象类型,不能存放基本数据类型;
  • WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收
  • WeakSet 只提供了3个方法

    add(value):向 WeakSet 实例添加一个新成员,value必须是对象类型否则会报错,返回值也是一个WeakSet的实例

    delete(value):删除WeakSet中指定的成员,返回值为布尔类型,标识是否删除成功。

    has(value):检测WeakSet中是否存在指定的成员,返回值为布尔类型,标识成员是否存在。

let wSet = new WeakSet()

wSet.add(1) // TypeError: Invalid value used in weak set
wSet.add(true) // TypeError: Invalid value used in weak set
wSet.add(Symbol()) // TypeError: Invalid value used in weak set      
let o = { name: 'wft', age: 18 }

let wSet = new WeakSet()

wSet.add(o)      

5. WeakMap的使用 

和Map数据结构的区别 

  • WeakMap的key只能使用对象,不接受其他类型作为key
  • WeakMap的key对对象的引用是弱引用,如果没有其他引用引用这个对象 ,那么GC可以回收该对象
  • WeakMap没有遍历操作(即没有keys(),values(),entries()方法),也没有size 属性。因为没有办法列出所有键名,某个键名是否存在完全不可测,跟垃圾回收机制是否运行相关。这一刻可以取到键名,下一刻垃圾回收机制突然运行了,这个键名就没了,为了防止出现不确定性,就统一规定不能渠道键名。二是无法清空,即不支持clear方法。因此WeakMap只有四个方法可用:get()、set()、has()、delete()。
let wMap = new WeakMap()

wMap.set('foo', 1) // TypeError: Invalid value used as weak map key
wMap.set(null, 2) // TypeError: Invalid value used as weak map key
wMap.set(Symbol(), 3) // TypeError: Invalid value used as weak map key      
let o = { name: 'wft', age: 18 }

let wMap = new WeakMap()

wMap.set(o, 2)      

继续阅读