一（2）ES6基础入门之模板字符串与箭头函数

一、模板字符串

1、模板字符串是什么

（1）认识模板字符串

一般的字符串由’'或""组成，例如：‘alex’,“alex”;
模板字符串由反引构成``,例如：alex。

（2）模板字符串与一般字符串的区别

const person = {
	name:'Alex',
	sex:'male',
	age:18
}
// 一般字符串
const info = '我的名字是'+person.name+'，我的性别是'+persone.sex+'，我的年龄是'+person.age;
// 模板字符串
const info = `我的名字是${person.name},我的性别是${person.sex},我的年龄是${person.age}`;
console.log(info);

和其它东西一起使用时，使用模板字符串，方便注入；
其他情况下，使用模板字符串或一般字符串都行。

2、模板字符串的注意事项

（1）输出多行字符串

// 一般字符串
const info = '第一行\n第二行';
console.log(info);

// 模板字符串
const info = '第一行\n第二行';
const info = `第一行
第二行`;
console.log(info);

模板字符串中，所有的空格、换行或缩进都会被保留在输出中。

（2）输出 ` 和 \ 等特殊字符

const info = `\`\\`;
console.log(info); // ` \

（3）模板字符串的注入

const username = 'Alex';
const person = {age:18,sex:'male'};
const getSex = function(sex){
	return sex === 'male' ? '男' : '女';
};
const info = `${username}，${person.age}，${getSex(person.sex)}`; // Alex，18，男

只要最终可以得到一个值的就可以通过 ${} 注入到模板字符串中。

3、模板字符串的应用

// html
<p>学生信息表</p>
<ul id="list">
	<li style="list-style:none">信息加载中...</li>
</ul>

// JS
const students = [
	{
		name:'Anna',
		age:15,
		sex:'female'
	},
	{
		name:'Tom',
		age:18,
		sex:'male'
	},
	{
		name:'Geo',
		age:15,
		sex:'male'
	}
];
const list = document.getElementById('list');
let html = '';
for(let i = 0; i < students.length; i++){
	html += `<li>${students[i].name}，${students[i].age}，${students[i].sex}</li>`;
}
lis.innerHTML = html;

---

二、箭头函数

1、箭头函数是什么

（1）认识箭头函数

const add = (x,y) => {
	return x+y;
};
console.log(add(5,6)); // 11

（2）箭头函数的结构
const/let 函数名 = (参数) => {函数体}

（3）如何将一般函数改写成箭头函数
声明形式：
function add(){}

声明形式->函数表达式：
const add = function (){};

函数表达式->箭头表达式：
const add = () => {};

2、箭头函数的注意事项

（1）单个参数

// 单个参数可以省略圆括号
const add = x => {
	return x+2;
};
console.log(add(4));

// 无参数或多个参数不能省略圆括号
const add = () => {
	return 1+1;
};
const add = (x+y) => {
	return x+y;
};
console.log(add(1,1));

（2）单行函数体

// 单行函数体可以同时省略 {} 和 return
const add = (x,y) => x+y;
console.log(3,4);

// 多行函数体不能再化简了
const add = (x,y) => {
	const sum = x + y;
	return sum;
};
console.log(add(5,6));

（3）单行对象

const add = (x,y) => {
	return {
		value:x + y
	};
};
const add = (x,y) => ({
	value:x + y
});
console.log(add(5,3));

如果箭头函数返回单行对象，可以在 {} 外面加上 ()，让浏览器不再认为那是函数体的花括号

3、非箭头函数中的 this 指向

（1）全局作用域中的 this 指向

console.log(this); // window

（2）一般函数（非箭头函数）中的 this 指向

function add(){
	console.log(this);
}
// 严格模式就指向 undefined
add(); // undefined->window（非严格模式下）
window.add();

只有在函数调用的时候 this 指向才确定，不调用的时候，不知道指向谁。
this 指向和函数在哪调用没关系，只和谁在调用有关。

4、箭头函数中的 this 指向

（1）箭头函数中的 this 指向
箭头函数没有自己的 this

const calc = {
	add:() => {
		console.log(this);
	}
};
calc.add(); // window

（2）练习

const calc = {
	add:function(){
		const adder = () => {
			console.log(this);
		};
		adder();
	}
};
calc.add(); // calc
const addFn = calc.add;
addFn(); // undefined -> window

5、不适用箭头函数的场景

（1）作为构造函数

// 箭头函数没有this
const Person = () => {};
new Person(); // erro

（2）需要 this 指向调用对象的时候

document.onclick = function(){
	console.log(this); // document
};
document.addEventListener(
	'click',
	() => {
		console.log(this); // window
	},
	false
);

（3）需要适用 arguments 的时候

// 箭头函数中没有 arguments
function add(){
	console.log(arguments)
}
add(1,5,3,6); 

const add = () => console.log(arguments);
add(); // erro

6、箭头函数的应用

// html
<button id="btn">开始</button>
<p id="result">0</p>

// JS
const btn = document.getElementById('btn');
const result = document.getElementById('result');
const timer = {
	time: 0,
	start: function(){
		btn.addEventListener(
			'click',
			()=>{
				setInterval(
					()=>{
						this.time++;
						result.innerHTML = this.time;
					},
					1000
				);
			},
			false
		);
	}
};
timer.start();