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)
