1、let变量

1、声明变量

1
2
3
4
5
let a;
let a,b;
let a = 10;
let b = [];
let c = '你好!';

2、变量不能重复声明

1
2
3
let start = '张永记';
let start = '葛震鹏';
var可以重复声明,但是let不可以,会报错。

3、块级作用域

1
2
3
4
5
6
{
let girl = '谢长友';
}
console.log(girl);
报错,超出块级作用域。
不局限于此,if else while等语句也满足上述情形。

4、不存在变量提升

1
2
3
console.log(girl);
let girl = '谢长友';
报错,var不会,开始时程序会收集变量,var可以提升,let不可以。

5、不影响作用域链

1
2
3
4
5
6
7
{
let school = '北京邮电大学';
function fn(){
console.log(school);
}
fn();
}

2、const常量

1、一定要赋初始值

1
const player = 'UZI';

2、一般常量使用大写(潜规则)

1
const a = 100;      //不会报错

3、常量的值不能修改

1
player = 'MLXG';

4、块级作用域

1
2
3
4
{
const school = '北京邮电大学';
}
console.log(school);

5、对于数组和对象的元素的修改,不算做对常量的修改,不会报错

1
2
const TEAM = ['UZI','MLXG','MING','XIAOHU'];
TEAM.push('MEIKO');

3、变量的解构赋值

1
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。

1、数组的解构

1
2
3
4
5
6
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

2、对象的解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const zhao = {
name : '赵本山',
age : '不详',
xiaopin: function(){
console.log("我可以演小品");
}
}

let {name,age,xiaopin} = zhao; //解构时注意name,age这些要一一对应。
console.log(name);
console.log(age);
console.log(xiaopin);

xiaopin();

4、模板字符串

1
新的声明字符串的方式,有单引号‘’,双引号“”,现在还有反引号``。

1、声明

1
2
let str = `我也是一个字符串!`;
console.log(str);

2、内容中可以直接出现换行符

1
2
3
4
5
6
let str =`<ul>
<li>马云</li>
<li>马化腾</li>
<li>赵子龙</li>
<li>刘备</li>
</ul>`;

3、用于变量的拼接

1
2
3
let love = '淑芬';
let out = `${love}是我最喜欢的科目!`;
console.log(out);

5、对象的简化写法

1
ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,使得书写更加的简洁。
1
2
3
4
5
6
7
8
9
10
11
12
let name = '北京邮电大学';
let change = function(){
console.log('你好呀!');
}

const school = {
name,
change,
improve(){ //函数方法可以简化为此种形式。
console.log('这样也可以呀!');
}
}

6、箭头函数

1
ES6允许使用箭头(=>)定义函数
1
2
3
4
5
6
7
8
9
10
11
12
对比:
起初定义的函数类型:
let fn = function(a,b){
return a + b;
}
箭头函数:
let fn = (a,b) =>{
return a + b;
}

let result = fn(1,2);
console.log(result);

1、this是静态的,this始终指向函数声明时所在作用域下的this值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getName(){
console.log(this.name);
}

function getName2 = () => {
console.log(this.name);
}

//设置window的name属性
window.name ='北京邮电大学';
const school = {
name: "北京师范大学";
}

//直接调用
getName();
getName2();
都输出`北京邮电大学`
// this是静态的,this始终指向函数声明时所在作用域下的this值。
//call方法调用
getName.call(school);
getName2.call(school);
第一个输出`北京师范大学`,第二个输出`北京邮电大学`。

2、不能作为构造实例化对象

1
2
3
4
5
6
7
8
let person = (name,age) => {
this.name = name;
this.age = age;
}

let me = new person('张三',20);
console.log(me);
//出错,箭头函数不能作为构造实例化对象。

3、不能使用arguments变量

1
2
3
4
let fn = () => {
console.log(arguments);
}
fn(1,2,3);

4、箭头函数的简写

1
2
3
4
5
6
7
8
9
1、省略小括号,当形参有且只有一个的时候
let add = n => {
return n + n;
}
console.log(add(2));

2、省略花括号,当代码体只有一条语句时,此时return必须省略,语句的执行结果就是函数的返回值。
let pow = n => n + n;
console.log(pow(2));

5、箭头函数实战示例

image-20230227234712671

1、如何获取到相应的”元素“,getElementById(‘Id’)。

2、如何为相应的”元素“增加事件,addEventListener(‘事件触发的方式’,触发的事件)。

3、延时函数的使用方式,setTimeout(‘延时执行的事件’,延时的时间,单位是毫秒)。

4、this指代问题的两种解决办法,更推荐使用箭头函数的方式。

image-20230227235408474

1、数组按要求筛选,筛选的方法是filter()。

2、注意箭头函数的使用方式。

7、函数参数默认值的设置

image-20230228000259103

1、有默认值时,没有传值则使用默认值。

2、是对象时与解构配合使用更好。

8、rest参数

image-20230228000705411

注:rest参数得到的返回值是一个数组,更便于使用。

9、扩展运算符

1
2
3
4
5
...扩展运算符能将数组转化为逗号分隔的参数序列

声明一个数组
const tfboys = ['yyqx','wjk','wy']; ['yyqx','wjk','wy']
...tfboys 'yyqx','wjk','wy'
image-20230301162845940

1、用于数组的合并

2、用于数组的克隆

3、将伪数组转成真正的数组

10、迭代器

1
2
3
4
5
6
7
8
9
10
11
const array = ['唐三','小舞','戴沐白','奥斯卡'];

使用in,输出的是键名。
for(let i in array){
console.log(i);
}

使用of,输出的是键值。
for(let i of array){
console.log(i);
}

11、promise方法

image-20230301170637378

1、生成一个promise对象

2、promise()里面是一个函数,函数有两个参数resolve,reject

3、异步执行后,可以调用promise对象的then方法

4、then方法里面有两个参数,是两个函数,前面执行调用成功,后面执行调用失败

12、async和await

image-20230301224732272 image-20230301225024034