ES6基本语法

发表于 | 分类于

ES6(ES2015)支持IE10+，Chrome，FireFox，移动端，NodeJS

转换方式
1.在线转换
2.提前编译(推荐)

变量

var

1.可以重复声明

2.无法限制修改

3.没有块级作用域

let

不能重复声明，变量-可以修改，有块级作用域

const

不能重复声明，常量-不能修改，有块级作用域

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
window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    for (var i=0; i<aBtn.length; i++){
        aBtn[i].onclick = function (){
            alert(i);
        }
    }
}
输出结果：3 3 3

window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    for (var i=0; i<aBtn.length; i++){
        (function (i){
            aBtn[i].onclick = function (){
                alert(i);
            };
        })(i);
    }
}
输出结果：1 2 3

window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    for (let i=0; i<aBtn.length; i++){
        aBtn[i].onclick = function (){
            alert(i);
        }
    }
}
输出结果：1 2 3

函数

1.如果只有一个参数，()可以省

2.如果只有一个return，{}可以省

1
2
3
4
function show(a){return a*2}
(a)=>{return a*2}
a=>{return a*2}
a=>a*2

函数的参数

1.参数扩展/数组展开

1
2
3
4
5
//收集参数
function show(a, b, ...args){}  //Rest Parameter必须是最后一个

//展开数组
alert(args);    //[]            //展开后的效果，跟直接把数组的内容写在这一样

2.默认参数

解构赋值

1.左右两边结构必须一样

2.右边必须是个东西

3.声明和赋值不能分开(必须在一句话里完成)

1
2
let [a, b, c] = [12, 5, 8];
let {a, b, c} = {a:12, b:5, c:8};

数组

map 映射

1
2
3
4
let score = [19, 85, 99, 25, 90]
let result = score.map(item=>item>=60?"及格":"不及格");
alert(score);
alert(result);

reduce 汇总

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//算总数
let arr = [12, 69, 180, 8763];
let result = arr.reduce(function (tmp, item, index){
    return tmp+item;
});
alert(result);

//算平均数
let arr = [12, 69, 180, 8763];
let result = arr.reduce(function (tmp, item, index){
    if (index != arr.length-1){
        return tmp+item;
    } else {
        return (tmp+item)/arr.length;
    }
});
alert(result);

filter 过滤器

1
2
3
4
5
6
7
8
9
10
let arr = [
    {title:'包1', price:35},
    {title:'包2', price:45},
    {title:'包3', price:55},
    {title:'包4', price:75}
];

let result = arr.filter(json=>json.price>=55);

alert(result);

forEach 循环(迭代)

1
2
3
4
5
let arr = [12, 5, 8, 9];

arr.forEach((item, index)=>{
    alert(index + ":" + item);
});

字符串

1.两个新方法

startsWith

1
2
var str = 'http://www.baidu.com';
str.startsWith('http://'');

endsWith

1
2
var str = '1.txt';
str.endsWith('.txt');

2.字符串模板

1
2
let a = 12;
let str = `a${a}bc`;    //str = "a12bc"

字符串连接

1.可以直接放入字符串

2.可以折行

面向对象

1.class关键字，构造器和类分开了

2.class里面直接加方法

3.继承

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//JavaScript
function User(name, pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName = function (){
    alert(this.name);
}
User.prototype.showPass = function (){
    alert(this.pass);
}

function VipUser(name, pass, level){
    User.call(this, name, pass);
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function (){
    alert(this.level);
}

var u1 = new VipUser('name', 'pass', 3);
u1.showName();  //name
u1.showPass();  //pass
u1.showLevel(); //3


//ES6
class User{
    constructor(name, pass){
        this.name = name;
        this.pass = pass;
    }

    showName(){
        alert(this.name);
    }

    showPass(){
        alert(this.pass)
    }
}

class VipUser extends User{
    constructor(name, pass, level){
        super(name, pass);

        this.level = level;
    }

    showLevel(){
        alert(this.level);
    }
}

let v1 = new User('name', 'pass', 3);
v1.showName();  //name
v1.showPass();  //pass
v1.showLevel(); //3

面向对象应用 —— React

1.组件化 —— class

2.JSX == babel == browser.js

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
36
37
38
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.js"></script>
<script type="text/babel">
    class Item extends React.Component{
        constructor(...args){
            super(...args);
        }

        render(){
            return <li>{this.props.str}</li>;
        }
    }

    class List extends React.Component{
        constructor(...args){
            super(...args);
        }

        render(){
            return <ul>
                {this.props.arr.map(a=><Item str={a}></Item>)}
            </ul>;
        }
    }

    window.onload = function (){
        let oDiv = document.getElementById('div1');

        ReactDOM.render(
            <List arr={['123', '456', '789']}></List>,
            oDiv
        );
    };
</script>
<body>
    <div id="div1"></div>
</body>

JSON:

1.JSON对象

函数 描述
JSON.stringify 用于将 JavaScript 值转换为 JSON 字符串
JOSN.parse 用于将一个 JSON 字符串转换为 JavaScript 对象

2.简写 

1
2
3
4
5
6
7
8
9
let a = 1;
let b = 2;
let json1 = {a, b: 2, c: 3}; //名字(key)和值(value)一样可以只写一个, 如:a == a:a
let json2 = {
    a:1,
    show: function (){      //: function可以省略
        alert(this.a);      //1
    }
};

json的标准写法

1.只能用双引号

2.所有的key都必须用引号包起来

1
2
{"a": 1, "b": 2}  
{"a": "1", "b": "2"}

Promise —— 承诺

异步: 操作之间不相关，同时进行多个操作，代码更复杂
同步: 操作之间相关，不能同时进行多个操作，代码简单 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//异步
ajax('/banners', function (bannner_data){
    ajax('/hotItems', function (hotitem_data){
        ajax('/slides', function (slide_data){

        }, function (){
            alert('读取失败');
        });
    }, function (){
        alert('读取失败');
    });
}, function (){
  alert('读取失败');
});

//同步
let banner_data = ajax_async('/banners');
let hotitem_data = ajax_async('/hotItems');
let slide_data = ajax_async('/slides');

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    //方法一
    function createPromise(url){
        return new Promise(function (resolve, reject){
            $.ajax({
                url: url,
                dataType: 'json',
                success(arr){
                    resolve(arr);
                },
                err(arr){
                    reject(arr);
                }
            })
        });
    }

    Promise.all([
        createPromise('arr.txt'),
        createPromise('josn.txt')
    ]).then(function (arr){
        let [res1, res2] = arr;

        alert('全都成功了');
        alert(res1);    //[1, 2, 3]
        alert(res2);    //{"a": 1, "b": 2, "c":3}
    }, function (){
        alert('至少有一个失败了');
    })

    //方法二
    Promise.all([
        $.ajax({url: 'arr.txt', dataType: 'json'}),
        $.ajax({url: 'josn.txt', dataType: 'json'})
    ]).then(function (results){
        let [arr, json] = results;

        alert('全都成功了');
        console.log(arr, json); //[1, 2, 3], {"a": 1, "b": 2, "c":3}
    }, function (){
        alert('至少有一个失败了');
    })
</script>

//arr.txt
[1, 2, 3]

//json.txt
{"a": 1, "b": 2, "c":3}

有了Promise的异步 

1
2
3
4
5
Promise.all([$.ajax(), $.ajax()]).then(results=>{
    //对了
}, err=>{
    //错了
});

Promise.race 竞速

1
2
3
4
5
Promise.race([
    $.ajax({url: '服务器1'}),
    $.ajax({url: '服务器2'}),
    $.ajax({url: '服务器3'})
]);

generator —— 生成器

不能用箭头函数 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function *show(){
    alert('a');
    yield;
    alert('b');
}
let genObj = show();
genObj.next();  //a
genObj.next();  //b


function 函数(){
    代码...
    ajax(xxx, function (){  //回调函数
        代码...
    });
}

function *函数(){
    代码...
    yield ajax(xxx);
    代码...
}

yield

传参
(第一个next没法给yield传参，只能用传统的传参方式) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function *show(num1, num2){
    alert('$(num1), $(num2)');
    alert('a');

    let a = yield;

    alert('b');
    alert(a);

    return;
}

let gen = show(3, 4);
gen.next(1);    //3, 4  a
gen.next(2);    //b  2

返回 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function *show(){
    alert('a');

    yield 1;

    alert('b');

    return 2
}

let gen = show();

let res1 = gen.next();
console.log(res1);      //a  {value: 1, done:false}

let res2 = gen.next();
console.log(res2);      //b  {value: 2, doen: true}

Promise —— 用于批量读取

generator —— 逻辑性用于逻辑性读取

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//回调
$.ajax({url: 'getUserData', dataType: 'json', success(userData){
    if (userData.type == 'VIP'){
        $.ajax({url: 'getVIPItems', dataType: 'json', success(items){
            //生成...
        }, error(err){
            alert('错了');
        }});
    } else{
        $.ajax({url: 'getItems', dataType: 'json', success(items){
            //生成...
        }, error(err){
            alert('错了');
        }});
    }
}, error(err){
    alert('错了')
}})


//Promise
Promise.all([
    $.ajax({url: 'getUserData', dataType:'json'})
]).then(results=>{
    let userData = results[0];

    if (userData.type == 'VIP'){
        Promise.all([
            $.ajax({url: 'getVIPItems', dataType: 'json'})
        ]).then(results=>{
            let items = results[0];
            //生成...
        }, err=>{
            alert('错了');
        });
    } else{
        Promise.all([
            $.ajax({url: 'getItems', dataType: 'json'})
        ]).then(results=>{
            let items = results[0];
            //生成...
        }, err=>{
            alert('错了');
        });
    }
});


//generator
runner(function *(){
    let userData = yield $.ajax({url: 'getUserData', dataType: 'json'});

    if (userData.type == 'VIP'){
        let items = yield $ajax({url: 'getVIPItems', dataType "json"});
    } else{
        let items = yield $ajax({url: 'getItems', dataType "json"});
    }
    //生成...
})

koa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const koa = require('koa');
const mysql = require('koa-mysql');

let db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '132456'
    database: '20180919'
    })

server.user(function *(){
    let data = yield db.query(`SELECT * FROM user_table`);

    this.body = data;
})

server.listen(8080);

ES7预览

数组 includes

数组是否包含某个值 

1
2
3
let arr = [1, 2, 3];

alert(arr.includes('1'));   //true

数组 keys/values/entries

for…of //下标(key)
for…in //值(value) 不能用于json

值 描述
keys 把所有的key拿出来
values 把所有的value拿出来
entries(实体) 把所有的键值对拿出来

幂

1
alert(2**3);    //8

padStart/padEnd

1
2
alert('a'.padStart(5, '0'));  //0000a
alert('a'.padEnd(5, '0'));    //a0000

async await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
async function show(){
    alert('a');
    await;
    alert('b');
}

//函数自带runner
async function readData(){
    let data1 = await $.ajax({url: 'data1.txt', dataType: 'json'});
    let data2 = await $.ajax({url: 'data2.txt', dataType: 'json'});
    let data3 = await $.ajax({url: 'data3.txt', dataType: 'json'});

    console.log(data1, data2, data3);
}

//可以使用箭头函数
let readData = async ()=>{
    let data1 = await $.ajax({url: 'data1.txt', dataType: 'json'});
    let data2 = await $.ajax({url: 'data2.txt', dataType: 'json'});
    let data3 = await $.ajax({url: 'data3.txt', dataType: 'json'});

    console.log(data1, data2, data3);
}