ES6的常见知识和常用语法

ES6常用语法

ES6

  • ECMA Script, Javascript的语言标准
  • 提升JS编写大型的复杂的应用程序的能力(模块化)
  • Babel: ES6 -> ES5的转换器

let, const

  • let定义变量,const定义常量
1
2
3
4
5
6
let r = 2;
r = 4;
console.log(r);
---
const pi = 3.14;
pi = 10;//此时会报错
  • 不能重复定义
1
2
3
4
5
6
var foo = 1;
var foo = 2;
console.log(foo); //2
---
let bar = 1;
let bar = 2; //报错
  • 块级作用域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 块级作用域
if(true) {
var test = 1;
}
console.log(test); //1
---
if(true) {
let test1 = 2;
}
console.log(test1); //报错

// 块级作用域2
let arr = [1, 2, 3, 4];
for(var i = 0, iLength = arr.length; i < iLength; i++){
//do sth
}
console.log(i); // 4 (说明此时程序已经正确执行4次,但是这个变量i本身并不需要作为全局变量)
---
let arr = [1, 2, 3, 4];
for(let i = 0, iLength = arr.length; i < iLength; i++){
//do sth
}
console.log(i); //报错
  • 不存在变量提升
1
2
3
4
5
6
7
8
9
console.log(foo);
var foo = 1; // undefined
//执行顺序
var foo;
console.log(foo);
foo = 1;
---
console.log(foo);
let foo = 1; // 报错

解构赋值

数组类型的解构赋值

1
2
3
4
5
6
let a, b, rest;
[a, b] = [1, 2]; //赋值
----
let a, b, rest;
[a, b, ...rest] = [1, 2, 3, 4, 5, 6];
//结果为 a = 1; b = 2; rest = [3,4,5,6];

对象解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
let a, b;
({
a,
b
} = {
a: 1,
b: 2
}) //a = 1, b = 2
----
let a, b, c, rest;
[a, b, c = 3] = [1, 2]; //a = 1, b = 2, c = 3 (默认值)
[a, b, c] = [1, 2]; //a = 1, b = 2, c = undefined

例子:使用结构赋值做变量交换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let a = 1;
let b = 2;
[a, b] = [b, a];
//a = 2, b = 1
----
function f() {
return [1, 2];
}
let a, b;
[a, b] = f(); //a = 1, b = 2
----
function f() {
return [1, 2, 3, 4, 5];
}
let a, b, c;
[a, , , b] = f(); //a = 1,b = 4
----
function f() {
return [1, 2, 3, 4, 5];
}
let a, b, c;
[a, ...b] = f(); //a = 1,b = [2,3,4,5]
[a, , ...b] = f(); //a = 1,b = [3,4,5]

例子:对象结构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//对象解构赋值
let o = {
p: 42,
q: true
};
let {
p,
q
} = o;
console.log(p, q); // 42 true
----
let {
a = 10, b = 5
} = {
a: 3
}; //a = 3, b = 5
----
let metaData = {
title: 'abc',
test: [{
title: 'test',
desc: 'desc'
}]
}
let {
title: esTitle,
test: [{
title: cnTitle
}]
} = metaData; //abc, test

箭头函数

  • 参数 => 表达式/语句
1
2
3
4
5
6
7
let value = 2;
let double = x => 2 * x;
let treble = x => {
return 3 * x;
}
console.log('double: ', double(value)); //4
console.log('treble: ', treble(value)); //6
  • 继承外层作用域(没有独立作用域)
1
2
3
4
5
6
7
8
9
10
var obj = {
commonFn: function(){
console.log(this);
},
arrowFn: () => {
console.log(this);
}
}
obj.commonFn(); //this 指向obj作用域
obj.arrowFn(); //this 指向了obj所在作用域,window
  • 不能用作构造函数
1
2
3
4
5
let Ani = function(){}
let ani = new Ani(); //OK
---
let Ani = () => {}
let ani = new Ani(); //报错
  • 没有prototype属性
1
2
3
4
5
let commonFn = function(){};
let arrowFn = () => {};

console.log(commonFn.prototype); //constructor
console.log(arrowFn.prototype); //undefined

模板字符串

  • 反引号标识 ``
  • 支持多行字符串
1
2
3
4
5
6
7
//基本用法
let str = `
<div>
<h1 class="title">Test</h1>
</div>
`;
document.querySelector('body').innerHTML = str; //在body中显示字符串
  • 支持变量和表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//嵌套变量的用法
let name = 'Jmeow';
let str = `
<div>
<h1 class="title">${name}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

//嵌套函数的用法
let getName = () => {
return 'Jmeow Test';
};
let str = `
<div>
<h1 class="title">${getName()}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

//循环嵌套
let names = ['AA', 'BB', 'CC'];
let str=`
<ul>
${
names.map(name => `<li>Hi, I am ${name}</li>`).join('')
}
</ul>
`;
document.querySelector('body').innerHTML = str;

Promise对象

Promise关键词:

  • resolve 预期结果正确
  • reject 预期结果失败
  • then
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//Promise结构
new Promise((resolve, reject) => {
//异步函数
$.ajax({
url: 'http://z.cn/user/get_user_info.do',
type: 'post',
success(res){
resolve(res);
},
error(err){
reject(err);
}
});
}).then((res) => {
//resolve
console.log('success:', res);
},(err) => {
//reject
console.log('success:', err);
});

在没有使用Promise之前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({
url: 'http://z.cn/user/get_user_info.do',
type: 'post',
success(res){
$.ajax({
url: 'http://z.cn/user/get_count.do',
type: 'get',
success(res){
resolve(res);
},
error(err){
reject(err);
}
});
},
error(err){
//err
}
});

使用Promise的链式请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var promiseFn1 = new Promise((resolve, reject) => {
//异步函数
$.ajax({
url: 'http://z.cn/user/get_user_info.do',
type: 'post',
success(res){
resolve(res);
},
error(err){
reject(err);
}
});
});
var promiseFn2 = new Promise((resolve, reject) => {
//异步函数
$.ajax({
url: 'http://z.cn/user/get_count.do',
type: 'get',
success(res){
resolve(res);
},
error(err){
reject(err);
}
});
});

promiseFn1.then(() => {
//success
console.log('promiseFn1 success');
return promiseFn2;
}).then(() => {
console.log('promiseFn2 success');
});

面向对象

  • 关键词:class
  • 语法糖 -> 对应function
  • 构造函数,constructor
1
2
3
4
5
6
7
8
9
10
11
class Animal{
constructor(age){
this.name = 'ani';
this.age = age;
}
getName(){
return this.name + this.age;
}
}
let animal = new Animal('20');
console.log(animal.getName()); //ani20

类的继承

  • extends 类的继承
  • super 调用父类的构造函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//类的继承
class Animal{
constructor(){
this.name = 'ani';
}
getName(){
return this.name;
}
}
//extends后是没有this关键字的,如需要使用,需要使用super()
class Cat extends Animal{
constructor(){
super();
this.name = 'cat';
}
}
let animal = new Animal();
let cat = new Cat();
console.log(animal.getName());
console.log(cat.getName());

对象

  • 对象里属性的简写
  • 对象里方法的简写
  • 属性名可以为表达式
  • 其他扩展
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//对象的用法
//ES旧语法
var name = 'Jmeow';
age = 18;
var obj = {
name: name,
age: age,
getName: function(){
return this.name;
},
getAge: function(){
return this.age;
}
}
// ES6语法
let name = 'Jmeow',
age = 18;
let obj = {
//变量名可以直接用作对象的属性名称
name,
age,
//对象里的方法可以简写
getName(){
return this.name;
},
//表达式作为属性名或方法名
['get' + 'Age'](){
return this.age;
}
}

//Object对象的扩展
Object.keys(obj);
Object.assign({a:1},{b:2}); // {a:1 ,b:2}
Object.assign({a:1},{a:2, b:2}); // {a:2 ,b:2}

ES6模块化

  • 解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程
  • CommonJS, AMD, CMD

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import {
str as string,
obj,
fn
} from './module.js';
import foo from './module.js';

console.log('name:', obj.name);
// console.log('str:', str);
console.log('string:', string);
console.log('fn:', fn);

console.log(foo);

module.js

1
2
3
4
5
6
7
8
9
10
11
12
13
let str = 'string';
let obj = {
name: 'Jmeow'
};
let fn = () => {
console.log('module test');
};
export {
str,
obj,
fn
}
export default {a:1}

index.html

1
<script type="module" src="./index.js"></script>
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×