es6的学习（常用）

关键字（var、let和const）

    var 是函数作用域

    let 和 const 是块级作用域

    什么是块级作用域

    花括号{}内部为块级作用域

    函数作用域是函数里的内容

    var和let用来声明变量

    const用来声明常量，并且必须赋值，赋值后声明的的数据(值类型)不能修改

// let

    var a = 1;

    let b = 2;

    //var 全局变量

    //let 局部变量只能在声明let的{}中使用

    //let 声明的变量不会变量提升

    //let 在同一个作用域不能重复声明

    console.log(a, b);

    {

        var c = 1;

    }

    console.log(c);

    {

        let d = 1

    }

    // console.log(d);//报错找不到d

    for (var i = 100; i < 5; i++) {

    }

    console.log(i);

    for (let j = 100; j < 5; j++) {

    }

    // console.log(j);//报错找不到j

    var lis = document.querySelectorAll('li')

    // for (var m = 0; m < lis.length; m++) {

    //     lis[i].onclick = function () {

    //         alert(i)

    //     }

    // }

    for (let m = 0; m < lis.length; m++) {

        lis[m].onclick = function () {

            alert(m)

        }

    }

    {

        let e = 1;

        // let e = 2;//let 在同一个作用域不能重复声明

    }

    const k = [1, 2, 3];

    k = []

    console.log(k);

 

    // const

    // 1.和let基本一致（局部，不会变量提升，不能重复声明)

    // 2.声明必须赋值

    // Uncaught没有捕捉到SyntaxError语法错误

    // const PI;

    const PI = 3.1415926;

    console.log(PI);

    // 3.声明的数据不能修改（值类型)

    // PI = 3.14;

    const PERSON = {

        name: "Baize", age: 18

    };

    //引用类型常量

    PERSON.age = 24;

    //引用类型只要不是重新赋值，都是引用同一块内存地址

    // PERSON = {};

    console.log(PERSON);

    // 4.建议变量名大写

结构数组

就是把数组解析为单个的变量

    1.把数组解析单个的变量

    2.可以逗号跳过某个元素

    3.通过...接收剩余内容(不定参)

    let arr = [1, 3, 5, 7, 9, 11, 12, 13];

    let [a, , b, ...c] = arr;

    console.log(a);

    console.log(b);

    console.log(c);

 

    // 4. 可以给默认值

    let arr2 = [1, 2, 3, 4];

    let [d, e, f, g = 88] = arr2;

    console.log(d, e, f, g)

    // 5.可以交换变量

    var k = 100;

    var j = 50;

    [k, j] = [j, k];

    console.log(k, j);

对象解构

    1.对象解构就是把对象解析为单独的变量

    2.不用按顺序解构

 let obj = { name: "baize", age: 22 }

    let { age, name } = obj;

    console.log(name);

    console.log(age);

新增字符串方法
 

检测:

         includes是否包含,

         startsWith以..开头 

         endsWith以...结尾

         includes检测是否包含字符串,包含返回true不包含返回false

  var str = "我爱我的祖国，我的祖国，是中国的国";

        console.log(str.includes('他乡'));

        console.log(str.includes('祖国'));

        console.log(str.startsWith("我恨"));

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

填充和去空白

   string字符串

   1.padStart填充在前面, padEnd填充后面

   2.trim移除两端空白,trimLeft,trimRight移除左右空白

   3.表单交互先移除空白

   4.遍历的新方式for of

        var str = "1";

        //补齐3位数，不够用0来填充

        console.log(str.padStart(3, "0"));

        //补齐3位数，不够用_来填充

        console.log(str.padEnd(4, "_"))

        //时间01 22

        var mystr = "     你好,东三街怎么走";

        console.log(mystr);

        console.log(mystr.trim())

        //特别生僻字是占两个字节(导致str.length与字符不匹配异常）

        var str = "田里的水太多了，你做口，把水放出来!";

        // for (var i = e; i < str.Length; i++) {

        //     console.Log(str[i]);

        // }

        for (let s of str) {

            console.log(s);

        }

新增数组方法

  ES3: sort

  ES5:高阶,forEach filter map reduce some every

  ES6:find查找符合条件的元素,findIndex查找符合条件元素的下标

        var arr = [2, 4, 6, 7, 8];

 

        //find查找符合条件的元素

        // var el = arr.find(function (item) {

        //if (item > 5) { return true }

        //})

        // var el = arr.find(item => item > 5);

        // console.Log(el);

 

        // findIndex查找符合条件元素的下标

        // var index = arr.findIndex(function(item){

        //return item > 5;

        // })

        // alert(index );

 

        // forEach遍历元素

        var arr1 = ["小红", "小绿", "小蓝", "小紫", '小黑'];

        // item当前遍历的元素, index当前元素的下标，self当前遍历的数组

        arr1.forEach(function (item, index, self) {

            // consoLe.Log(item, index, seLf)

        })

 

        // filter 过滤不符合条件的元素(返回true保留，返回faLse过滤掉)

        var arr2 = arr.filter(function (item) {

            return item % 2 === 6;

        })

        // consoLe.Log( "arr2 " , arr2)

 

        //filter通常可以实现数组的去重

        var arr3 = [1, 1, 2, 2];

        // 1 item 0 0 true保留

        // 1 item 0 1 false过滤

        // 2 item 2 2 true保留

        // 2 item 2 3 false 过滤

        var arr4 = arr3.filter(function (item, index) {

            //获取元素查找出来的下标

            var ind = arr3.indexOf(item); if (ind === index) {

                //如果查找出的下标与遍历下标一致，元素保留

                return true

            } else {

                return false;

            }

        })

        console.log("arr4", arr4)

 

        // reduce类型,上次的结果是当次的条件

        // 数组的求和

        var total = arr.reduce(function (a, b) {

            return a + b;

        })

        // a:2 b:4 return 6

        // a:6 b:6 return 12

        // a:12 b:7 return 19

        // a:19 b:8 return 27

        console.log(total);

        var big = arr.reduce(function (a, b) {

            return a * 10 + b;

        })

        console.log("big", big);

 

        // some有一返回真，着整体为真

        var arr6 = [5, 1, 2, 12, 3, 7];

        //判arr6里面是否有一个大于10的数

        var isbig = arr6.some(function (item) {

            return item > 10;

        })

        console.log("isbig", isbig);

 

        // every所有的回调函数返回为真，才返回真

        // 查找所有的数是否都大于5

        var bigF = arr6.every(function (item) {

            return item > 5;

        })

        console.log("bigF", bigF)

箭头函数

         1.箭头函数:函数的简写

         2.如果不是一个参数需要添加()

         3.如果有多行语句用{}，返回用return

         4.如果需要返回对象用({})

        var fun = function () {

            console.log("love");

        }

        var fun1 = () => console.log("love");

        //=>左侧是参数

        //=>右侧是执行语句也是返回值

        fun();

        fun1();

        var fun2 = age => console.log("love" + age);

        var fun2s = (age, name) => console.log("love" + age + name);

        fun2(18);

        fun2s(18, 'baize');

        var fun3 = age => {

            if (age) {

                console.log("love" + age)

            }

            else {

                console.log(age);

            }

        }

        fun3(19)

        var fun4 = (age, name) => ({ name: name, age: age, msg: "大家好我是" + name })

        console.log(fun4(19, 'baize1'));

箭头函数this指向

 箭头函数的this指向的是函数的上一层作用域的this

        var age = 50;

        var obj = {

            age: 18,

            grow: () => {

                setInterval(() => {

                    this.age++;

                    console.log(this.age);//51

                }, 3000)

            }

        }

        // obj.grow();

        // var grow = obj.grow;

        // window.grow()

        var arr = [2, 4, 6, 7, 8];

        //过滤出大于5的数

        var arr1 = arr.filter(item => item > 5);

        console.log(arr1)

        var total = arr.reduce((a, b) => a + b);

        console.log(total);

    函数默认参、不定参(形参，定义的时候)、拓展参(实参，执行的时候)

//当参数是undefined时候取默认参数

        function say(name, age = 28) {//age=28函数默认参数

            console.log("大家好我的名字是" + name + "今年" + age)

        }

        say("baize", 17);

        say("baize", undefined);

 

        //并不确定函数的参数是几个(定义函数的时候)

        // ...变量名，接收所有的参数列表

        function add(...args) {//...args是不定参

            var total = args.reduce((a, b) => a + b);

            console.log(total);

        }

        add(2, 3);

        add(1, 2, 5);

 

        function metting(p1, p2, p3) {

            console.log("今天来的" + p1 + p2 + "和" + p3)

        }

        metting("水煮鱼", "老王", "老张")

        var arr = ["老王", "老郑", "老张", "水煮鱼"];

        // metting.apply(null, arr);

        metting(...arr);//...arr拓展参

对象

对象新增

    1.Object.create()通过现有对象创建一个新的对象

    2.Object.keys()获取对象所有键的集合成为一个数组

    3.Object.values()获取值的集合

    4.Object.assign(）合并数据

   

13Person.js

export default class Person {

    constructor(name, age) {

        this.name = name; this.age = age;

    }

    say() {

        console.log("我是" + this.name + "今年" + this.age + "一顿要吃" + this.age +

            "个馍")

    }
 

14Students.js

//导如person

import Person from './13Person.js'

// extends继承

export default class student extends Person {

    constructor(name, age, major) {

        super(name, age);//调用父构造函数

        this.major = major;

    }

    study() {

        console.log(this.name + "正在努力的学习" + this.major)

    }

}  

set

 set常用来去重

       var arr = [1, 2, 1, 2, 1, 1, 2];

       var arr1 = [...new Set(arr)];

       console.log(arr1)//1,2

 var s1 = new Set([1, 2, 1, 2, 5, 9, 9, 8]);

        // add添加delete删除 cLear清空 has检测size大小

        console.log(s1.size);

        s1.add(88);

        s1.delete(9);

        console.log(s1);//1, 2, 5, 8, 88

map(映射)

      // map图键名可以是任意类型

        var m = new Map([["name", "mumu"], ["age", 18], [{ eye: 2 }, "好眼睛"]

        ]);

        console.log(m);

        //set添加 get获取 size大小 delete删除，clear清空

        console.log(m.get("name"))

        m.set(null, "没有");

        console.log(m);

        m.delete("age");

        console.log(m);

迭代对象

  迭代对象，可以用for of遍历对象是迭代对象

  String字符串Array数组set集合Map图

  keys键结果 values 值的集合 entries键与值的集合

 var s1 = new Set([1, 5, 7, "name", "mumu"]);

        for (var v of s1) {

            console.log("v:", v);

        }

        for (var key of s1.keys()) {

            console.log('key:', key);

        }

        for (var key of s1.values()) {

            console.log('keyval:', key);

        }

        //

        var arr = ["red", "blue", "yellow"];

        for (var key of arr.keys()) {

            console.log(key);

        }

        for (var [k, v] of arr.entries()) {

            console.log(k, v)

        }

同步和异步

 //异步先执行主线程代码，再执行其他代码

        // consoLe.Log (1);

        // setTimeout(() => console.log(2), 1000);

        // console.Log(3);

        //实现异步:1.回调函数，2.事件响应3. promise承诺，4.订阅和发布模式

 function say(str, delay, callback) {

            setTimeout(() => {

                console.log(str);

                if (callback) { callback() }

            }, delay)

        }

        say("你笑起来真好看", 2000, () => {

            say("我能加你个微信吗?", 3000, () => {

                say("我能做你男朋友吗", 5000)

            })

        })

promise

 //承诺买个大house前面是游泳池，后面花园，楼顶停机坪

        var p = new Promise((resolve, reject) => {

            var n = Math.random();

            setTimeout(() => {

                if (n > 0.5) {

                    resolve("买个大house前面是游泳池，后面花园，楼顶停机坪")

                } else {

                    reject("游泳池去大众澡堂也可以，花园去公园就有了，house咱们租的房子也是一样")

                }

            }, 2000)

        })

        console.log(p);

        // 承诺有3个状态  pending准备   rejected拒绝  resolved兑现

        // 状态发生变化就不能更改

        // .then回调函数拿到的是resloved兑现状态的结果

        // .catch回调函数拿到的是rejected拒绝的理由

        p.then(res => {

            console.log(res);

        })

            .catch(err => console.error(err))

promise解决回调地狱

    //我能做你男朋友吗

        function say(msg, delay) {

            //返回一个promise的实例

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

                setTimeout(() => {

                    resolve(msg);

                }, delay)

            })

        }

        say("你笑起来真好看", 2000).then(res => {

            console.log(res);

            return say("我能加你个微信吗?", 3000)

        })

            .then(res => {

                console.log(res);

                return say("能做你男朋友吗", 5000)

            })

            .then(res => {

                console.log(res);

            })

            .catch(err => {

                console.log(err)

            })

jsonp

// 什么事浏览器同源策略（当前文件请求服务器时候要求，请求地址与当前文件同源）

        // 同源：域名，子域名，端口号，协议一致

        // 跨域：绕过浏览器的同源策略跨域名获取数据

        // jsonp 利用script src没有同源策略限制返回方法执行加数据

        // 提前定义这个方法就可以

        // 拼接url，定义方法的名称，动态创建script 异步

        function jsonp(url){

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

                // 定义函数的名称

                var funname="jp"+Date.now();

                // 定义script的src

                var src = url+"&callback="+funname;

                // 创建一个script

                var script = document.createElement("script");

                // 指定src

                script.src= src;

                // 插入body

                document.body.appendChild(script);

                // 定义函数

                window[funname] = function(data){

                    // 把动态创建的script标签移除

                    document.body.removeChild(script);

                    resolve(data);

                   

                }

                // 错误拒绝

                script.onerror = function(err){

                    // 把动态创建的script标签移除

                    document.body.removeChild(script);

                    reject(err)

                }

               

               

            })

        }

        /* jsonp("https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南省&city=郑州市")

        .then(res=>{

            console.log(res);

        })

        .catch(err=>{

            console.error(err)

        }) */

        jsonp("https://r.inews.qq.com/api/ip2city?otype=jsonp")

        .then(res=>{

            // 先通过ip获取地址

            console.log(res);

            // 返回新的promise获取天气

            return jsonp(`https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.province}&city=${res.city}`)

        })

        .then(res=>{

            console.log("天气",res);

        })

        .catch(err=>console.error(err))

       

         // function jp(data){

            //  console.log(data);

         // }

使用promise下载一张图片

        //02在promise创建一个img标签

        //03 img onLoad加载 resolve img

        // 04 img onerror出错reject

        function downImg(url) {

            //返回promise

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

                //创建图片

                var img = document.createElement("img");//指定src

                img.src = url;//加载成功返回图片

                img.onload = function () {

                    resolve(img);

                }

                //加载失败返回错误原因

                img.onerror = function (err) {

                    reject(err)

                }

            })

        }

        downImg("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340")

            .then(res => {

                document.body.appendChild(res);

            })

            .catch(err => {

                console.error(err);

            })

async修饰符

   // async修饰的函数，函数执行返回的是一个promise对象

        //通常配合await等待关键字, await只能出现在async装饰的函数里面

        //await会等待promise的resolve的结果

        function say(msg, delay) {

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

                setTimeout(() => resolve(msg), delay);

            })

        }

        async function doit() {

            var m1 = await say("你好，我能加你个微信吗?", 4000);

            console.log(m1);

            var m2 = await say("走吃个串串", 3000);

            console.log(m2);

            return "国庆快乐! ";

        }

        doit()

            .then(res => console.log(res));

        //var result = doit();

        // console.Log(result);