1.课程介绍

1.es是什么

2.新特性的优点

3.学习课程必备知识背景

2.相关名词介绍

3. let变量声明以及声明特性

3.1变量声明方式

//普通声明
let a;//一次性声明多个变量
let a,b,c;//声明并且初始化
let a = 100;//一次性声明多个并且初始化
let a=2,b=1,c='i love you';

3.2不允许重复声明

//使用 var 进行声明时下述代码不会报错
var a = 1;
var a = 2;//使用 let 进行声明时下述代码会报错
let a = 3;
let a = [];

3.3块级作用域

块的范围一般包括 if else while for 等

//es6中变量作用域的范围，除了全局作用域/函数作用域/eval作用域，还有块级作用域
{var a = 6;let b =7
}
//a可以正常打印
console.log(a)
//b会报错is not defined
console.log(b)

3.4不存在变量提升

//a会输出undefined,因为对变量的声明自动提升了
console.log(a);//b会报错 cannot access before initialization，因为不能提升
console.log(b);var a = 2;
let b = 3;

3.5不影响作用域链

let a = 2;
function fn(){return a;
}
//可以通过作用域链获取到a并返回
console.log(fn());

4.let块级作用域经典案例实践

例如，现在想给每一个div设置背景颜色为粉色

5.const声明常量

5.1声明常量的格式,一般变量名称采用大写

	const A = 1;

5.2必须赋初始值

	//必须赋初始值，下面这种情况会报错const A;

5.3常量的值不能修改

	//常量的值不能修改,下面的赋值语句会报错const A = 1;A = 2;

5.4常量也是块级作用域

	{const A = 1;}//会报错console.log(A)

5.5对数组或者对象里面的内容进行修改，不算对它的值进行操作，可以成功

	const A = [1,2,3]A.push(4)console.log('[ A ] >', A)

6.变量的解构赋值

6.1变量的解构赋值

	let arr = [1,2,3]let [a,b,c] = arrconsole.log('[ a ] >', a)console.log('[ b ] >', b)console.log('[ c ] >', c)

6.2对象的解构赋值

let student = {name : 'ljk',age : 10,whatHeSay : 'i love sy'
}let{name,age,whatHeSay} = studentconsole.log('[ name ] >', name)
console.log('[ age ] >', age)
console.log('[ whatHeSay ] >', whatHeSay)

7.模板字符串

7.1通过反引号来声明字符串类型变量

	let a = `sdfsdfs`;console.log('[ a ] >', a)console.log('[ typeOfa ] >', typeof a)

7.2不用通过拼接来换行

let a = `
a
a
a
a
a
`;
console.log('[ a ] >', a)

7.3通过${}进行变量的拼接

let a = `123`
let b = `${a}456`
console.log('[ b ] >', b)

8.对象的简化写法

8.1对于变量以及方法，均可以简写

var name = "a"
var age = 10//这是之前的写法
// let student = {
//     name:name,
//     age:age,
//     speech:function(){
//         return this.age
//     }
// }let student = {name,age,speech(){return this.age}
}
console.log('[ student ] >', student)
console.log('[ student.speech ] >', student.speech())

9.箭头函数

9.1箭头函数书写方式

//正常写函数
let a = function(){}//去掉function关键字，后面加上箭头，就是箭头函数
let b = () => {}//调用方式和普通函数一样
b();//当形参有且只有一个的时候，小括号可以省略
let add = (n) => {return n + 1
}
//可以写成如下方式
let add = n => {return n + 1
}//当函数体仅有一行时，大括号可以省略，上述代码可以如下这样写，注意要去掉return关键字
let add = n => n + 1

9.2静态的this(始终是声明时所在作用域下的this)

let fn = function(){console.log('[ name ] >', this.name)
}let fnArr = () => {console.log('[ name ] >', this.name)
}window.name = 'window name'const bean = {name:'beanName'}//正常调用时，this均是window
fn();
fnArr();console.log('[ -------- ] >')//采用call时，普通函数的this是当前对象
fn.call(bean)
//而箭头函数的this还是window，它是静态的，始终是声明时所在作用域下的this
fnArr.call(bean)

9.3不能使用箭头函数定义构造方法

//普通的构造方法let person = function(name,age){this.name = name;this.age = age;}//箭头函数的构造方法let personArr = (name,age) => {this.name = name;this.age = age;}//能够进行调用console.log('[ person ] >', new person("ljk",20))//调用的时候会报错console.log('[ personArr ] >', new personArr("sy",21))

9.4箭头函数不能使用arguments获取参数

//正常函数
let fn = function(){console.log('[ arguments ] >', arguments)
}
//箭头函数
let fnArr = () => {console.log('[ arguments ] >', arguments)
}