ES5与ES6的小差异
变量的定义
ES6与ES5的区别
ES5:
<script>
console.log(username);
var username;
var username = 'longda';
console.log(username);
</script>
打印结果:
分析上边的代码,发现第一个console.log()居然打印出了undefined,可是在这个之前并没有声明username这个变量.之所以会出现这种情况的原因是ES5的一个特性,这种情况被称为变量提升.
ES6:
<script>
console.log(username);
let username = 'LongDa';
</script>
代码执行结果:
分析上边的结果,ES6中使用let声明变量,在声明之前打印,结果将会报错.也就说明ES6不存在变量提升这种特性.
var和let定义的变量的区别
var定义的变量:
只有全局作用域和函数作用域.
let定义的变量:
有全局作用域和函数作用域、块级作用域。
<script>
if (true) {
var username = 'longda';
let age = 18;
} console.log(username);
console.log(age);
</script>
执行结果：
分析打印结果，由于let拥有块级作用域，而通常一个大括号（{}）就理解为一个作用域，打印age是在块级作用域外打印的，所以会报错显示变量未定义。
let不能重复定义变量。
<script>
var username = 'longda';
var username = 'xiaomo';
console.log(username);
</script>
打印结果如下：
分析打印结果，var可以重复定义变量。
<script>
var username = 'longda';
let username = 'xiaoxiaomo';
console.log(username);
</script>
打印结果如下：
分析打印结果，提示username这个变量已经存在，所以说let不能重复定义变量。
模板字符串
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
oDiv.innerHTML = '<h1>Hello LongDa' +
'<h2>Hello XiaoMo</h2>' +
'</h1>';
</script>
</body>
代码执行结果：
当使用innerHTML方法进行代码拼接是，代码片段之间用加号（+）连接。
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
let username1 = 'LongDa';
let username2 = 'XiaoMo'; oDiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h2>Hello ${username2}</h2>
`
</script>
</body>
代码执行结果如下：
也可以使用反引号（``）包含代码段，代码直接按照原来的格式直接书写就可以。
反引号中的代码片段可以进行变量赋值替换，可以提高代码的灵活性，使用${变量名}。
数据结构和赋值
数组
<script>
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c);
</script>
打印结果如下：
分析代码，发现ES6支持多变量同时赋值。
对象
<script>
let obj = {
username: 'LongDa',
age: 18,
};
let {username, age} = obj;
console.log(username, age);
</script>
代码执行结果如下：
<script>
let obj = {
username: 'LongDa',
age: 18,
};
let {username: user, age: age1} = obj;
console.log(user, age1);
</script>
代码执行结果：
两个代码比较发现，赋值不同， 但是打印的结果相同。let {username: , age: }中username对应的值没写时，默认使用username，age同样也是。第二个示例则是自定义变量的名字。
图示：
两个变量交换值
<script>
let a = 1;
let b = 2; [a, b] = [b, a];
console.log(a, b);
</script>
代码执行的结果：
执行结果显示，变量交换值成功。
函数的扩展
<script>
// 默认参数
function foo(x, y=10) {
let number = y;
return number;
} ret = foo(1, 2);
ret1 = foo(1);
ret2 = foo(1, 0);
console.log(ret);
console.log(ret1);
console.log(ret2);
</script>
当y不传参数时，使用默认值；当传参数时，使用传过来的值。
箭头函数
<script>
// 箭头函数
// 一个参数
let foo = v => v;
ret = foo(10);
console.log(ret)
</script>
代码打印结果：
<script>
// 箭头函数
// 0个或者多个参数
let bar = (x, y) => { return x + y;
}; ret = bar(1, 2); console.log(ret)
</script>
<script>
function foo() {
console.log(this);
} let bar = () => console.log(this); let obj = {
foo: foo,
bar: bar,
}; foo();
obj.foo();
obj.bar();
</script
打印结果：
foo()是普通函数，他的this是全局的；
obj.foo()是通过obj这个对象调用的这个this就是指向的谁；
obj.bar()中bar()是箭头函数，指向的是箭头函数。
类
ES5定义类:
function Person() {
this.username = 'LongDa';
this.age = 20;
} // 函数
Person.prototype.showInfo = function () {
console.log(this.username, this.age);
}; // 定义显示方法
let LongDa = new Person(); // 实例化
LongDa.showInfo() // 调用定义的方法
代码打印结果：
ES6定义类：
<script>
class Person{
constructor (username, age) {
this.username = username;
this.age = age;
} // 定义类 showInfo() {
console.log(this.username, this.age);
}
} // 定义方法 let XiaoMo = new Person('XiaoMo', 18); // 实例化方法
XiaoMo.showInfo(); // 调用方法
</script>
代码打印结果：
ES6中类的继承
<script> // 父类
class LongDa { constructor (username, age, account=10000) {
this.username = username;
this.age = age;
this.account = account;
} showInfo() {
console.log(this.username, this.age, this.account);
}
} // 子类继承父类
class XiaoMo extends LongDa {
constructor(username, age) {
super();
this.username = username;
this.age = age;
}
} let xiaoMo = new XiaoMo('XiaoMo', 18); xiaoMo.showInfo();
</script>
代码打印结果：
单体模式
<script>
let obj = {
name: 'LongDa',
foo() {
console.log(this.name);
}
}; obj.foo()
</script>
代码打印结果：
11