一、var、const、let三者的区别
var:变量
const:常量
let：块级变量（只在if\for\函数等块级内有效）
二、通过${}调用变量拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
es6的特性
<p></p>
</body>
<script>
var name = "张飞";
var sex = "男生";
var age = 20;
// 原js操作样式
document.write("我叫" + name + "，我是" + sex + "，今年" + age + "岁<br>");
// Es6操作样式
document.write(`我叫${name}，我是${sex}，今年${age}岁`);
</script>
</html>
三、从数组、对象、函数中解析变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
es6的特性
<p></p>
</body>
<script>
// Es6解析数组
var num = [111, 222, 333, 444, 555];
[a, b, , , e] = num;
document.write(a + "," + b + "," + e + "<br>");
// Es6解析对象
var obj = { name: "张飞", sex: "男", old: 18 };
var { name, old } = obj;
document.write(name + "," + old+"<br>");
// Es6解析函数内传参变量
function dog() {
let name = "花花";
let color = "黑色";
// return {name,color};
return{name,color}
}
var {name,color}=dog();
document.write(name+","+color);
</script>
</html>
四、对象中函数与函数外变量的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body> </body>
<script>
var obj = {
name: "张飞",
getName:function(){
return this.name;
},
getName2(){
document.write("执行getName2的结果："+this.getName());
return "";
}
}
document.write(obj.getName()+"<br>")
document.write(obj.getName2())
// console.log(obj.getName2());
</script>
</html>
五、Es6中forEach循环遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
var arr = ["a", "b", "c", "d", "e"];
// 原js循环遍历
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + ",");
}
document.write("<br>");
// Es6中forEach循环遍历
arr.forEach((item, index) => {
document.write(item + ",");
});
</script>
</html>
六、实现两个数组合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
var arr1 = ["a", "b", "c", "d", "e"];
var arr2 = [1, 2, 3, 4, 5];
var arr3 = [...arr1,...arr2];
console.log(arr3);
</script>
</html>
