笔记 | ECMAscript6 基本语法

ECMAscript 6 基本语法

1.变量

var

（1）可以重复声明

（2）无法限制修改

（3）没有块级作用域

let（变量）

（1）不能重复声明

（2）变量-可以重复修改

（3）有块级作用域

const（常量）

（1）不能重复声明

（2）常量-不能重复修改

（3）有块级作用域

解释一下块级作用域：使用var和function定义的变量a和方法test可以在大括号外边被访问，而使用let和const定义的变量和常量无法在大括号外面被访问。

{
    var a = 1;
    let b = 2;
    const c = 3;
    function test(){
        console.log('123');
    }
}
 
console.log(a); // 1;
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
test(); // test方法可以正常执行

参考链接：https://blog.csdn.net/mocha_wang/article/details/81539227

2.函数

箭头函数（简单来说就是去掉function加上箭头）

（1） 如果只有一个参数，（）可以省略。

（2）如果只有一个return，{}可以省略。

例子：

<script>
            let show=function(){
                alert("abc");
            }

            show();
        </script>

等效于：

 <script>
            let show=()=>{
                alert("abc");
            }

            show();
        </script>

箭头函数实际上就是function函数的简写。

3.函数的参数与扩展

函数的参数

（1）参数扩展/数组展开

（2）默认参数

参数扩展

（1）收集剩余的参数参数

<script>
            function show(a,b,...args){
                alert(a);
                alert(b);
                alert(...args);
            }

            show(1,2,3,4,5,6);
        </script>

…args叫做Rest Parameter，必须是最后一个。

（2） 展开参数

…arr => 1,2,3

*展开后的效果，跟直接把数组的内容写在这儿一样。

<script>
            let arr=[1,2,3];
            function show(a,b,c){
                alert(a);
                alert(b);
                alert(c);
            }
            show(...arr);
        </script>

完全可以像上面一样写。

let arr1=[1,2,3];
let arr2=[4,5,6];
alert([...arr1,...arr2]);

<script>
            function show(...args){
                fun(...args);
            }

            function fun(a,b){
                alert(a+b);
            }

            show(12,45);
        </script>

4.解构赋值

（1）左右结构必须一样

let [a,b,c]=[1,2,3];        //赋值采用解构赋值
let {a,b,c}={a:12,b:5,c:10};//json采用解构赋值
console.log(a,b,c);

还能这样写：

let [json,arr,num,str] = [{a:12,b:5},[1,2,3],8,"hello world"];
console.log(json,arr,num,str);

let [a,b]={a:12,b:5};//注意一：左右结构不一样，编译不通过

（2）右边必须是个合法的类型

let {a,b}={12,5};//注意二：右边不是个合法的东西，编译不通过

（3）声明和赋值不能分开，必须在一句话完成。

let [a,b];//这不是一个合法的声明方式
[a,b]=[12,5];

let [a,b]=[12,5];//解构赋值：声明和赋值必须一起用。合法。

5.数组

map，即映射。一个对一个，进多少出来多少

例子：

[12,58,99,86,45,91]

[不及格，不及格，及格，及格，不及格，及格]

成绩的映射。

         <script>
            let score=[57,45,14,22,69,98,100,10];
            let result=score.map(item=>item>=60?'及格':'不及格');//箭头函数
            alert(score);
            alert(result);
        </script>

reduce，即汇总。一堆出来一个。

比如：算个总数、算个平均数。

        // 求和
        let arr = [12,69,180,8763];
        let result = arr.reduce(function(tmp,item,index){
            // index代表下标，item代表数组里面的数，tmp类似于中间结果。
            return tmp+item;
        });
        alert(result);

用图说明：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EpIQkfS7-1599661354427)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909003642463.png)]

// 求平均
        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，过滤器。

<script>
            // 筛选出3的倍数
            let arr = [12,5,8,99,27,36,75,11];
            let result = arr.filter(item=>{
                if(item%3==0){
                    return true;
                }else{
                    return false;
                }
            });
            alert(result);
        </script>

可以简化代码：

<script>
            // 筛选出3的倍数
            let arr = [12,5,8,99,27,36,75,11];
            let result = arr.filter(item=>item%3==0);
            alert(result);
        </script>

实例2：

<script>
            let arr = [
                {title:'男士衬衫',price:150},
                {title:'男士鞋',price:888},
                {title:'女士包包',price:3288},
                {title:'女士鞋',price:688}
            ];

            let result = arr.filter(json=>json.price>=600);
            console.log(result);
        </script>

forEach，循环（迭代）遍历数组。

<script>
        let arr = [12,5,7,8,4]
        arr.forEach((item,index)=>{
            alert(index + ":" + item);
        })
    </script>

6.字符串

多了两个新方法：starsWith()、endsWith()

startsWith 返回布尔值 可用于判断一种类型。

<script>
        let str = 'https://www.baidu.com';

        if(str.startsWith('http://')){
            alert('普通网址');
        }else if(str.startsWith('https://')){
            alert('加密网址');
        }else if(str.startsWith('git://')){
            alert('git地址');
        }else{
            alert('其他');
        }
    </script>

endsWith 返回布尔值 常见可用于后缀名判断文件类型。

<script>
        let str = '1.jpg';
        if(str.endsWith('.jpg')){
            alert('JPG文件');
        }else if(str.endsWith('.txt')){
            alert('文本文件');
        }else if(str.endsWith('.rar')){
            alert('压缩文件');
        }else{
            alert('其他文件类型');
        }
    </script>

字符串模板

以往都是做字符串连接，有了字符串模板后，可以直接把东西塞到里面去。用`反引号代表字符串模板，用$引用内容。可以折行，在拼凑大段的html代码尤其好用。

<script>
        let title = '标题';
        let content = '内容';
        let str = `<div>
        <h1>${title}</h1>
        <p>${content}</p>
        </div>`;
    </script>

7.ES6面向对象

class关键字，将构造器、类分开。

class里面直接加方法

原生JavaScript关于面向对象的写法：

<script>
        function User(name,pass){
            this.name = name;
            this.pass = pass;
        }
        User.prototype.showName = function(){
            alert(this.name);
        }
        User.prototype.showPass = function(){
            alert(this.pass);
        }

        var u1 = new User("张三",'123456')
        u1.showName();
        u1.showPass();
    </script>

ES6中面向对象的写法：类似java的写法。

<script>
        class User{
            constructor(name,pass){
                this.name = name;
                this.pass = pass;
            }
            showName(){
                alert(this.name);
            }
            showPass(){
                alert(this.pass);
            }
        }

        var u1 = new User('张三','123456');
        u1.showName();
        u1.showPass();
    </script>

继承：继承一个已有的类，扩展其功能。

原生JavaScript中的继承：

<script>
        function User(name,pass){
            this.name = name;
            this.pass = pass;
        }
        User.prototype.showName = function(){
            alert(this.name);
        }
        User.prototype.showPass = function(){
            alert(this.pass);
        }

        // 原生JavaScript写的继承
        function VipUser(name,pass,level){
            User.call(this,name,pass);// 调用call()方法进行继承
            this.level = level;
        }

        VipUser.prototype = new User();
        VipUser.prototype.constructor = VipUser;
        // 加上自己该有的东西
        VipUser.prototype.showLevel = function(){
            alert(this.level);
        }

        var v1 = new VipUser('李四','123456',3);
        v1.showName();
        v1.showPass();
        v1.showLevel();
    </script>

ES6中写继承类：

<script>
        class User{
            constructor(name,pass){
                this.name = name;
                this.pass = pass;
            }
            showName(){
                alert(this.name);
            }
            showPass(){
                alert(this.pass);
            }
        }
		
		// 直接用extends继承
        class VipUser extends User{
            constructor(name,pass,level){
                super(name,pass);// super执行超类的构造方法。
                this.level = level;
            }
            showLevel(){
                alert(this.level);
            }
        }
        var v1 = new VipUser('李四','123456',3);
        v1.showName();
        v1.showPass();
        v1.showLevel();
    </script>

8.JSON

Json对象

JSON.stringify

JSON.parse

json的标准写法：名称要双引号，所有引号为双引号。

<script>
        let json = {a:12,b:5};
        alert(JSON.stringify(json));

        let str = '{"a":5,"b":12,"c":"hello javascript"}';
        console.log(JSON.parse(str));
    </script>

json简写

名字跟值一样可以简写，方法一样也可以简写，:function可以删除。

<script>
        let a=12;
        let b=5;

        // 原始写法
        // let json = {a:a,b:b};
        
        // 名字和值一样可以简写
        let json = {a,b};

        // 原始写法
        // let json2={
        //     a:15,
        //     show:function(){
        //         alert(this.a);
        //     }
        // }

        // 方法可以简写，效果一样
        let json2={
            a:15,
            show(){
                alert(this.a);
            }
        }
    </script>

9.Promise——用同步的方式写异步代码。

异步：操作与操作之间没关系。可以同时进行多个操作。如Ajax异步请求。

代码更复杂。

同步：同时只能做一件事。

代码简单。

实例代码：

<script src="jquery.js" charset="utf-8"></script>
<script>
        let p1 = new Promise(function(resolve,reject){
            // 异步代码
            // resolve--成功了
            // reject--失败了
            $.ajax({
                url:'arr.txt',
                dataType:'json',
                success(arr){
                    resolve(arr);
                },
                error(error){
                    reject(error);
                }
            })
        });

        let p2 = new Promise(function(resolve,reject){
            // 异步代码
            // resolve--成功了
            // reject--失败了
            $.ajax({
                url:'json.txt',
                dataType:'json',
                success(arr){
                    resolve(arr);
                },
                error(error){
                    reject(error);
                }
            })
        });

        Promise.all([       // Promise的用处体现。
            p1,p2
        ]).then(function(arr){
            let [result1,result2] = arr;
            alert('全都成功了');
            alert(result1);
            alert(result2);
        },function(){
            alert('至少一个失败了');
        });
    </script>

可以优化如下：

<script src="jquery.js" charset="utf-8"></script>
<script>
        function creatPromise(url){
            return new Promise(function(resolve,reject){
            // 异步代码
            // resolve--成功了
            // reject--失败了
            $.ajax({
                url,
                dataType:'json',
                success(arr){
                    resolve(arr);
                },
                error(error){
                    reject(error);
                }
            })
        });
        }

        Promise.all([       // Promise的用处体现。
            creatPromise('arr.txt'),
            creatPromise('json.txt')
        ]).then(function(arr){
            let [result1,result2] = arr;
            alert('全都成功了');
            alert(result1);
            alert(result2);
        },function(){
            alert('至少一个失败了');
        });
    </script>

对于高版本的JQuery，已经有自带封装好的Promise。所以可以像下面一样来写：

<script src="jquery.js" charset="utf-8"></script>
    <script>
        Promise.all([
            $.ajax({url:'arr.txt',dataType:'json'}),
            $.ajax({url:'json.txt',dataType:'json'})
        ]).then(function(results){
            let [arr,json] = results;
            alert('成功了');
            console.log(arr,json);
        },function(){
            alert('失败了');
        });
    </script>

总结：promise的写法。Promise适合一次读一堆数据。

Promise.all([$.ajax(),$.ajax()]).then(results=>{
                // 对了，成功了。
            },err=>{
                // 错了，失败了。
        });

10.generator 生成器

普通函数----一路到底，只返回一个值。

generator----中间可以停，返回多个值。

<script>
        function *show(){//*代表generator函数
            alert('a');

            yield;//配合generator函数

            alert('b')
        }

        let genObj = show();//show()创建了generator对象
        genObj.next();// 弹出a
        genObj.next();//弹出b
    </script>

generator实际上将原函数分成几个小的函数，然后依次执行。所以能做到走走停停。

generator中的yield既可以传参，也可以返回。

yield传参

<script>
        function *show(){//*代表generator函数
            alert('a');

            let a = yield;//配合generator函数
            alert(a);// a=5
            alert('b')
        }

        let genObj = show();//show()创建了generator对象
        genObj.next(12);// 第一个没法给yield传参
        genObj.next(5);// 将5传给a
    </script>

yield也可以返回相关东西。

<script>
        function *show(){
            alert('a');
            yield 12;
            alert('b');
            return 55;
        }

        let genObj = show();

        let res1 = genObj.next();//yield后面的数将返回给res1
        console.log(res1);//done: false,value: 12

        let res2 = genObj.next();//最后一步靠return返回数值
        console.log(res2);//done: true,value: 55
        
    </script>

用一张图来理解：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwGumFGH-1599661354431)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909142914112.png)]

<script>
        function *炒菜(从市场买回来的菜){
            洗菜->洗好的菜;

            let 干净的菜 = yield 洗好的菜;

            洗好的菜->切->丝;

            let 切好的菜 = yield 丝;

            切好的菜->炒->熟的菜;

            return 熟的菜;
        }
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOLYNlSo-1599661354433)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200909142939094.png)]

generator适合读有逻辑性的数据，有次序。

全部总结一下

1. 变量

var 重复声明、函数级

let 不可重复声明、块级、变量

const 不可重复声明、块级、常量

2. 箭头函数

(1) 方便；

(2) 如果只有一个参数，圆括号可以省去；

(3) 如果只有一个return，{}也可以省去。

(4) 修正this，this相对正常一点。

3. 参数扩展

(1) 能收集

(2) 能扩展

4. 数组方法

(1) map 映射

(2) reduce 汇总：一堆->一个

(3) filter 过滤，用于筛选

(4) forEach 遍历数组

5. 字符串

(1) startsWith

(2) endsWith

(3) 字符串模板

6. Promise

(1) 封装异步操作

7. generator

(1) 执行到一半可以暂停的函数，标志是*

(2) yield

8. JSON

(1) JSON.stringify 返回JSON字符串

(2) JSON.parse 返回JSON对象

9. 面向对象

(1) 一个类

(2) 继承super();

10. 解构赋值

(1) 左右结构一样

(2) 右边是个合法的东西

(3) 声明、赋值一次完成