ES6学习笔记

时光怂恿深爱的人放手 提交于 2020-02-28 20:09:24

【第一课:ES发展历史】

*******************************************************************************

*******************************************************************************

ES -> ECMA标准

ES6 -> 2015年6月    ES6.0

ESnext ->下一代js语言

标准委员会(TC39)要求更改语言标准

提案->标准

         Stage 0  展示阶段

         Stage 1  征求意见阶段

         Stage 2  草案阶段

         Stage 3  候选阶段

         Stage 4  定案阶段(标准)

【第二课:let,const】

*******************************************************************************

*******************************************************************************

定义(声明)变量

ES5 作用域>>>>>函数作用域:

<script>

        function fn() {

            for (var i = 0; i < 10; i++) {

                console.log(i)

            }

        }

        fn();      

    </script>

ES5 作用域>>>>>全局用域:

<script>

        for (var i = 0; i < 10; i++) {

            //console.log(i)

        }

        console.log(i);

    </script>

特性>>>>>预解析,变量提升

<script>

        console.log(i);

        var i = 1;

    </script>

打印:undefined(语法未出现错误)

特性>>>>>同一作用域里面可以定义相同变量

<script>      

        var i = 1;

        var i = 2;

        console.log(i);

    </script>

打印:2;赋值被重写掉。

ES6 作用域>>>>>块级作用域 {}

特性>>>>>没有预解析,不存在变量提升;先定义后使用

<script>      

       let i= 1;

       console.log(i);

    </script>

特性>>>>>统一作用域里面只能定义一次变量,不能重复定义变量    

<script>

        let i = 1;

        let i = 2;

        console.log(i);

    </script>

Uncaught SyntaxError: Identifier 'i' has already been declared

特性>>>>>for循环时类似于一个父级作用域  

  <script>

        for (let i = 0; i < 10; i++) {

            console.log(i);

        }

 

        {

            let i = 100;

            console.log(i);

            {

                console.log(i);

                {

                    let i = 111;

                    console.log(i);

                }

            }

        }

    </script>

Const 定义变量特性和let一致,但定义的变量不可修改。   

 <script>

       const arr = ["a","b", "c"];

       arr = ["a"];

       console.log(arr);

    </script>

ES6.html:11 Uncaught TypeError: Assignment to constant variable.

但满足对象的基本特性:  

  <script>

       const arr = ["a","b", "c"];

       arr.push("d");

       console.log(arr);

    </script>

(4) ["a", "b", "c", "d"]

【第三课:解构赋值】

*******************************************************************************

*******************************************************************************

常规应用解构赋值

  

  <script>

        {

            let [a, b, c] = ["a", "b", "c"];

            console.log(a, b, c);

            //a b c

        }

        {

            let [a, b, c] = ["a", "b"];

            console.log(a, b, c);

            //a b undefined

        }

        {

            let [a, [b, c]] = ["a", ["b"]];

            console.log(a, b, c);

            //a b undefined

        }

        {

            //交换位置

            // let a = "a";

            // let b = "b";

            let [a, b] = ["a", "b"];

            [a, b] = [b, a]

            console.log(a, b);

            //b a

        }

        {

            //json解构赋值

            let json = {

                age: 12,

                name: "姓名",

                sex: "男"

            };

            let { name, age, sex } = json;//注意为花括号,两边对象格式一致

            console.log(age, name, sex);

            //12 "姓名" "男"

        }

        //解构赋值重命名

        {

            let json = {

                age: 12,

                name: "姓名",

                sex: "男"

            };

            let { name: name_a, age: age_b, sex: sex_c } = json;//注意为花括号,两边对象格式一致

            console.log(name_a, age_b, sex_c);

            //姓名 12 男

        }

        //解构赋值初始值(默认值undefined)

        {

            let json = {

                age: 12,

                name: "姓名",

                //sex : undefined            

            };

            let { name: name_a, age: age_b, sex: sex_c = "暂无性别" } = json;//注意为花括号,两边对象格式一致 默认值只针对于undefined情况

            console.log(name_a, age_b, sex_c);

            //姓名 12 暂无性别

        }

        //解构赋值初始值(默认值null)

        {

            let json = {

                age: 12,

                name: "姓名",

                sex: null

            };

            let { name: name_a, age: age_b, sex: sex_c = "暂无性别" } = json;//注意为花括号,两边对象格式一致

            console.log(name_a, age_b, sex_c);

            //姓名 12 null

        }

    </script>

函数应用:

    <script>

        {

            function fn() {

                return { a: 1, b: 2 };

            }

            let { a, b } = fn();

            console.log(a, b);

            //1 2

        }

        {

            function fn() {

                return { a: 1 };

            }

            let { a, b: temp_b = "暂无数据" } = fn();

            console.log(a, temp_b);

            //1 "暂无数据"

        }

        {

            function fn({ a, b }) {

                console.log(a, b);

            }

            fn({ a: 1, b: 2 });

            //1 2

        }

        {

            function fn({ a, b ="暂无数据" }) {

                console.log(a, b);

            }

            fn({ a: 1 });

            //1 "暂无数据"

        }

        {

            function fn({ a="a暂无数据", b ="b暂无数据" }) {

                console.log(a, b);

            }

            fn({ });

            //a暂无数据 b暂无数据

        }

        {

            function fn({ a="a暂无数据", b ="b暂无数据" }={}) {

                console.log(a, b);

            }

            fn();

            //a暂无数据 b暂无数据

        }

    </script>

【第四课:字符串模板及新增函数】

*******************************************************************************

*******************************************************************************

字符串模板:波浪线反飘符号。``

    

<script>

        {

            let [title, count] = ["ES6学习案例", 100];

            let str = `标题${title};浏览次数${count};`;

            console.log(str);

            //标题ES6学习案例;浏览次数100;

        }

        {

            //新增字符串函数

            let str = "apple orange pear panda";

            let str1 = "123";

            console.log(str.includes("app"));

            //true

            console.log(str.startsWith("app"));

            //true

            console.log(str.endsWith("app"));

            //false

            console.log(str1.padStart(10, "x"));

            //xxxxxxx123

            console.log(str1.padStart(10, "xa"));

            //xaxaxax123

            console.log(str1.padEnd(10, "x"));

            //123xxxxxxx

            console.log(str1.padEnd(10, "xa"));

            //123xaxaxax

        }

    </script>

【第五课:函数默认参数、箭头函数、剩余参数】

*******************************************************************************

*******************************************************************************

函数默认参数    

<script>

        {

            function fn() {

                return { a: 1, b: 2 };

            }

            let { a, b } = fn();

            console.log(a, b);

            //1 2

        }

        {

            function fn() {

                return { a: 1 };

            }

            let { a, b: temp_b = "暂无数据" } = fn();

            console.log(a, temp_b);

            //1 "暂无数据"

        }

        {

            function fn({ a, b }) {

                console.log(a, b);

            }

            fn({ a: 1, b: 2 });

            //1 2

        }

        {

            function fn({ a, b = "暂无数据" }) {

                console.log(a, b);

            }

            fn({ a: 1 });

            //1 "暂无数据"

        }

        {

            function fn({ a = "a暂无数据", b = "b暂无数据" }) {

                console.log(a, b);

            }

            fn({});

            //a暂无数据 b暂无数据

        }

        {

            function fn({ a = "a暂无数据", b = "b暂无数据" } = {}) {

                console.log(a, b);

            }

            fn();

            //a暂无数据 b暂无数据

        }

        {

            //函数参数默认已经定义,不可再次使用let,const声明定义

            function fn(a = 1) {

                let a = 2;

                console.log(a);

            }

            //Uncaught SyntaxError: Identifier 'a' has already been declared

        }

    </script>

…及剩余参数

<script>

       {

           function fn(a){

               console.log(...a);//将数组展开

           }

           fn([1,2,3,4,5]);

           //1 2 3 4 5

       }

       {

           function fn(...a){

               console.log(a);//将散数合并成数组

           }

           fn(1,2,3,4,5);

           //[1 2 3 4 5]

       }

       {

           function fn(a,b,...c){

               console.log(c);//将散数合并成数组

           }

           fn(1,2,3,4,5); //...c表示剩余参数,只能放在最后一个参数位置

           //[3 4 5]

       }

    </script>

箭头函数     

<script>

        {

            let fn = () => { return 1 }

            console.log(fn());

            //1

        }

        {

            let fn = (a,b) => { return a+b }

            console.log(fn(2,3));

            //5

        }

        {

            let fn = (a,b) => { return `标题${a};浏览次数${b}。`; }

            console.log(fn("ES学习案例",30));

            //标题ES学习案例;浏览次数30。

        }

        {

            // this问题, 定义函数所在的对象,不在是运行时所在的对象

            let json = {

                id : 1,

                fn :function(){

                    setTimeout(() => {

                        console.log(this.id);

                    }, 2000);

                }

            }

            json.fn();

        }

    </script>

Ps注意事项:

1. this问题, 定义函数所在的对象,不在是运行时所在的对象

2. 箭头函数里面没有arguments, 用  ‘...’

3. 箭头函数不能当构造函数

【第六课:数组循环】

*******************************************************************************

*******************************************************************************  

  <script>

        {

            //for循环、

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

            for (let i = 0; i < arr.length; i++) {

                console.log(arr[i])

            }

        }

        {

            //forEach 代替普通for,无返回值不需要return

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

            arr.forEach(function (value, idnex, arr) { console.log(value) });

        }

        {

            //forEach 代替普通for,无返回值不需要return

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

            arr.forEach((value, idnex, arr) => { console.log(value) });

        }

        {

            //map

            //非常有用,做数据交互  "映射"

            //正常情况下,需要配合return,返回是一个新的数组

            //若是没有return,相当于forEach

            //注意:平时只要用map,一定是要有return

            let arr = [{ title: "title1", hot: 10 }, { title: "title2", hot: 20 }, { title: "title3", hot: 30 }];

            let newArr = arr.map((val, idnex, arr) => { return val.hot > 10 });

            //重新整理数据结构

            let newArr1 = arr.map((val, idnex, arr) => { return `主题为${val.title};热度为${val.hot}。` });

            console.log(newArr);

            console.log(newArr1);

            // [false, true, true]

            //["主题为title1;热度为10。", "主题为title2;热度为20。", "主题为title3;热度为30。"]

        }

        {

            //filter 过滤,过滤一些不合格“元素”, 如果回调函数返回true,就留下来

            let arr = [{ title: "title1", hot: 10 }, { title: "title2", hot: 20 }, { title: "title3", hot: 30 }];

            let newArr = arr.filter((val, idnex, arr) => { return val.hot > 10 });

            console.log(newArr);

            //0: { title: "title2", hot: 20 }

            //1: { title: "title3", hot: 30 }

        }

        {

            //arr.some(): 类似查找,  数组里面某一个元素符合条件,返回true

            let arr = [1, 3, 5, 7, 9, 10];

            let res = arr.some((val, index, arr) => { return val % 2 == 0 });

            console.log(res);

            //true

        }

        {

            //arr.every(): 类似查找,  数组里面某一个元素符合条件,返回true

            let arr = [1, 3, 5, 7, 9, 10];

            let res = arr.every((val, index, arr) => { return val % 2 == 0 });

            console.log(res);

            //false

        }

        {

            //arr.reduce()  从左往右  求数组的和、阶乘

            let arr = [2, 2, 3];

            let res = arr.reduce((prev, cur, index, arr) => { return prev * cur });

            let res1 = arr.reduce((prev, cur, index, arr) => { return prev ** cur });//幂运算

            console.log(res);

            console.log(res1);

            //12

            //64

        }

        {

            //arr.reduce()  从右往左  求数组的和、阶乘

            let arr = [2, 2, 3];

            let res = arr.reduceRight((prev, cur, index, arr) => { return prev * cur });

            let res1 = arr.reduceRight((prev, cur, index, arr) => { return prev ** cur });

            console.log(res);

            console.log(res1);

            //12

            //81

        }

        {

            //for...of...类似于普通for

            //但新增了arr.keys()    数组下标

            //       arr.entries()  数组某一项

            let arr = [2, 2, 3];

            for (let val of arr) {

                console.log(val);

            }

            for (let val of arr.keys()) {

                console.log(val);

            }

            for (let [key,val] of arr.entries()) {

                console.log(key,val);

            }

        }

</script>

【第七课:数组新增特性】

*******************************************************************************

*******************************************************************************   

 <script>

        {

            //扩展运算符...

            let arr1 = [1, 2, 3];

            let arr2 = [...arr1];

            console.log(arr2);

            //(3) [1, 2, 3]

        }

        {

            //Array.from();

            //作用: 把类数组(获取一组元素、arguments...) 对象转成数组

            //个人观点: 具备 length这个东西,就靠谱

            let arr1 = [1, 2, 3];

            let arr2 = Array.from(arr1);

            console.log(arr2);

            //[1, 2, 3]

            let str = "123";

            console.log(Array.from(str));

            //["1", "2", "3"]

            let json = {

                0: "name1",

                1: "男",

                2: 18,

                length: 3

            };

            console.log(Array.from(json))//json key比较特殊

            // ["name1", "男", 18]

            let json1 = {

                0: "name1",

                1: "男",

                2: 18,

                length: 2

            };

            console.log(Array.from(json1))//json key比较特殊

            // ["name1", "男"]

        }

        {

            //Array.of():  把一组值,转成数组

            let arr = Array.of("1", "2", "3");

            console.log(arr);

            //["1", "2", "3"]

        }

        {

            //arr.find():  查找,找出第一个符合条件的数组成员,如果没有找到,返回undefined

            let arr = [10, 20, 30];

            console.log(arr.find((val, index, arr) => { return val > 10 }));

        }

        {

            //arr.findIndex():  找的是第一个符合条件位置, 没找到返回-1

            let arr = [10, 20, 30];

            console.log(arr.findIndex((val, index, arr) => { return val > 10 }));

        }

        {

            //arr.fill()    填充

            //arr.fill(填充的东西, 开始位置, 结束位置);

            let arr = [10, 20, 30];          

            arr.fill([1, 2, 3, 4], 1);

            console.log(arr);

        }

        {

           //在ES2016里面新增:

           //arr.indexOf()

           //arr.includes()

            let arr = [10, 20, 30];   

            let res = arr.includes(20);

            console.log(res);

            //true

        }

    </script>

【第八课:对象简洁语法及对象新增】

*******************************************************************************

*******************************************************************************

对象简洁语法   

 <script>

        {

            let name = "name1";

            let sex = "男";

            let age = 18

            let json1 = {

                name: name,

                sex: sex,

                age: age

            }

            console.log(json1);

            let json2 ={

                name,

                sex,

                age

            };

            console.log(json2);

            //json2 为json1 的简介语法

            //Object age: 18name: "name1"sex: "男"

            //Object age: 18name: "name1"sex: "男"

        }

    </script> 

对象新增特性

两个对象是否相等Object.is()新增 

   <script>

        {

           //判断两个对象是否相等Object.is()新增对NaN以及+0,-0的处理

           console.log(NaN == NaN);

           //false

           console.log(NaN===NaN);

           //false

           console.log(Number.isNaN(NaN));

           //true

           console.log(Object.is(NaN,NaN));

           //true

           console.log(Object.is(+0,-0));

           //false

           console.log(+0==-0);

           //true

           console.log(+0===-0);

           //true

        }

    </script>

Object.assign():合并对象

let 新的对象 = Object.assign(目标对象, source1, srouce2....)

    <script>

        {

            let json1 = { a: 1 };

            let json2 = { b: 2 };

            let json3 = { c: 3 };

            let json4 = { d: 4, a: 4 };

            let newJson1 = Object.assign({}, json1, json2, json3);

            let newJson2 = Object.assign({}, json1, json2, json3, json4);

            console.log(newJson1);

            //{a: 1, b: 2, c: 3}

            console.log(newJson2);

            //{a: 4, b: 2, c: 3, d: 4} //a变成4,覆盖前面的值

        }

    </script>

对象新增函数属性 

   <script>

        {

            //对象新增属性

            //ES2017引入:

            //Object.keys()

            //Object.entries();

            //Object.values();

            var json = { a: 1, b: 2, c: 3 };

            for (let key of Object.keys(json)) {

                console.log(key);

            }

            //a

            //b

            //c

            for (let val of Object.values(json)) {

                console.log(val);

            }

            //1

            //2

            //3

            for (let item of Object.entries(json)) {

                console.log(item);

            }

            //(2) ["a", 1]

            //(2) ["b", 2]

            //(2) ["c", 3]

            for (let [key, val] of Object.entries(json)) {

                console.log(key, val);

            }

            //a 1

            //b 2

            //c 3

            //对象的扩展函数... 拷贝json对象

            let json1 = {...json};

            console.log(json1);

            //{a: 1, b: 2, c: 3}

        }

    </script>

【第九课:Promise】

*******************************************************************************

*******************************************************************************

  

  <script>

        //Promise

        //承诺,许诺 作用:  解决异步回调问题

        //语法:

        //let promise = new Promise(function(resolve, reject){

        //    //resolve,   成功调用

        //    //reject     失败调用

        //});

        //promise.then(res=>{

        //

        //}, err=>{

        //  

        //})

        //promise.catch(err => { })

 

        {

            let status = 2

            let promise = new Promise(function (resolve, reject) {

                if (status == 1) {

                    resolve("成功了");

                } else {

                    reject("失败了");

                }

            })

            promise.then(res => {

                console.log(res);

            },err=>{

                console.log(err);

            })

            //promise.catch(err=>{console.log(err)});

        }

        //简洁用法

        //new Promise().then(res=>{

        //}).catch(err=>{

        //})

        {

            let status = 1;

            new Promise(function (resolve, reject) {

                if (status == 1) {

                    resolve("成功了");

                } else {

                    reject("失败了");

                }

            }).then(res=>{console.log(res)}).catch(err=>{console.log(err)});

        }

        //Promise.resolve('aa') :  将现有的东西,转成一个promise对象, resolve状态,成功状态

        //等价于:

        //new Promise(resolve =>{

        //    resolve('aaa')

        //});

        {

            Promise.resolve("111").then(res=>{console.log(res)}).catch(err=>{console.log(err)});;

            new Promise((resolve,reject)=>{

                resolve("111");

            }).then(res=>{console.log(res)}).catch(err=>{console.log(err)});

        }

        //Promise.reject('aaa'):   将现有的东西,转成一个promise对象,reject状态,失败状态

        //等价于:

        //new Promise((resolve, reject) =>{

        //    reject('aaa')

        //});

        {

            Promise.reject("222").then(res=>{console.log(res)}).catch(err=>{console.log(err)});;

            new Promise((resolve,reject)=>{

                reject("222");

            }).then(res=>{console.log(res)}).catch(err=>{console.log(err)});

        }

        //Promise.all([p1, p2, p3]):  把promise打包,扔到一个数组里面,打包完还是一个promise对象

        //必须确保,所有的promise对象,都是resolve状态,都是成功状态

        //Promise.race([p1, p2, p3]): 只要有一个成功,就返回

    </script>

【第十课:模块化】

*******************************************************************************   

 <script type="module">

        //模块化:

        //  注意: 需要放到服务器环境

        //  a). 如何定义模块?

        //      export  东西

        //      export const a =12;

        //      export{

        //          a as aaa,

        //          b as banana

        //      }

        //  b). 如何使用?

        //      import

        //      import './modules/1.js';

        //      import {a as a, banana, c} from './modules/2.js'

        //      import * as modTwo from './modules/2.js';

        //使用模块:

        //  <script type="module"><?script>

 

        //1.js

        //console.log("模块1加载")

        //export default  "默认值";

        //export const a = "a的值";

        //export const b = "b值";

        import dVal, { a as apple, b } from './modules/1.js'; //模块里面是默认值(export default  "默认值"; );外部接受时不使用{}。

        console.log(dVal, apple, b);

        ///模块1加载

        ///默认值 a的值 b值

 

        //import:  特点

        //  a). import 可以是相对路径,也可以是绝对路径

        //      import 'https://code.jquery.com/jquery-3.3.1.js';

        //  b). import模块只会导入一次,无论你引入多少次

        //  c). import './modules/1.js';  如果这么用,相当于引入文件

        //  d). 有提升效果,import会自动提升到顶部,首先执行

        //  e). 导出去模块内容,如果里面有定时器更改,外面也会改动,不想Common规范缓存

        // import()  类似node里面require, 可以动态引入, 默认import语法不能写到if之类里面

        //  返回值,是个promise对象

        //  import('./modules/1.js').then(res=>{

        //      console.log(res.a+res.b);

        //  });

        //动态引入

        import('./modules/1.js').then(res => {

            console.log(res.default + res.a + res.b);

        });

        //默认值a的值b值

        

        //  优点:

        //      1. 按需加载

        //      2. 可以写if中

        //      3. 路径也可以动态

        //  Promise.all([])

    </script>

【第十一课:类和继承】

*******************************************************************************

*******************************************************************************

    

<script type="module">

        let aaa = "test"; //定义变量作为方法名

        let bbb = "t111";

        class Person {

            constructor(name, age) {

                console.log(`传入参数name${name};age${age};`);

                this.name = name;

                this.age = age;

            }

            showName() {

                console.log(this.name);

            }

            showAge() {

                console.log(this.age);

            }

 

            //方法名拼接

            [aaa]() { // 调用方法名变量

                console.log("test");

            }

            [bbb]() { // 调用方法名变量

                console.log("t111");

            }

            [aaa + bbb]() { // 调用方法名变量

                console.log("testt111");

            }

            //静态方法

            static sfn() {

                console.log("调用静态函数sfn");

            }

        }

 

        class Student extends Person {

            constructor(name, age, skill) {

                super(name, age);

                this.skill = skill;

            }

            showName() {

                super.showName();

                console.log("子类");

            }

            showSkill() {

                console.log(this.skill);

            }

        }

        let person = new Person("张三", 18);

        //传入参数name张三;age18;

        console.log(person.name);

        // 张三

        console.log(person.age);

        //18

        person.showName();

        //张三

        person.showAge();

        ///////////////////////////////////方法名拼接

        //18

        person.test();

        //test

        person[aaa]();

        //test

        person.t111();

        //t111

        person[bbb]();

        //t111

        person.testt111();

        //testt111

        person[aaa + bbb]();

        //testt111

        Person.sfn();

        //调用静态函数sfn

        let stu = new Student("学生张", 18, "逃学");

        stu.showName();

        //传入参数name学生张; age18;

        //学生张

        //子类

    </script>

 

【第十二课:Symbol&generator】

*******************************************************************************

*******************************************************************************

Symbol   

 <script>

        //数据类型:number、string、boolean、Object、undefined、function、symbol(ES6新增数据类型)

        //      symbol  使用情况一般

        //

        //定义:

        //  let syml = Symbol('aaa');

        //

        //注意:

        //  1. Symbol 不能new

        //  2. Symbol() 返回是一个唯一值

        //      坊间传说, 做一个key,定义一些唯一或者私有一些东

        //  3. symbol是一个单独数据类型,就叫 symbol, 基本类型

        //

        //  4. 如果symbol作为key,用for in循环,出不来

        let syml = Symbol('aaa');

        console.log(syml);

        //Symbol(aaa)

    </script>

Generator

    <script>

        //generator     解决异步深度嵌套的问题, async

        //定义:

        function* gen() {

            yield 'welcome';

            yield 'to';

            return '牧码人';

        }

        //调用:

        let g1 = gen();

        g1.next();  // {value:'welcome', done:false}

        //console.log(g1.next());

        g1.next();  // {value:'to', done:false}

        g1.next();  // {value:'牧码人', done:true}

 

        // for .. of  自动遍历 generator

        // return的东西,它不会遍历

    </script>

异步: 不连续,上一个操作没有执行完,下一个操作照样开始

同步: 连续执行,上一个操作没有执行完,下一个没法开始 

关于异步,解决方案:

         a). 回调函数

         b). 事件监听

         c). 发布/订阅

         d). Promise对象

    e).generator,

【第十三课:async,await】

*******************************************************************************

*******************************************************************************

   

 <script>

        //ES2017,规定 async

        //nodeJs

        //读取文件  fs.readFile

        //1. promise

        //2. genrator

        //3. async

        const fn = function (status) {

            return new Promise(function (resolve, reject) {

                if (status % 2 == 1) {

                    resolve(status);

                } else {

                    throw new Error("出错了")

                }

            }).then(res => { console.log(res) }).catch(err => { console.log(err) });

 

        }

        //async function fn(){  //表示异步,这个函数里面有异步任务

        //let result = await  xxx   //表示后面结果需要等待

        //}

        async function test() {

            let t1 = await fn(1);

            let t2 = await fn(2);

            let t3 = await fn(3);

        }

        test();

        //async特点:

        //  1. await只能放到async函数中

        //  2. 相比genrator语义化更强

        //  3. await后面可以是promise对象,也可以数字、字符串、布尔

        //  4. async函数返回是一个promise对象

        //  5. 只要await语句后面Promise状态变成 reject, 那么整个async函数会中断执行

        //如何解决async函数中抛出错误,影响后续代码:

        //  a).

        //      try{

        //

        //      }catch(e){

        //          

        //      }

        //  b). promise本身catch

        //个人建议大家:

        //  try{

        //      let f1 = await readFile('data/a.txt');

        //      let f3 = await readFile('data/c.txt');

        //      let f2 = await readFile('data/b.txt');

        //  }catch(e){}

    </script>

【第十四课:Set和WeakSet】

*******************************************************************************

*******************************************************************************

Set    

<script>

        //数据结构

        //数组

        //json, 二叉树....

        //

        //set数据结构:

        //类似数组,但是里面不能有重复值

        //let setArr = new Set("a", "c", "a", "b");

        let setArr = new Set();

        setArr.add("a").add("c").add("a").add("b");

        console.log(setArr);

        setArr.delete("a");

        console.log(setArr);

        let isHas = setArr.has("a");

        console.log(isHas);

        console.log(setArr.size);

        setArr.forEach((val, index) => {

            console.log(val, index);

        });

setArr.clear();

    </script>

WeakSet

new Set([]);      存储数组, 这种写法对

new WeakSet({})       存储json,这种写法不靠谱

WeakSet没有size,也没有clear()

有, add(), has(), delete()

确认,初始往里面添加东西,是不行的。最好用add添加

【第十五课:Map和WeakMap】

*******************************************************************************

*******************************************************************************

map:

         类似 json, 但是json的键(key)只能是字符串 

         map的key可以是任意类型 

使用:

         let map = new Map(); 

         map.set(key,value);    设置一个值 

         map.get(key)   获取一个值 

         map.delete(key)       删除一项        

         map.has(key)   判断有没有 

         map.clear()      清空 

循环:

         for(let [key,value] of map){} 

         for(let key of map.keys()){} 

         for(let value of map.values()){} 

         for(let [k,v] of map.entries()){} 

         map.forEach((value, key) =>{

             console.log(value, key);

         }) 

WeakMap():  key只能是对象 

Set   里面是数组,不重复,没有key,没有get方法

Map 对json功能增强,key可以是任意类型值

【第十六课:数字的变化及Math新增对象】

*******************************************************************************

*******************************************************************************

数字(数值)变化:

         二进制:  (Binary)

                   let a = 0b010101;

         八进制: (Octal)

                   let a = 0o666;        

         十六进制:

                   #ccc

         Nunber()、parseInt()、 parseFloat()

         Number.isNaN(NaN)        -> true 

         Number.isFinite(a)   判断是不是数字         

         Number.isInteger(a)  判断数字是不是整数        

         Number.parseInt();

         Number.parseFloat();

安全整数:

         2**3 

         安全整数:    -(2^53-1) 到 (2^53-1),   包含-(2^53-1) 和(2^53-1) 

         Number.isSafeInteger(a); 

         Number.MAX_SAFE_INTEGER         最大安全整数

         Number.MIN_SAFE_INTEGER 最小安全整数

Math:

         Math.abs()

         Math.sqrt()

         Math.sin() 

         Math.trunc()    截取,只保留整数部分

                   Math.trunc(4.5)  ->  4

                   Math.trunc(4.9)  ->  4 

         Math.sign(-5)   判断一个数到底是正数、负数、0

                   Math.sign(-5)  ->  -1

                   Math.sign(5)  -> 1

                   Math.sign(0)    ->  0

                   Math.sign(-0)  ->  -0

                   其他值,返回 NaN        

         Math.cbrt()      计算一个数立方根 

                   Math.cbrt(27)  ->  3 

【第十七课:ES2018新增对象】

*******************************************************************************

*******************************************************************************

ES2018(ES9):

         1. 命名捕获

                   语法:  (?<名字>) 

                   let str = '2018-03-20';

                   let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

                   let {year, month ,day} = str.match(reg).groups;

                   console.log(year, month, day);

         反向引用:

                   \1  \2     $1  $2

         反向引用命名捕获:

                   语法:  \k<名字> 

                   let reg = /^(?<Strive>welcome)-\k<Strive>$/; 

                   匹配: ‘welcome-welcome’ 

                   let reg = /^(?<Strive>welcome)-\k<Strive>-\1$/; 

                   匹配: 'welcome-welcome-welcome' 

         替换:

                   $<名字> 

                   let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

                   str = str.replace(reg,'$<day>/$<month>/$<year>');

                   console.log(str);

                   str = str.replace(reg, (...args)=>{

                            //console.log(args)

                            let {year, month, day} = args[args.length-1]; 

                            return `${day}/${month}/${year}`;

                   }); 

                   console.log(str); 

         2.   dotAll 模式    s 

                   之前 '.' 在正则里表示匹配任意东西, 但是不包括 \n        

            let reg = /\w+/gims; 

         3. 标签函数

                   function fn(){ 

                   } 

                   fn()  //这样调用就是普通函数 

                   fn`aaa`  //标签函数使用

                   function fn(args){

                            return args[0].toUpperCase();

                   } 

                   console.log(fn`welcome`);

【第十八课:Proxy的使用】

*******************************************************************************

*******************************************************************************

   

 <script>

        let obj = {

            name: "name1",

            age: 18

        };

        let newObj = new Proxy(obj, {

            get(target, property) {

                console.log(target, property);

                if (property == "age") {

                    console.log(`您访问了${property}属性。禁止访问年龄属性`);

                    return undefined;

                } else {

                    console.log(`您访问了${property}属性。`);

                    return target[property];

                }

 

            }

        })

        console.log(newObj.name);

        console.log(newObj.age);

        //语法:

        //  new Proxy(target, handler);

        //  let obj = new Proxy(被代理的对象,对代理的对象做什么操作)

        //

        //  handler:

        //

        //  {

        //      set(){},  //设置的时候干的事情 设置,拦截:设置一个年龄,保证是整数,且范围不能超过200

        //      get(){},  //获取干的事情 获取拦截

        //      deleteProperty(){},  //删除 删除,拦截:

        //      has(){}  //问你有没有这个东西  ‘xxx’ in obj 检测有没有

        //      apply()  //调用函数处理 拦截方法

        //      .....

        //  }

        //

        //实现一个,访问一个对象身上属性,默认不存在的时候给了undefined,希望如果不存在错误(警告)信息:

    </script>

【第十九课:Reflect的使用】

*******************************************************************************

*******************************************************************************

Reflect.apply(调用的函数,this指向,参数数组); 

fn.call()

fn.apply()  类似 

Reflect: 反射

         Object.xxx  语言内部方法

                   Object.defineProperty 

         放到Reflect对象身上 

         通过Reflect对象身上直接拿到语言内部东西 

         'assign' in Object    ->   Reflect.has(Object, 'assign')

         delete json.a        ->   Reflect.deleteProperty(json, 'a');   

 <script>

        function sum(a, b) {

            return a + b;

        }

        let newSum = new Proxy(sum, {

            apply(target, context, args) {

                return Reflect.apply(...arguments) ** 2;

            }

        });

        console.log(newSum(2,3));

        console.log(Reflect.apply(sum,"aaa",[2,3]));

        let json = {

            a:1,

            b:2

        };

        Reflect.deleteProperty(json, 'a');

        console.log(json);

    </script>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!