传统字符串:
传统字符串的问题:多行字符串问题、字符串中使用变量
传统字符串拼接会出现许多问题,例如需要使用“ ”来连接字符串,以及在换行上容易出现许多问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="myul"></ul>
<script>
const data = [{
name: "lisa"
}, {
name: "luna"
}, {
name: "nana"
}];
//data数组中包含三个对象,每个对象都包含name属性
const ul = document.getElementById('myul');
let html = "";
for (let i = 0; i < data.length; i++) {
html += "<li>" + data[i].name + "</li>"
}
ul.innerHTML = html;
</script>
</body>
</html>
运行结果:
模板字符串:
在ES6中引出了模板字符串,将上述demo可以改写为:(实现相同的效果,使字符串拼接更加灵活)
html += `<li>${data[i].name}</li>`//此时使用反引号
此时若出现换行情况不需要向传统字符串一样,再增加“ ”来连接字符串,即如下形式也是可以的:
html += `
<li
>${data[i].name}
</li>
`
箭头函数:
在ES5中定义函数:
function fn(){
}
在ES6中定义函数:
()=>{
}
//箭头函数
const fn2 = () => {
console.log("hello world!");
}
fn2();//结果为“hello world!”
箭头函数与普通函数区别:
①:this指向问题
②:不能使用arguments;arguments变量的作用是获取实参
③:不能当做构造函数
LG①:
var id = 1; //一个变量
var obj = { //一个对象
id: 2
}
function fn() {
setTimeout(function() {
console.log(this);
console.log(this.id);
}, 100)
}
fn.call(obj); //通过.call的方式调用fn()函数,改变this指向
结果:(由于setTimeout是异步方法,在此为100ms以后执行fn()。当前this指向的是系统本身window,所以this.id指向的是全局变量id。)
var id = 1; //一个变量
var obj = { //一个对象
id: 2
}
function fn() {
setTimeout(() => {
console.log(this);
console.log(this.id);
}, 100)
}
fn.call(obj); //通过.call的方式调用fn()函数,改变this指向
//注:
//箭头函数是没有this指向的,借助父级的this
结果:(此时this指向的是obj对象)
验证:
var id = 1; //一个变量
var obj = { //一个对象
id: 2
}
function fn() {
let that = this;
setTimeout(() => {
console.log(this === this);
console.log(this.id);
}, 100)
}
fn.call(obj); //通过.call的方式调用fn()函数,改变this指向
结果:(结果表明箭头函数的this指向和父级的this指向是一致的)
LG②:
const fn2 = () => {
console.log(arguments);
}
fn2(1, 2, 3, 4);
结果:
function fn() {
console.log(arguments);
}
fn(1, 2, 3, 4);
结果:
LG③:
function fn() {}
console.log(new fn(1, 2, 3, 4));
结果:
const fn2 = () => {
}
console.log(new fn2(1, 2, 3, 4));
结果: