Es6常用语法
目录：
变量定义
let
变量提升
使用var的情况下
<script>
console.log(why);
var why='wanghongyu';
</script>
浏览器console显示
undefined
等价于
<script>
var why;
console.log(why);
var why='wanghongyu';
</script>
而使用let的情况下
<script>
console.log(why);
let why='wanghongyu';
</script>
浏览器console显示
Uncaught ReferenceError: Cannot access 'why' before initialization
可重复定义
<script>
var why='wanghongyu'
var why='wanghongyu2'
console.log(why);
let why='wanghongyu3'
console.log(age);
</script>
浏览器console显示
Uncaught SyntaxError: Identifier 'why' has already been declared
块级作用域
<script>
console.log(why);
let why='wanghongyu';
</script>
浏览器console显示
wanghongyu
Uncaught ReferenceError: age is not defined
const
const有let的特性之外，还有以下特性
定义后不能修改
<script>
const why='wanghongyu'
why='wanghongyu2'
console.log(why);
</script>
浏览器console显示
Uncaught TypeError: Assignment to constant variable
定义必须赋值
<script>
const why;
</script>
浏览器console显示
Uncaught SyntaxError: Missing initializer in const declaration
模板字符串
反引号进行字符串拼接
正常字符串拼接
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById("app");
oDiv.innerHTML = "<h1>hello Es6</h1>" +
"<h2>hello vue</h2>";
</script>
</body>
使用反引号进行字符串拼接
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById("app");
oDiv.innerHTML = `
<h1>hello Es6</h1>
<h2>hello vue</h2>
`
</script>
</body>
使用变量
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById("app");
let a = "aaa";
let b = "bbb";
oDiv.innerHTML = `
<h1>hello ${a}</h1>
<h2>hello ${b}</h2>
`;
</script>
</body>
数据的结构和赋值
数组
<script>
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c);
</script>
浏览器console显示
1 2 3
对象
<script>
let obj = {
username: "wanghongyu",
age: 25
};
let {username, age} = obj;
console.log(username, age)
</script>
或者
let {username: un, age: ag} = obj;
console.log(un, ag);
浏览器console显示
wanghongyu 25
变量替换
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);
浏览器console显示
2 1
函数扩展
函数默认值
正常情况下如果对一个变量赋值，如果y不存在则赋值为10可以写成以下方式
<script>
function foo(x, y) {
let number = y || 10;
return number;
}
ret1 = foo(1, 2);
ret2 = foo(1);
ret3 = foo(1, 0);
console.log(ret1);
console.log(ret2);
console.log(ret3);
</script>
浏览器console显示
2
10
10
但是对于传入值为0就失效了
在Es6中对函数是可以设置默认值
function foo(x, y=10) {
let number = y;
return number;
}
浏览器console显示
2
10
0
箭头函数
类似python的lambda表达式
<script>
// 一个参数
let foo = v => v;
ret1 = foo(10);
console.log(ret1);
// 0个或多个参数
let bar = (x, y) => {return x+y;};
ret2 = bar(1, 2);
console.log(ret2);
</script>
浏览器console显示
10
3
this在箭头函数中被使用和普通的函数被使用是不一样的
<script>
function foo() {
console.log(this);
}
let bar = () => console.log(this);
let obj = {
foo: foo,
bar: bar
};
foo();
obj.foo();
bar();
obj.bar();
</script>
浏览器console显示
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
{foo: ƒ, bar: ƒ}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
- 箭头函数的this指向定义时的作用域
- 普通函数的this指向调用者的作用域
类
class关键字定义方法
在Es5中的写法
<script>
function Person() {
this.why = "wanghongyu";
this.age = 25
}
Person.prototype.showInfo = function() {
console.log(this.why)
}
let wanghongyu = new Person();
wanghongyu.showInfo()
</script>
在Es6中
<script>
class Person {
constructor (why, age) {
this.why = why;
this.age = age;
}
showInfo() {
console.log(this.why, this.age);
}
}
let wanghongyu = new Person("wanghongyu", 25)
wanghongyu.showInfo()
</script>
要点就是
- 必须要有constructor构造方法，如果没有为constructor(){}
- 必须使用new来进行实例化
类的继承
<script>
class Father {
constructor (name, age, account=100) {
this.name = name;
this.age = age;
this.account = account;
}
showInfo() {
console.log(this.name, this.age, this.account);
}
}
class Son extends Father {
constructor(name, age) {
super();
this.name = name;
this.age = age;
}
}
let yyy = new Son("yyy", 25)
yyy.showInfo()
</script>
浏览器console显示
yyy 25 100
需要子类的constructor方法里写上super方法
单体函数
<script>
let obj = {
name: "wanghongyu",
foo() {
console.log(this.name);
}
};
obj.foo();
</script>
浏览器console显示
wanghongyu
这个foo就是单体函数，不能使用箭头函数，因为定义的时候this就固定了
