JavaScript的ES6语法，2021-03-04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a=0;
let a=2;
报错
// 块级作用域
{
let a=1;
}
console.log(a);
//报错
// 不存在变量提升
console.log(a); //报错
let a= 'aa';
let [a,b,c] = 'ff';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 常量，赋初始值
// 潜规则 大写
const PI ="3.14
// 不能修改，块级作用域
//对象的结构
const zhao = {
age:18,
hy:function(){
}
}
let {a,b,hy} = zhao;
console.log(a);
hy();
//无需 使用 zhao.hy()

1
2
3
4
5
6
7
8
9
10
11
// 1. 声明方式 '',"",``;
let str = `tea`;
console.log(str, typeof str);
// 2. 内容可出现换行
let str = `<ul><li>1</li>
<li>2</li>
</ul>`;
//3 拼接
let a = 'zhangsan';
let b = `${a} is a good boy`;

1
2
3
4
5
6
7
const school = {
name,
//等价于 name:name,
hobby(){ }
//等价于 hobby:function(){}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
let fn = function(){}
let fn = (a,b) =>{}
//声明
let res = fn(1,2);
console.log(res);
//调用
// 1 this是静态，this始终指向函数声明时所在作用域下的this
function getName(){}
let getName2 = () =>{}
window.name = 'aa';
const school = { name:"井大"}
getName();
//aa
getName2(); //aa
getName.call(school); //井大
getName2.call(school); //aa
// 2 不能作为构造器实例化对象
let Person =(name,age)=>{
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
//结果报错
// 3 不能使用arguments 变量
let fn=() =>{
console.log(arguments);
}
fn(1,2,3); //报错
// 4 箭头简写
// 省略小括号，形参只有一个
let add = n =>{ return n+n;}
//省略花括号，只有一条语句，return必须省略，返回结果值
let add = n =>n*n
// 箭头函数适合与this 无关的回调，，定时器，数组的方法回调
const arr = [1,6,9,10]; //找偶数
const result = arr.filter(function(i){
if(i %2 === 0){
return true;
}else{return false;}
});
const result2 = arr.filter(i=>i%2 === 0);
// 箭头函数不适合与this有关的回调，，事件回调，对象的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//1 一般位置放最后
function add(a,b,c=1){}
//2 与解构赋值结合
connect({
name:'localhost',
passwd:'123'
})
function connect(op){
let name = op.name;
} //等价于
function connect({name="127.0.0.1",passwd}){
console.log(name)
}

1
2
3
4
5
//rest参数放在最后
function fn(a,b,...args){
}
fn(1,2,3,4,6)

1
2
3
4
5
6
 function chunwan(){ //放rest参数 ...XXX
console.log(arguments);
}
chunwan(...tfboys); //扩展放在调用实参，
const e = [...a,...b]; //数组合并

1
2
3
const a =['a','b'];
const b = [...a];

1
2
3
const divs = document.queryselector('div');
const divArr = [...divs];