ES全称“ECMAScript”。
优点:1、语法简洁,功能丰富。2、框架开发应用。3、前端开发职位要求。
目录
一、let:声明变量
二、const:声明变量
三、解构赋值(用在解构对象中的函数比较多)
四、模板字符串
五、简化对象写法
六、箭头函数
一、let:声明变量
<script>
let a; //声明变量
let b,c,d; //声明多个变量
let e = 100; //声明变量并赋值
let f = 521,g='iloveyou',h=[]; //声明多个变量并赋值
</script>
注意:
1、变量不能重复声明
let star = 'hahaha';
let star = 'hahaha';
//控制台会报错
2、块级作用域 全局,函数,eval
{
let girl = '小萍';
}
console.log(girl);
//控制台并不打印,会报错
3、不存在变量提升
console.log(song);
let song = '小萍';
//控制台会报错,并不打印,如果将let替换成var,控制台将会打印“undefined”,因为var可以变量提升,在使用前自动 var song;
4、不影响作用域链
{
let school = 'xx大学';
function fn(){
console.log(school);
}
fn();
//控制台输出‘xx大学’,在函数内找不到school的属性值时,会向上作用域一层层取,不影响作用域的。
}
二、const:声明变量
注意:
1、一定要赋初始值
const A; //报错,没有赋初始值
2、一般常量使用大写(潜规则,但小写不报错)
3、常量的值不能二次修改
const SCHOOL = 'xx大学';
SCHOOL = 'haha大学';
//报错,不能修改const常量的值
4、块级作用域
{
const PLAYER = '小萍';
}
console.log(PLAYER);
//报错,注意块级作用域
5、对数组和对象的元素修改,不算做对常量的修改,不会报错。
const TEAM = ['a', 'b', 'c', 'd'];
TEAM.push('e'); //正确修改,不报错
TEAM = 100; //错误修改,报错
三、解构赋值(用在解构对象中的函数比较多)
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值。
1、数组的解构
代码:
const F4 = ['道明寺', '花泽类', '忘记了1', '忘记了2'];
let [a, b, c, d] = F4;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
控制台:
2、对象的解构
代码:
const ping = {
name:'小萍',
age: 18,
xiaoping:function(){
console.log('我叫小萍,年年18');
}
}
// 没有解构时
console.log(ping.name);
console.log(ping.age);
console.log(ping.xiaoping);
// 解构时
let {name,age,xiaoping} = ping;
console.log(name);
console.log(age);
console.log(xiaoping);
// 相比之下,解构后每次使用对象内的属性或函数更简洁了
控制台:
四、模板字符串
ES6引入新的声明字符串的方式反引号——``。
1、按回车键自动转换,不需自行使用加号进行字符串拼接。
2、变量拼接。
let lover = `易烊千玺`;
let out = `我喜欢${lover}呀!`;
//不用加号进行字符串的拼接
五、简化对象写法
ES6允许在大括号里面直接写入变量和函数,作为对象的属性和方法,例如:
let name = '小萍';
let hello = function(){
console.log('我是小萍');
}
// 对象的属性和方法js基础写法:
const school1 = {
name:name,
hello:hello,
improve:function(){
console.log('小萍是大美女!');
}
}
// 对象的属性和方法ES6写法(相比之下,更简洁):
const school2 = {
name,
hello,
improve(){
console.log('小萍是大美女!');
}
}
六、箭头函数
ES6允许使用箭头(=>)定义函数
声明函数:
//声明函数
// 1、普通函数
let fn1 = function(){
}
// 2、箭头函数
let fn2 = () =>{
}
特性:
1、箭头函数的this是静态的,this始终指向函数声明时所在作用域下的this的值。例子:
function getName1() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
// 设置window对象的name属性
window.name = '小萍';
const hello = {
name: 'xiaoping',
}
// 直接调用
getName1();
getName2();
// call方法调用,call方法可以动态地修改this指针的指向
getName1.call(hello); //打印的this.name是'xiaoping',因为普通函数this是动态的,this指向hello,那么this.name指向hello对象下的name属性
getName2.call(hello); //打印的this.name是'小萍',因为箭头函数getName2所在的作用域在window下,this指向window,那么this.name指向window.name
2、不能作为构造实例化对象(不能new)。
3、不能使用arguments变量。
4、箭头函数的简写
1、省略小括号,当形参有且只有一个的时候。
2、省略花括号,当代码体只有一条语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值。