<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="testid">
测试div
</div>
<script src="http://blog.ropon.top/js/jquery.min.js"></script>
<script>
//1 let命令声明变量，但所声明变量只在let命令所在代码块内有效
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
//a[6]();
//var存在变量提升现象，即变量可以在声明之前使用值为undefined
//console.log(aa);
var aa = 33;
//console.log(bb); //报错
let bb = 44;
let cc = 55;
//let cc = 66; //报错不允许重复声明
//块级作用域
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "test";
}
}
//f();
var s = "hello";
for (let i = 0; i < s.length; i++) {
console.log(s[i]);
}
//console.log(i);
//总结：let命令 不存在变量提升 不允许重复声明
//const命令声明变量不得改变值，也就是const一旦声明变量就必须立即初始化
//const dd; //报错
const ee = 66;
if (true) {
const ff = 5;
}
//console.log(ff);//报错
//与let命令一样，只在声明所在块级作用域内有效
//2 模板字符串 在反引号` `之间的字符串 若要在模板字符串中使用反引号，需要在前面加反斜线\转义
//如果使用模板字符串表示多行字符串，所有空格和缩进都会保留在输出之中
let gg = "test变量"
$("#testid").append(
`<p>模板字符串实例</p>${gg}
<p>\`Check Now\`</p>
<ul>
<li>111</li>
<li>222</li>
</ul>`
);
//3 箭头函数 基本语法 (=>) 定义函数
var func = a => a;
//等同于
var func = function (a) {
return a;
};
//使用一个圆括号()代表参数部分
var func = () => 5;
//等同于
var func = function () {
return 5
};
//多个形参
var sum = (num1, num2) => num1 + num2;
//等同于
var sum = function (num1, num2) {
return num1 + num2;
};
//注意 函数体内的this对象 是定义时所在的对象 而不是使用时所在的对象
var name = "ropon";
var person = {
name: "pengge",
age: 18,
//fav: function () {
//fav: () => {
fav() { //对象单体模式
console.log(this);
console.log(this.name);
}
};
person.fav();
function f1() {
setTimeout(() => {
console.log("id", this.id);
}, 1000);
}
var id = 22;
f1.call({id: 24});
//不能使用arguments对象 该对象在函数体内不存在
var person2 = {
name: "pengge",
age: 18,
fav: () => {
//console.log(arguments);//报错
}
};
person2.fav("test1", "test2");
class Person {
constructor(name="ropon12", age=18) {
this.name = name;
this.age = age;
}
showname() {
console.log(this.name);
}
showage() {
console.log(this.age);
}
}
let P = new Person();
P.showname();
</script>
</body>
</html>
