ES6(let、模板字符串、对象简化赋值、箭头函数、箭头函数中的this)知识点整理

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();