学习笔记——ECMAScript6

EcmaScript6

一、 声明变量常量

1. let关键字声明变量，特性：①变量不能重复声明②块级作用域：在 let 命令所在的代码块内有效③不存在变量声明提前，不允许在变量声明之前使用变量④不影响作用域链。
2. const关键字声明常量，特性：①一定要赋初始值②一般常量使用大写③常量的值不能更改④块级作用域⑤对于数组和对象的元素修改，不算做对常量的修改，不会报错。
3. 声明字符串的新方式``，特性：①内容中可以直接出现换行符②使用${}实现变量拼接

      var name=`alice`;
      let out=`我的名字叫${name}`;

4. 声明对象的简化写法

     let name='alice';
     let age=18;
     const school={
        name,
        age,
        impeove(){
          console.log('hhhh');
        },
     };

二、变量的解构赋值

1. ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
2. 数组的解构

       const name=['alice','bob','john','jessic'];
       let [a,b,c,d]=name;
       console.log(a+' '+b+' '+c+' '+d);
       //alice bob john jessic

3. 对象的解构

       const d={
           name:'alice',
           age:18,
           school:'zhejiang'
       };
       let{name,age,school}=d;//对象的解构中，变量的名称必须和对象中的属性名称相同
       console.log(name+' '+age+' '+school);

三、箭头函数

1. ES6使用允许使用=>定义函数
2. 特性：①箭头函数中this是静态的，this始终指向函数声明时所在作用域下的this的值。也就是说箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。②箭头函数不能作为构造函数实例化对象③不能使用arguments变量(arguments用来保存实参)。④箭头函数的简写:当形参有且只有一个时，省略小括号；当代码体只有一条语句时，可以省略花括号，此时return必须省略。

     let add=n=>{return n+n;};//省略小括号
     let add2=(n,m)=>n*m;//省略花括号
     let add3=n=>n*n;//都省略
     

3. 箭头函数的实践一：改变盒子背景颜色，根据箭头函数的this特性可使用箭头函数。

       let div1=document.getElementById('div1');
       div1.addEventListener("click",function(){
           let _this=this;
           setTimeout(function(){
               _this.style.background='pink';
           },2000);
       })

       //使用箭头函数
      let div1=document.getElementById('div1');
       div1.addEventListener("click",function(){
            //let _this=this;
           setTimeout(()=>{
               this.style.background='pink';
           },2000);
       })

4. 箭头函数的实践二：从数组中返回偶数元素

       const arr=[1,2,3,4,5,6];
       const result=arr.filter(function(item){
          if(item%2==0){
              return true;
          }else{
              return false;
          }
       })
       console.log(result);

       //使用箭头函数
       const arr=[1,2,3,4,5,6];
       const result=arr.filter(item=>item%2==0)
       console.log(result);

5. 箭头函数的适合与this无关的回调，比如定时器、数组的方法回调。不适合与this函数有关的回调，比如事件回调、对象的方法等。

四、函数参数

1. ES6允许给函数参数赋值初始值，具有默认值的参数，一般位置要靠后。如果传参就使用传递的参数，如果没有传参则使用形参的默认值。
2. rest参数：ES6引入rest参数用来获取函数的实参，用以替代arguments。rest参数必须放在参数最后。

       function fn(a,b,...rest){
           console.log(a);
           console.log(b);
           console.log(rest);
       }
       fn(1,2,3,4,5,6);

五、扩展运算符

1. …：可以将数组转换为逗号分隔的参数序列。
2. 扩展字符串的应用：①数组的合并②数组的克隆(如果有引用数据类型就是浅拷贝)③将伪数组转换为真正的数组,就可以使用数组的方法。

       const name1=['alice','bob'];
       const name2=['john','jessic'];
       //const name=name1.concat(name2);
       const name=[...name1,...name2];
       console.log(name);

       const name1=['alice','bob'];
       const name2=[...name1];
       console.log(name2);

    <div id="div1"></div>
    <div></div>
    <div></div>
    <script type="text/javascript">
       const divs=document.querySelectorAll('div');
       const divArr=[...divs];
       console.log(divArr);
    </script>

六、Symbol数组类型

1. ES6引入了一种新的数据类型Symbol，表示独一无二的值。
2. Symbol特点：①Symbol的值是唯一的，用来解决命名冲突的问题②Symbol的值不能与其他数据进行运算③Symbol定义的对象属性不能使用for in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

       let s=Symbol();
       let a=Symbol('描述字符串');
       let b=Symbol.for('描述字符串');

3. Symbol的使用场景：给对象添加属性和方法

        let game = {}
        let methods = {
            up: Symbol(),
            down: Symbol()
        };
        game[methods.down]=function(){}
        game[methods.up]=function(){}
        console.log(game);

        let a={
            name:'alice',
            [Symbol('say')]:function(){},
            [Symbol('back')]:function(){},
        }
        console.log(a);

4. Symbol提供了11个内置值，指向语言内部使用的方法，主要用来控制对象在特定场景下的表现。

七、迭代器

1. 迭代器(Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结果只要部署Iterator接口，就可以完成遍历操作。
2. ES6创造新的遍历命令for of，Iterator主要供for of消费。原生具备Iterator接口的数据Array、Arguments、Set、Map、String、TypedArray、NodeList。
3. Iterator工作原理：①创建一个指针对象，指向当前数据结构的起始位置②第一次调用对象的next方法，指针自动指向数据结构的第一个成员③接下来不断调用next方法，指针一直向后移动，直到指向最后一个成员④每调用next方法都包含value和done属性的对象。

八、生成器

1. 生成器是一种特殊函数，是ES6提供的一种异步编程的解决方案。

       //生成器的使用
       function * a(){
           console.log('Hello World');
       }
       let iterator=a();
       iterator.next();

       function * a(){
           yield '11111';
           console.log('Hello World');
           yield '22222';
           yield '33333';
       }
       let iterator=a();
       console.log(iterator.next());
       console.log(iterator.next());
       console.log(iterator.next());
       console.log(iterator.next());
       //Hello World
      //{value: '22222', done: false}
      //{value: '33333', done: false}
      //{value: undefined, done: true}

2. 生成器函数的参数传递：next()方法可以传递实参

      function * a(){
           let one=yield '11111';
           console.log(one);
           let two=yield '22222';
           console.log(two);
           let three=yield '33333';
           console.log(three);
       }
       let iterator=a();
       console.log(iterator.next());
       console.log(iterator.next('111'));
       console.log(iterator.next('222'));
       console.log(iterator.next('333'));
       {value: '11111', done: false}
      //111
      //{value: '22222', done: false}
      //222
      //{value: '33333', done: false}
      //333
      //{value: undefined, done: true}

3. 生成器实现异步实例一：

        setTimeout(() => {
            console.log(111);
            setTimeout(() => {
                console.log(222);
                setTimeout(() => {
                    console.log(333);
                }, 3000);
            }, 2000);
        }, 1000);

        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            }, 1000);
        };
        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            }, 2000);
        };
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 3000);
        };
        function* a() {
            yield one();
            yield two();
            yield three();
        };
        let iterator = a();
        iterator.next();

4. 生成器实现异步实例二：

        function getUsers(){
            setTimeout(()=>{
                let data='用户数据';
                iterator.next(data);
            },1000);
        }
        function getOrders(){
            setTimeout(()=>{
                let data='订单数据';
                iterator.next(data);
            },1000);
        }
        function getGoods(){
            setTimeout(()=>{
                let data='商品数据';
                iterator.next(data);
            },1000);
        }
        function * a(){
            let users= yield getUsers();
            console.log(users);
            let orders=yield getOrders();
            console.log(orders);
            let goods=yield getGoods();
            console.log(goods);
        }
        let iterator =a();
        iterator.next();

九、Promise

1. promise是ES6引入的异步编程的新解决方案，语法上promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
2. Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
3. promise对象一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
4. Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。
5. 对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

        const p=new Promise(function(resolve,reject){
            setTimeout(function(){
                let data='数据';
                resolve(data);
            },1000);
        });
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.log(reason);
        });

6. promise封装读取文件

const fs=require('fs');
const path= require('path');
const p=new Promise(function(resolve,reject){
    fs.readFile(path.join(__dirname,'/1.txt'),'utf-8',(err,data)=>{
        if(err) reject(err);
        else resolve(data);
    })
});
p.then(function(value){
    console.log(value);
},function(reason){
    console.log(reason);
})

7. catch()方法：用与指定发生错误时的回调函数。

十、Set

1. ES6提供了一种新的数据结构Set(集合)，类似于数组，但成员的值是唯一的。Set实现了iterator接口。

        //set中的一些属性和方法
        let a=new Set(['alice','bob','candy','david']);
        console.log(a.size);
        a.add('jhon');
        console.log(a);
        a.delete('jhon');
        console.log(a.has('jhon'));

2. 使用Set实现数组去重、交集并集差集。

        let arr1=[1,2,3,4,5,6,1,2];
        let arr2=[1,2,3,1];
        let a=[...new Set(arr1)];
        console.log(a);
        let result1=[...new Set(arr1)].filter(item=>new Set(arr2).has(item));
        console.log(result1);
        let result2=[...new Set([...arr1,...arr2])];
        console.log(result2);
        let result3=[...new Set(arr1)].filter(item=>!new Set(arr2).has(item));
        console.log(result3);

十一、Map

1. ES6提供了Map数据结果，类似于对象，也是键值的集合。但是键的范围不限于字符串，各种类型的值都可以当做键。Map也实现了iterator接口。

        //map的使用
        let m=new Map();
        m.set('name','alice');
        m.set('change',function(){
            console.log('hhhh');
        })
        let key={
            classmate:'bob'
        };
        m.set(key,['x','y']);
        console.log(m);
        m.delete('name');
        console.log(m.size);
        console.log(m.get(key));//获取键值
        //clear为情空

十二、class类

1. ES6引入class (类)作为对象的模板，通过 class 关键字定义类。

        //之前的方法
        function Phone(brand,price){
            this.brand=brand;
            this.price=price;
        }
        Phone.prototype.call=function(){
            console.log('Hello World');
        }
        var h=new Phone('huawei',2000);
        h.call();
        console.log(h);

        class Phone{
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            call(){
                console.log('Hello World');
            }
        }
        var v=new Phone('vivo',2000);
        console.log(v);

2. 类的静态成员,不属于实例对象。
3. 类的继承

         //ES5构造函数继承
        function Phone(brand,price){
            this.brand=brand;
            this.price=price;
        }
        Phone.prototype.call=function(){
            console.log('Hello World');
        }
        function SmartPhone(brand,price,color,size){
            Phone.call(this,brand,price);
            this.color=color;
            this.size=size;
        }
        //设置子集构造函数的原型
        SmartPhone.prototype=new Phone;
        SmartPhone.prototype.constructor=SmartPhone;

        //ES6类的继承
        class Phone{
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            call(){
                console.log('Hello World');
            }
        }
        class SmartPhone extends class{
            constructor(brand,price,color,size){
                super(brand,price);
                this.color=color;
                this.size=size;
            }
            photo(){
                console.log('photo!');
            }
        }

十三、数值扩展

1. Number.EPSILON是JS表示的最小精度。在浮点数运算中，由于精度问题会出现return (0.1+0.2===0.3)为false的情况，可以使用Number.EPSILON来调整。
2. Number.isFinite检测一个数是否为有限数，Number.isNaN检测一个数是否为NaN，Number.isInteger判断一个数是否为整数。
3. Number.parseInt将字符串转为整数，Number.parseFloat将字符串转换为整数。
4. Math.trunc将数字的小数部分抹掉，Math.sign检测一个数是正数负数还是0。

十四、对象方法扩展

1. Object.is判断两个值是否完全相等。
2. Object.assign对象的合并。
3. Object.setPrototypeOf和Object.getPrototypeOf,设置原型对象和获取原型对象。

十五、模块化

1. ES6模块功能主要由两个命令构成：export和import。export用于规定模块的对外接口，import用于输入其他模块提供的功能。

//通用形式导入
import * as m1 from ",/src/js/m1.js";
//解构赋值形式
import {name,age} from ",/src/js/m2.js";
//默认暴露
import {default as m3} from ",/src/js/m3.js";
//默认形式，针对默认暴露
import m3 from ",/src/js/m3.js";

//统一暴露
let name='alice';
function age(){
   console.log(18)'
}
export{name,age};
//默认暴露
export default{
   name:'alice';
   age:18;
}

2. script标签src引入文件

<script src="./src/js/app.js" type="module"></script>