1.let
和var关键字的用法基本一致
let food = '西红柿';
food = '西红柿炒鸡蛋';
console.log(food);
// 变量的声明 会提升到 当前作用域的顶端
var food;
console.log(food);
food = '西红柿';
没有变量提升
// let 不会提升
console.log(city);
let city = '广州';
2.模板字符串
使用``包裹文本
在需要替换的位置使用${}占位,并填入内容即可
没有使用模板字符:
let temStr = `我的名字是:我喜欢的东西是:我所在的城市是`;
console.log(temStr);
使用模板字符:
let name = "I";
let food = "西红柿";
let city = "广州";
let temStr = `我的名字是:${name} 我喜欢的东西是:${food} 我所在的城市是:${city}`;
console.log(temStr);
3.对象简化赋值
如果属性名和变量名相同,可以简写
没有简写:
let name = "I";
let city = "广州";
let person = {
name:name,
city:city
}
console.log(person);
简写:
let name = "I";
let city = "广州";
let person = {
name,//name:name,
city//city:city
}
console.log(person);
方法可以省略function关键字
没有省略function:
let name = "I";
let city = "广州";
let person = {
name,//name:name,
city,//city:city
sayHello:function(){
console.log('你好吗?');
}
}
console.log(person);
person.sayHello();
省略function:
let name = "I";
let city = "广州";
let person = {
name,//name:name,
city,//city:city
// sayHello:function(){
// console.log('你好吗?');
// }
sayHello(){
console.log('你好吗?');
}
}
console.log(person);
person.sayHello();
4.箭头函数
function省略掉,替换为 =>
函数体只有一行时,可以省略**{}**
参数只有一个时,可以省略**()**
函数体只有一行,并且有返回值时,如果省略了**{},必须省略return**
//无参数 ,一行,无返回值的函数
// let fun1 = function(){
// console.log('Hello JavaScript!');
// }
let fun1 = ()=> console.log('Hello JavaScript!');
fun1();
//1个参数,一行,无返回值的函数
// let fun2 = function(p1){
// console.log(p1);
// }
let fun2 = (p1)=>console.log(p1);
fun2('程序员');
//2个参数,多行,无返回值的函数
// let fun3 = function(p1,p2){
// console.log(p1);
// console.log(p2);
// }
let fun3 = (p1,p2)=>{
console.log(p1);
console.log(p2);
}
fun3('广州','程序员');
//无参数,一行,有返回值的函数
// let fun4 = function(){
// return 'Hello JavaScript';
// }
let fun4 = ()=> 'Hello JavaScript';
let fun4Res = fun4();
console.log(fun4Res);
//1个参数,一行,有返回值的函数
// let fun5 = function(p1){
// return p1 + 'Hello JavaScript';
// }
let fun5 = p1=> p1 + 'Hello JavaScript';
let fun5Res = fun5('HTML ');
console.log(fun5Res);
//2个参数,多行,有返回值的函数
// let fun6 = function(p1,p2){
// console.log(p1,p2);
// return p1+p2+'Hello JavaScript';
// }
let fun6 = (p1,p2)=>{
console.log(p1,p2);
return p1+p2+'Hello JavaScript';
}
let fun6Res = fun6('HTML','程序员');
console.log(fun6Res);
5.箭头函数中的this
创建时的this是谁,运行的时候this就是谁
let person = {
name:'I',
food:'西红柿',
sayHi(){
console.log(this);
}
}
//谁点出来的 就是谁
person.sayHi();
let person = {
name:'I',
food:'西红柿',
sayHi(){
//console.log(this);
setTimeout(function(){
console.log(this);
},100)
}
}
//谁点出来的 就是谁
person.sayHi();
let person = {
name:'I',
food:'西红柿',
sayHi(){
//console.log(this);
// setTimeout(function(){
// console.log(this);
// },100)
setTimeout(()=>{
console.log(this);
},100)
}
}
//谁点出来的 就是谁
person.sayHi();