Frontend / Javascript
8 分钟 读完 (大约 1212 个字) 0次访问

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>
# ,
前端本地存储相关使用方式
使用swagger自动生成html文档
关注我

链接

分类

标签云

Android CSS ES6 Frontend HTML5 Java Javascript Python Redis Socket Taro ThreadLocal Tools TypeScript 日常 算法

归档

标签

Android 25
CSS 2
ES6 1
Frontend 2
HTML5 4
Java 8
Javascript 2
Python 1
Redis 1
Socket 1
Taro 1
ThreadLocal 1
Tools 1
TypeScript 1
日常 1
算法 1

归档

标签

Android 25
CSS 2
ES6 1
Frontend 2
HTML5 4
Java 8
Javascript 2
Python 1
Redis 1
Socket 1
Taro 1
ThreadLocal 1
Tools 1
TypeScript 1
日常 1
算法 1
Your browser is out-of-date!

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

×