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`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData,...values) {

console.log(templateData)
console.log(values)
    
}

使用上面标签模版字符串可以防止用户输入恶意内容,
message部分的内容解析
SaferHTML是标签名它是一个函数。
后面的模版字符串,按照"${}"的区域进行参数分割。得到内容

["<p>", " has sent you a message.</p>"]

然后计算之后的${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<`${{count}}`;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)