python作者 es6_ES6笔记--持续更新

1.JS的解构赋值

除了可以解构可迭代对象以外,还可以对对象进行解构，对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

例如

let {userAgent} = navigator

console.log(userAgent)

我们轻松获取到了navigator的userAgent的属性。

函数的参数解构

先定义一个函数

function add(x,y,z){

return x+y+z

}

然后使用下面方式调用

add(...[1,2,3])

如果函数的参数形式是列表

function add([x,y,z]){

return x+y+z

}

那么它的调用方式是

add(1,2,3])

也可以给参数默认值

function add({x=1,y=4,z=5}={}){

return x+y+z

}

调用方式如下

add({x:1,y:2,z:3})

还可以传入可变参数

function add(...z) {

console.log(z)

}

add(1,2,3,4)

优雅的获取函数的返回值

function add(x, y, z) {

let a = x + y

let b = y + z

return {

num_a: a,

num_b: b

}

}

let {num_a, num_b:number_b} = add(...[6, 7, 8])

console.log("num_a : ", num_a)

console.log("number_b : ", number_b)

2.JS中Generator生成器

在function后面有个*，然后return语句改为yield

function* main(){

for (let i=0;i<5;i++){

yield i

}

}

和Python差不多使用next属性可以获取到一个对象，其他属性或者方法通过main.__proto__可以查到。

除此之外，也支持解构

let [head,...tail] = main()

结果

head = 0

tail = [1,2,3,4]

3.操作Iterable

ES6中的Iterable类型有Map和Set，一般使用for...of的形式遍历。

Set类型遍历

let arr=["a","b","c"]

for (let [index,value] of arr.entries()){

console.log(index,":",value)

}

上面的entries类似python的enumerate和go中的Range。

Set类型遍历

let arr=["a","b","c"]

for (let [index,value] of arr.entries()){

console.log(index,":",value)

}

Map类型遍历

let dic=new Map()

dic.set("name","liming")

dic.set("age",18)

dic.set("gender","男")

for (let [key,value] of dic){

console.log(`${key}`,":",value)

}

如果只想获取键名

//或者用map.keys()

for (let [key] of map) {

// ...

}

只获取键值

//或者用map.values()

for (let [,value] of map) {

// ...

}

4.模版字符串

let sender = "123"

let message =

SaferHTML`

${sender} has sent you a message.

`;

function SaferHTML(templateData,...values) {

console.log(templateData)

console.log(values)

}

使用上面标签模版字符串可以防止用户输入恶意内容,

message部分的内容解析

SaferHTML是标签名它是一个函数。

后面的模版字符串,按照"${}"的区域进行参数分割。得到内容

["

", " has sent you a message.

"]

然后计算之后的${sender}作为后面的参数，以此类推。通过...values可以获取所有的${}部分的参数最终结果。

另外可以在python调用js这样传入外部的值

import execjs

dic = {"count":10,"name":"lisa"}

num = 123

source = f"""

let dic = {dic}

let {{count,name}} =dic

function* gen(){{

for (let i=0;i

yield i

}}

}}

let foo=()=>{{

let _gen=gen()

_gen.next()

let c= _gen.next()

return c.value+name

}}

"""

js_compile = execjs.compile(source)

result = js_compile.call("foo")

print(result)

经过测试发现pyexecjs支持es6的语法。

5.resst参数

rest参数的形式是 [....参数名]，类似python的可变函数args.

在函数中使用arguments可以获取当前函数的所有参数,但是因为它不是数组而是一个类似数组的东西，所以没有办法直接使用map和forEach进行遍历，在ES5的时候需要使用

Array.prototype.slice.call(arguments)

到了ES6可以使用[....arguments]将其转为数组再进行遍历，方便了很多。

function foo(x,y,z){

[...arguments].map(v=>{

console.log(v)

})

}

foo(1,2,3)