ES6常用语法(下)
- symbol类型
symbol
的原因symbol
,表示独一无二的值。它是 javascript 语言的第七种数据类型,前六种是:undefined
、null
、布尔值(boolean)、字符串(string)、数值(number)、对象(object)symbol
函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 symbol 类型。凡是属性名属于 symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突typeof s
// "symbol"
s
就是一个独一无二的值。typeof
运算符的结果,表明变量s
是 symbol 数据类型,而不是字符串之类的其他类型symbol
函数前不能使用new
命令,否则会报错。这是因为生成的 symbol 是一个原始类型的值,不是对象。也就是说,由于 symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。symbol
函数可以接受一个字符串作为参数,表示对 symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。s1 // symbol(foo)
s2 // symbol(bar)
s1.tostring() // "symbol(foo)"
s2.tostring() // "symbol(bar)"
s1
和s2
是两个 symbol 值。如果不加参数,它们在控制台的输出都是symbol()
,不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。symbol
函数的参数只是表示对当前 symbol 值的描述,因此相同参数的symbol
函数的返回值是不相等的。s1 === s2 // false
// 有参数的情况
s1 === s2 // false
s1
和s2
都是symbol
函数的返回值,而且参数相同,但是它们是不相等的。if (sym) {
// ...
}
number(sym) // typeerror
sym + 2 // typeerror
let a = {};
a[mysymbol] = 'hello!';
// 第二种写法
let a = {
a[mysymbol] // "hello!"
const a = {};
a.mysymbol = 'hello!';
a[mysymbol] // undefined
a['mysymbol'] // "hello!"
mysymbol
作为标识名所指代的那个值,导致a
的属性名实际上是一个字符串,而不是一个 symbol 值。let obj = {
[s]: function (arg) { ... }};
obj[s](123);
s
不放在方括号中,该属性的键名就是字符串s
,而不是s
所代表的那个 symbol 值。- set和map结构
[2, 3, 5, 4, 5, 2, 2].foreach(x => s.add(x));
for (let i of s) {
console.log(i);}
// 2 3 5 4
add
方法向 set 结构加入成员,结果表明 set 结构不会添加重复的值。
const set = new set([1, 2, 3, 4, 4]);
// [1, 2, 3, 4]
// 例二
const items = new set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// 例三
[...new set(array)]
5
和"5"
是两个不同的值。set 内部判断两个值是否不同,使用的算法叫做“same-value-zero equality”,它类似于精确相等运算符(===
),主要的区别是nan
等于自身,而精确相等运算符认为nan
不等于自身。-
constructor
:构造函数,默认就是set
函数。 -
size
:返回set
实例的成员总数。
// 注意2被加入了两次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
array.from
方法可以将 set 结构转为数组。for (let x of set) {
console.log(x);}
// red
// green
// blue
foreach
方法,用于对每个成员执行某种操作,没有返回值。// 4 : 4
// 9 : 9
foreach
方法的参数就是一个处理函数。该函数的参数与数组的foreach
一致,依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意,set 结构的键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。map 结构的实例有以下属性和操作方法。
(1)size 属性
size
属性返回 map 结构的成员总数。map.set('foo', true);
map.set('bar', false);
map.size // 2
(2)set(key, value)
set
方法设置键名key
对应的键值为value
,然后返回整个 map 结构。如果key
已经有值,则键值会被更新,否则就新生成该键。m.set('edition', 6) // 键是字符串
m.set(262, 'standard') // 键是数值
m.set(undefined, 'nah') // 键是 undefined
set
方法返回的是当前的map
对象,因此可以采用链式写法。.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
get
方法读取key
对应的键值,如果找不到key
,返回undefined
。const hello = function() {console.log('hello');};
m.set(hello, 'hello es6!') // 键是函数
m.get(hello) // hello es6!
has
方法返回一个布尔值,表示某个键是否在当前 map 对象之中。m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
delete
方法删除某个键,返回true
。如果删除失败,返回false
。m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
clear
方法清除所有成员,没有返回值。map 结构原生提供三个遍历器生成函数和一个遍历方法。
-
keys()
:返回键名的遍历器。 -
values()
:返回键值的遍历器。 -
entries()
:返回所有成员的遍历器。 -
foreach()
:遍历 map 的所有成员。
['f', 'no'],
['t', 'yes'],]);
for (let key of map.keys()) {
console.log(key);}
// "f"
// "t"
for (let value of map.values()) {
console.log(value);}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);}
// "f" "no"
// "t" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);}
// "f" "no"
// "t" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);}
// "f" "no"
// "t" "yes"
...
)。[1, 'one'],
[2, 'two'],
[3, 'three'],]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
- generators生成器函数
function
关键字与函数名之间有一个星号;二是,函数体内部使用yield
表达式,定义不同的内部状态(yield
在英语里的意思就是“产出”)yield 'hello';
yield 'world';
return 'ending';}
var hw = helloworldgenerator();
helloworldgenerator
,它内部有两个yield
表达式(hello
和world
),即该函数有三个状态:hello,world 和 return 语句(结束执行)。next
方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield
表达式就是暂停标志。(1)遇到yield
表达式,就暂停执行后面的操作,并将紧跟在yield
后面的那个表达式的值,作为返回的对象的value
属性值。
(2)下一次调用next
方法时,再继续往下执行,直到遇到下一个yield
表达式。
(3)如果没有再遇到新的yield
表达式,就一直运行到函数结束,直到return
语句为止,并将return
语句后面的表达式的值,作为返回的对象的value
属性值。
return
语句,则返回的对象的value
属性值为undefined
next
方法,使得指针移向下一个状态。也就是说,每次调用next
方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield
表达式(或return
语句)为止。换言之,generator 函数是分段执行的,yield
表达式是暂停执行的标记,而next
方法可以恢复执行。// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
上面代码一共调用了四次next
方法。
第一次调用,generator 函数开始执行,直到遇到第一个yield
表达式为止。next
方法返回一个对象,它的value
属性就是当前yield
表达式的值hello
,done
属性的值false
,表示遍历还没有结束。
第二次调用,generator 函数从上次yield
表达式停下的地方,一直执行到下一个yield
表达式。next
方法返回的对象的value
属性就是当前yield
表达式的值world
,done
属性的值false
,表示遍历还没有结束。
第三次调用,generator 函数从上次yield
表达式停下的地方,一直执行到return
语句(如果没有return
语句,就执行到函数结束)。next
方法返回的对象的value
属性,就是紧跟在return
语句后面的表达式的值(如果没有return
语句,则value
属性的值为undefined
),done
属性的值true
,表示遍历已经结束。
next
方法返回对象的value
属性为undefined
,done
属性为true
。以后再调用next
方法,返回的都是这个值。next
方法,就会返回一个有着value
和done
两个属性的对象。value
属性表示当前的内部状态的值,是yield
表达式后面那个表达式的值;done
属性是一个布尔值,表示是否遍历结束。
上一篇: php中Ctype函数用法详解
下一篇: 微信小程序手势滑动卡片案例