ECMAScript 6基础学习

1、命令行工具

常用命令行工具有两种：CMD命令行工具，PowerShell命令行工具。

1、CMD命令行工具

• 打开命令行窗口：win+r快速打开命令行窗口
• 选择盘符：盘符加冒号E：
• 查看盘符及目录下文件与文件夹：dir
• 清空命令行信息：cls
• 进入文件夹或目录：cd 文件夹名称
• 返回到上一级目录：cd ../
• 快速补全目录或文件夹名称：tab
• 创建文件夹：mkdir 文件夹名称
• 查看历史输入过的命令：上下按键

2、PowerShell

• 打开方式：在开始位置搜索PowerShell打开；在对应目录按住shift+右键打开

2、Babel转码器

        可以将ES6代码转为ES5代码。

Babel安装流程

1、安装Babel，安装在项目的根目录下。

$ npm install --save-dev @babel/core

 2、配置文件.babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。

{
  "presets": [],
  "plugins": []
}

3、转码规则

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# react 转码规则
$ npm install --save-dev @babel/preset-react

4、将规则加入.babelrc

  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

5、Babel命令行转码

Babel 提供命令行工具@babel/cli，用于命令行转码。它的安装命令如下。

$ npm install --save-dev @babel/cli

基本用法如下。

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
//需要转码的文件example.js,转出的文件compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
//src是操作文件夹,lib是转出文件夹

# -s 参数生成source map文件
$ npx babel src -d lib -s

3、Let命令 

let命令用来声明变量，用法类似var，但是所声明的变量，只在let命令所在的代码块内有效。

• var关键字：函数级的作用域
• let关键字：块级作用域（花括号级的作用域）
• for循环的计数器，就很合适使用let命令

对比var和let在循环中的应用

    <script>
        var a =[];
        for(var i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        };
        a[6]();//10
    </script>

    <script>
        var a =[];
        for(let i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        };
        a[6]();//6
    </script>

• let不存在变量提升
• let不允许在相同的作用域内重复声明

4、Const命令

• const声明一个只读的常量，一旦声明，常量的值就不能改变。
• const一旦声明变量，就必须立即初始化。
• const的作用域是块级作用域。
• const也不存在变量提升。
• const声明的变量也不能重复声明。

5、对象解构赋值

• 解构可以用于对象。

    <script>
        var user={
            name:'sss',
            age:20,
        }
        console.log(user.name);
        console.log(user.age);
        // 利用解构赋值方式简化
        const{name,age}=user;
        console.log(name,age);
    </script>

注意：对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

• 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

        const{log}=console;
        log(name,age);

        const{abs,ceil,floor,random}=Math;
        log(random());

注意：如果要将一个已经声明的变量用于解构赋值，必须非常小心。

6、字符串

1、字符串扩展

 1、字符串Unicode表示法

ES6允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。

\u0061 ---  a

\u0062 ---  b

2、字符串遍历器接口：for...of循环遍历

    <script>
        var str = "hello";
        for(var i of str){
            console.log(i);
        }
    </script>

3、模板字符串

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

    <script>
    //    动态创建一个A标签，A标签href属性也是动态的
    var href = "https://baidu.com";
    var text = 'scs';
    // 当我向页面动态写入标签的时候，标签的数据一般来源于服务器
    var biaoqian = "<a href='"+href+"'>"+text+"</a>";
    console.log(biaoqian);

    // 字符串模板
    var biaoqian_a = `<a href="${href}">${text}</a>`;
    console.log(biaoqian_a);
    </script>

2、字符串新增方法

• includes()：返回布尔值，表示是否找到了参数字符串
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
• 这三个方法都支持第二个参数，表示开始搜索的位置

    <script>
        var allStr="helloworld";
        var str = "llo";
        console.log(allStr.includes(str));//true
        console.log(allStr.startsWith(str));//false
        console.log(allStr.endsWith(str));//false
    </script>

• repeat()：返回一个新字符串，表示将原字符串重复n次。

        var str = "llo";
        console.log(str.repeat(3));

• padStart()，padEnd()：字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

        var str = "llo";
        console.log(str.padStart(10,"ab"));//abababallo
        console.log(str.padEnd(10,"ab"));//lloabababa

• trimStart()，trimEnd()：它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
• at()：该方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。
  • 注意：如果参数的位置超出了字符串范围，at()返回undefined。

        var str = "llo";
        console.log(str.at(2));//o
        console.log(str.at(-2));//l

7、数组扩展

1、扩展运算符

• 扩展运算符是三个点（...）。将一个数组转为用逗号分隔的参数序列。

    <script>
        var arr=[10,20,30,40];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        console.log(...arr);//10 20 30 40
    </script>

• 由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

    <script>
        var arr=[10,20,30,40];
        // 求数组中的最大值
        console.log(Math.max.apply(null,arr));
        
        console.log(Math.max(...arr));
    </script>

• 合并数组：扩展运算符提供了合并数组的新写法

    <script>
        var arr1=[10,20,30,40];
        var arr2=[50,60,70];
        console.log(arr1.concat(arr2));
        console.log([...arr1,...arr2]);
    </script>

2、数组扩展：新增方法

1、Array.from()

Array.from方法用于将类数组转为真正的数组。

常见的类数组有三类：

1. arguments
2. 元素集合
3. 类似数组的对象

<body>
    <h3>标题1</h3>
    <h3>标题2</h3>
    <h3>标题3</h3>
    <script>
        //类数组（伪数组），只能使用数组的读取方式和length属性，不能使用数组方法

        // arguments
        function add(){
            console.log(arguments);//读取到10 20 30
            console.log(arguments[0]);
            console.log(arguments[1]);
            console.log(arguments[2]);

            // Array.from()转换为数组
            var result = Array.from(arguments);
            result.push(40);
            console.log(result);
        }
        add(10,20,30);

        // 元素集合
        let titles = document.querySelectorAll("h3");
        console.log(titles);
        // Array.from()转换为数组
        console.log(Array.from(titles));

        // 类似数组的对象
        var user = {
            "0":"ssc",
            "1":20,
            "2":"女",
            length:3,
        };
        console.log(user["0"]);
        console.log(user["1"]);
        console.log(user.length);
        // Array.from()转换为数组
        console.log(Array.from(user));
    </script>
</body>

2、Array.of()

Array.of方法用于将一组值，转换为数组。

console.log(Array.of(10,20,30));

3、Array()

console.log(Array(3));//[空 ×3]

8、对象的扩展

1、属性的简洁表示法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

    <script>
        var name="scs";
        var user={
            // 属性名和属性值是同样的变量名称，可以省略
            // name:name,
            name,

            age:20,

            // getName:function(){
            //     console.log(this.name);
            // }
            getName(){
                console.log(this.name);
            }
        };
        console.log(user.name);
        user.getName();

        function getPoint(){
            var x=10.23;
            var y=23.32;
            return{
                // x:x,
                // y:y
                x,y
            }
        }
        console.log(getPoint().x,getPoint().y);
    </script>

2、属性名表达式

ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

    <script>
        var ib="sss";
        var user={
            [ib]:true,
            ['a'+'bc']:123,
        }
        console.log(user);
    </script>

3、对象的扩展运算符

    <script>
        let z={a:3,b:4};
        let n={...z};
        console.log(n);
    </script>

9、函数的扩展：箭头函数

• 使用“箭头”（=>）定义函数

    <script>
        // 赋值方式声明函数
        var fn2 = function(x,y){
            return x+y;
        }
        // 箭头函数=>
        var fn3 =(x,y)=>x+y;
        console.log(fn3(10,20));
    </script>

• 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

        // 箭头函数=>
        var fn3 = x=>x;
        var fn4 = ()=>10;
        var fn5 = (x,y)=>x+y;

• 如果箭头函数的代码块部分多于1条语句，就要使用大括号将它们括起来，并使用return语句返回。

        var fn1=function(x,y){
            var z=10;
            return x+y+z;
        }
        var fn2=(x,y)=>{
            var z=10;
            return x+y+z;
        }

• 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外加上括号，否则会报错。

        var fn1=function(){
            return{
                x:10,
                y:20,
            };
        };
        var fn2=()=>({x:10,y:20});

• 箭头函数的一个用处是简化回调函数（匿名函数）

        var arr=[10,20,30];
        arr.map(function(element,index){
            console.log(element);
        })
        // 改写箭头函数
        arr.map((element,index)=>{
            console.log(element);
        })

• 对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。

    <script>
        var name="sssooo";
        var user={
            name:"scs",
            age:20,
            getName(){
                var that=this;
                setTimeout(function(){
                    console.log(that.name);//scs
                })
            }
        }
        user.getName();
        // 箭头函数
        var name="sssooo";
        var user={
            name:"scs",
            age:20,
            getName(){
                setTimeout(()=>{
                    //箭头函数引用外层getName()方法的this
                    console.log(this.name);//scs
                })
            }
        }
        user.getName();
    </script>

注意：箭头函数里面根本没有自己的this，而是引用外层的this。

10、Set数据结构

• 数据结构Set类似于数组，但是成员的值都是唯一的，没有重复的值。
• 通过add()方法向set结构加入成员。

    <script>
        var s = new Set();
        var arr = [10,20,30,40,50,50];
        arr.forEach(x=>s.add(x));
        console.log(s);
    </script>

• set函数可以接受一个数组作为参数

        var s = new Set([10,20,30,40]);
        console.log(s);

• 数组去除重复成员的方法

        var arr=[10,20,30,30,20,50];
        var s=new Set(arr);
        // Set也可以使用扩展运算符来读取数据
        console.log([...s]);

• 字符串去除重复字符

console.log([...new Set("abababa")].join(""));

• 向Set加入值时，不会发生类型转换，所以5和‘5’是两个不同的值

        var s=new Set();
        s.add(5);
        s.add("5");
        console.log(s);

• size属性：返回Set实例的成员总数
• Set数据结构的方法
  • add()：添加方法
  • delete()：删除某个值，返回一个布尔值，表示删除是否成功
  • has()：返回一个布尔值，表示该值是否为Set成员
  • clear()：清楚所有成员，没有返回值

11、Promise对象

1、基本概念

Promise是异步编程（网络请求）的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

2、基本用法

Promise对象是一个构造函数，用来生成Promise实例。

//代码规范
const promise = new Promise(function(resolve,reject){
    // ... some code（异步操作）

    if(/* 异步操作成功 */){
        resolve(value);
    }else{
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value){
    //success
},function(error){
    //failure
});

• 加载图片资源例子

<body>
    <div id="box">等待加载</div>
    <script>
        var box=document.getElementById("box");
        function loadImageAsync(url){
            const promise = new Promise(function(resolve,reject){
                //异步处理：消耗时间的代码
                const image = new Image();//创建image对象
                image.src=url;
                image.onload = function(){
                    resolve(image);
                }
                image.onerror = function(){
                    reject(new Error('Could not load image at '+url));
                }
            })
            return promise;
        }
        const promise = loadImageAsync("https://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1305/16/c4/20990657_1368686545122.jpg");
        promise.then(function(data){
            //成功
            box.appendChild(data);
        },function(error){
            //失败
            box.innerHTML="图片加载失败";
            console.log(error);
        })
    </script>
</body>

3、Ajax实操

    <script>
        //XHR对象
        const getJSON = function(url){
            const promise=new Promise(function(resolve,reject){
                //异步操作：网络请求代码
                const handler = function(){
                    if(this.readyState!=4){
                        //0 1 2 3 4
                        return;
                    }
                    if(this.status==200){
                        resolve(this.response);
                    }else{
                        reject(new Error(this.statusText));
                    }
                }
                const client = new XMLHttpRequest();
                client.open("GET",url);
                client.onreadystatechange=handler;
                client.responseType="json";
                client.setRequestHeader("Accept","application/json");
                client.send();
            })
            return promise;
        }
        getJSON("https://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1305/16/c4/20990657_1368686545122.jpg")
        .then(function(data){
            console.log(data);
        },function(error){
            console.log(error);
        })
    </script>

12、Async函数

async函数可以将异步操作变为同步操作。

    <script>
        //定时器是异步的
        function print(){
            setTimeout(()=>{
                console.log("定时器");
            },10)
            console.log("Hello");
        }
        print();
        //async
        function timeout(ms){
            return new Promise((resolve,reject)=>{
                setTimeout(function(){
                    console.log("定时器");
                    resolve();
                },ms);
            })
        }
        async function asyncPrint(ms,value){
            // 把具有异步操作的代码前面放入：await
            await timeout(ms);
            console.log(value);
        }
        asyncPrint(100,"hello");
    </script>

13、Class

1、Class的基本语法

        //ES5类的表现形式
        function Person(name,age){
            this.name=name;
            this.age=age;
        }
        Person.prototype.getName=function(){
            console.log(this.name);
        }
        var p=new Person("sss",20);
        p.getName();
        //ES6类的表现形式
        class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            getName(){
                console.log(this.name);
            }
        }
        var p=new Person("scs",20);
        p.getName();

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor()方法会被默认添加。
• 类的实例生成使用new命令。
• 类是不存在提升的。

2、Class属性与方法

• 实例方法：通过类的实例对象调用方法
• 实例属性：指的是类的实例对象可以调用的属性

        class Person{
            //实例属性
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            say(){
                console.log("hello");
            }
        }
        //p：实例对象
        var p=new Person("scs",22);
        p.say();
        console.log(p.name);

• 静态方法：在方法前加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为”静态方法"。
• 注意：如果静态方法包含this关键字，这个this指的是类，而不是实例。
• 静态属性：指的是Class本身的属性。

    <script>
        class Person{
            //实例属性
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            sayhello(){
                console.log("hello");
                // this指向实例对象
                console.log(this.name);//scs
            }

            //静态方法
            static sayhello(){
                console.log("sayhello");
                // this指向当前类，而不是实例对象
                console.log(this.age);//undefined
            }
        }
        //p：实例对象
        var p=new Person("scs",22);
        console.log(p.name);

        Person.sayhello();
        p.sayhello();

        Person.age=30;
        console.log(Person.age);
    </script>

3、Class的继承

• Class可以通过extends的关键字实现继承，让子类继承父类的属性和方法。
• 子类必须在constructor方法中调用super()，否则会报错。

    <script>
        class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            getName(){
                console.log(this.name);
            }
            static getInfo(){
                console.log("ren");
            }
        }
        class Student extends Person{
            constructor(name,age,school){
                super(name,age);
                this.school=school;
            }
            getSchool(){
                console.log(this.school);
            }
        }
        var s=new Student("scs",19);
        s.getName();
        Student.getInfo();
    </script>

14、Module的语法

• ES6模块是通过export命令显式地指定输出的代码，再通过import命令输入。

export var hello = "hello"  // hello.js文件
import { hello } from "./hello.js"  //index.js文件

• export命令导出变量

export var firstName = 'sts';
export var lastName = 'scsc';
export var year = 2000;

• export命令导出函数

export function add(x,y){
    return x+y;
};

• 使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块。

//name.js
export var firstName = 'sts';
export var lastName = 'scsc';
export var year = 2000;

//main.js
import { firstName,lastName,year } from './name.js';

• 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

//value.js
export var value=1;

//main.js
import { value as val } from './value.js';

• 除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

//name.js
export var firstName = 'sts';
export var lastName = 'scsc';
export var year = 2000;

//main.js
import * as MyHello from "./name.js"
MyHello.getName();
console.log(MyHello.firstName);

• export default：使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。(一个文件中，默认只能存在一个export default）

//export-default.js
export default function(){
    console.log('foo');
}

• 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

//import-default.js
import customName from './export-default';
customName();//'foo'