关于ES6

let 命令

let 关键字用来定义变量

let 的特性:

a.不能够重复定义的
b.不存在变量提升
c.存在块级作用域
d.不存在作用域链问题

ES6 中 let

<script>
       

         
        //测试一
           var name = "admin"
           var name = "root"
           console.log(name);//结果:root


        /*
           //测试二
           let name = "admin"
           let name = "root"
           console.log(name);//结果:报错
        */

        /*
            测试三
            console.log(name); //结果,报错
            let name = "admin"
        */
        
        

        /*
            //测试四
            {
                let i = 20
            }
            console.log(i)  //报错 (因为块级作用域,没有在括号里,所以报错)
        */

    </script>

变量:

<script>
        //1.ES5中定义变量 变量名的规则
        //var name = "任嘉伦";

        //2.ES6中定义变量 使用let 关键字
        let name = "任嘉伦" 
        //ES6新特性1: 不能狗重复声明
            /*
            let name = "任嘉伦"
            let name = "赵露思" //会报错
           */
        //ES6新特性2: 块级作用域
            /*
            循环结构  for(){}    while(){}     do(){}
            选择结构  if(){}     if(){}else{}  if(){}elseif(){}.....else    switch(){}    
            函数      function fun_name(){}        
            */

            {
                let num  = 12;
            }
            //console.log(num); //结果:报错
        //ES6新特性3:  没有变量提升
            //ES6方法
            console.log(color); 结果: 报错
            let color = 'red'

            //ES5方法
            /*
            console.log(color); 结果: undefined
            var color = 'red'
            */
            
    </script>

for 经典案例:

 <script>
        var arr =[];//定义了一个空数组
        for(var i=1; i < 10; i++) {
            // //循环体
            arr[i] = function () {
                 //  //将i的值返回到外边(函数)
                return i;
             }
        }
        console.log(arr[4]());//结果:10
    </script>

不完全结构:

 <script>
        //1.变量名比等号右侧的值少,且没有其他特殊处理,多出的值会被忽略
        let [a,b,c] = [10,15,17,23,31]  //结果: a是10   b是15  c是17

        //2.变量名比等号右侧的值多,多出的变量名值为 undefined
        let [a1,b1,c1] = [10,15] //结果: a1是10  b1是15  c1是undefined
        //console.log(c1);

        //3.剩余运算符(...),会将剩下的值以数组的方式存储到c2变量中
        let [a2,b2,...c2] = [10,15,17,23,31] //结果: a2是10 b2是15 c是2
        console.log(c2);

        //4.默认值,当等号左侧的变量设置了默认值,在等号右侧又可以找到
        let [a3,b3,c3=`default`] = [10,15,zhangsan]   
        console.log(c3);//结果: zhangsan

        //5.undefined 和 unll
        let [test = 12] = [undefined] 
        console.log(test);//结果: 12

        let [test = 12] = [unll] 
        console.log(test1);//结果: null
    </script>

点击换色:

  <title>点击换色案例</title>
   <style>
       *{
            margin:0px;padding:0px;
       }
       .container{
           width: 450px;
           height: 300px;
           border: 1px solid#4013af;
           padding: 8px;
           margin: 0 auto;
       }
       .container h2{
            text-align:center;
       }
       .container .item{
           border:1px dashed red;
           margin-top:12px;
           padding:12px 0px;
       }
   </style>
 </head>
<body>
    <div class="container">
        <h2>点击换色</h2>
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
    </div>
    <script>
        //1.获取到需要绑定单击事件的标签
        var divObj = document.getElementsByClassName("item")
        //2.给标签绑定单机事件
        for(var i = 0;i<divObj.length;i++){
            console.log(i);
            divObj[i].onclick=function(){
                //alert(i)
        //3.改变div的背景颜色 this表示当前这个对象
            this.style.backgroundColor = 'cyan'
            }
        }

        /*
        console.log(divObj);
        divObj[0].onclick = function(){
            alert(0)
        }
        divObj[0].onclick = function(){
            alert(10)
        }
         */
   
        //扩展:点击时随机颜色
        //     两个颜色之间互相切换
     
        
       
    </script> 

声明常量const:

    <script>
        //定义一个常量PI
        const PI=3.14   //常量在定义时必须赋值
           console.log(PI);

        //const 定义的对象或数组时,可以修改对象和数组中的元素值,不能直接修改
        const ARR = ['zhangsan','lisi']
        ARR[1] = ['李四']
        ARR[2] = '王五'
        console.log(ARR)

        /*
        const是用来声明常量,常量就是固定不变的量,在我们开发的过程中当一个变量希望它的值在声明以后,不被(自己或者他人)改变。
        语法: const 常量名称 = 值
        注意: 
            常量的值一旦定义不能被修改
            常量的名称一般使用大写
            常量在定义时必须赋值
            不允许重复定义的
            块级作用域
        */
        
    </script>

解构赋值:

<title>解构赋值</title>
</head>
<body>
    <script>
        //1. es5 赋值方式

        /*
        var name = "张三"

        var age;
            age = 20
        
        var a = 5;
            a = age+a
        */

        //2.ES6中的解构赋值 目的在于可以简化同时定义多个变量并赋初
            /*var num1 = 12;
            var num2 = 13;
            var num3 = 15;
            var num4 = 20;
            var num5 = 23;
            */

            /*
            //ES5(js)方法  (不是很简化)
            var num1 = 12,num2 = 13, num3 = 15,num4 = 20,num5 = 23
            */

        //ES6解构赋值的用法 (比ES5更简化)
        let[num1,num2,num3,num4,num5] = [12,13,15,20,23]
        // console.log(num1);
        let[name,age] = [18,'zhangsan']
        console.log(age);//结果:zhangsan
    </script>

对象的解构赋值:

 <script>
        //js如何定义对象,对象中有属性和值()  属性名:值属性
        let obj = {
           name:"任国超",
           age:18,
           sex:1,
           study:function(){}
        } 
        //使用对象中的某个值: 对象名称.属性名
        obj.age //访问对象中的属性
        obj.study() //调用方法

        //对象的解构赋值
           /*注意:
           a.等号的左侧要使用花括号( {} )包裹变量名
           b.变量名要和对象中要解构的属性名保持一致
           c.等号右侧就是要解构的对象
           */
        let obj1 = {
           name:"任国超",
           age:18,
           sex:1,
           study:function(){}
        }
           let {name,age} = obj1
           console.log(name);
    

    </script>

JS 运算符复习:

 <script>
        /* 
        运算符:帮助我们完成业务逻辑
        运算符号的分类:
        算数运算符 
        +  -  *   %   ++  --

        比较运算符 
        >  <  >=  !=  ==  !==  ===
        =   表示赋值,就是把等号右边赋值给等号左边的变量
        ==  表示比较,如果两边的值相等,返回true,否则返回fale
        === 表示比较,两边的值和数据类型都是相同,返回true,否则返回fale

        赋值运算符 
        =  +=  -=  *=  /=  %=
        a+=b 等价于 a = a+b

        逻辑运算符
        注:大多数情况都会用在条件里边
        && 只有当两边的条件都为真时,整体返回true,其他情况全返回false
        || 只有当两边的条件都为假时,整体返回false,其他情况全返回true
        !  非真即假 非假即真
                 
        字符串拼接运算
        注:变量和字符串拼接
        5+5    //结果 10
        10+'5' //结果 105  因为是拼接运算,所以是将+号两边拼接为105

        三元运算符
        条件?条件为真的执行:条件为假的执行
        if(){}else
        */

        //取余运算 %    例: 4%5余数是4
        //++ -- 注意:参与运算的是一个变量 
        var num = 10 
        num++ //num =11 
        
        var num = 10 
        ++num //num =11  // num++ 和 ++num 对于num这个变量来讲没有任何区别

        var res = ++num  //num = 11 res = 11
        var res = num++  //num = 11 res = 10
        

        //15*'zhangsan'  //结果:NaN
        //NaN+NaN        //结果:NaN
    </script>

ES6 运算符扩展:

<script  >
        //指数运算符 符号 ++
        // 5的3次方 
        console.log( 5**3);

        //指数赋值运算符 符号 **=
        var a = 2;
        a**=4  //等价于 a = a**4
        console.log(a);

    </script>

链判断运算符:

 <script>
        var message = {
            body:{
                user:{
                    firstName:'任国超',
                    lastName:'赵露思'
                },
                inf0:{
                    age:18,
                    sex:0
                }
            }
        }
        //访问lastName   语法:对象名称.属性名
        console.log(message.body.user.lastName)
        //在使用某个对象的属性时,需要先对他之前的对象进行判断
        //const firstName = message.body.user.lastName ||'default'
        
        //es2020 中引入了链判断运算符  ?.
        var lastName = message?.body?.user?.lastName||'default'

    </script>

逻辑赋值运算符:

 <script>
        //或赋值运算符
        x ||= y
        //等同于
        x || (x = y) 
    </script>

函数的参数:

<script>
        function role(name){
            Console.log(name+'百里守约是射手');
        }
        //在函数调用的时候,输出某个角色是射手
        role("孙尚香")
        role("公孙离")
        role()
        //有形参并且没有设置默认值的时候,必须传入实参
        //多个参数使用逗号隔开
        //有默认值的参数,要放在参数列表的最后
        function role1(name,pos){
            console.log(name+pos);
        }
        role1("鲁班七号","射手")
        role1("蔡文姬","辅助")


      
        /*
        函数参数的默认值
        //有形参并且没有设置默认值的时候,必须传入实参
        (1)function demo(para = 'default'){}
        //多个参数使用逗号隔开
        //有默认值的参数,要放在参数列表的最后
        (2)function demo(name,para = 'default'){}
        */
    </script>

函数声明:

 <script> 
      /*
       函数的定义:函数是一段可重复使用的有名字的代码块
       函数的作用:代码重复使用
       函数的特性:不能自动执行,需要通过调用才能够执行
       函数调用:函数名()
      */

      /*
       函数使用步骤
            1.声明函数
              语法:function 函数名称(){}
            2.函数的调用
              函数名()
      */
    domo()//能否调用成功
    function domo(){
        console.log("百里守约是射手");
    }
    demo()//函数的调用
    demo()
    demo()
    </script>
  </doby>
  
    <script>
      demo()//可以调用成功
    </script>  

箭头函数:

<script>
        //ES5 中函数回顾
        //function fun_name(){}
        
        //ES6 中箭头函数 =>
        //let fun_name = ()=>{}


        //定义一个函数实现传入的两个参数求和,然后将求和的结构返回
        
        //ES5中
        /*
        function qiuhe(num1,num2){
            return num1+num2
        }
        var res = qiuhe(5,8)
        console.log(ress);
        */

        //ES6中
        let qh = (num1,num2) =>{
            return num1+num2
        }
        var res = qh(9,8)
        console.log(ress);


        //1.不带参数的箭头函数,小括号必须有
        let demo = ()=>{
            console.log('不带参数的箭头函数');
        }

        //2.带参数的箭头函数
        //b.带多个参数
        //a.带一个参数 (用let或者var都可以)
            /*let demo1 = (a)=>{
                return a+1
            }
            console.log(demo1(3));//结果:4  (传的参数加一:3+1=4)
            */

            //简写方式:
            //(1)参数只有一个,可以省略参数的小括号 函数体中只有一行returndai代码 可以省略{}和return关键字
            let demo1 = a => a+1   
            console.log(demo1(15));//结果:16 (传的参数加一:15+1=16)
            //(2)参数只有一个,可以省略参数的小括号 如果参数有默认值小括号就不能省略
            let demo1 = a => {return a+1}
        //带多个参数(2个以上)
        //3.参数有默认值
        let qh1 = (num1,num2=10) =>{
            return num1+num2
        }
        
    </script>

箭头函数属性:

 <script>
        //1.length属性   有默认值的参数和rest参数不参与length属性的计算
        let demo = (a=12)=>{}
        console.log(demo.length);

        let dome1 = (str,a=12)=>{}
        demo.length //结果:1 (因为有默认值的参数和rest参数不参与length属性的计算)

        let demo2=(str,a=12,...val)=>{}

        //2.name属性
        //针对匿名函数 ES5中name属性返回空,ES6中name属性返回实际的函数
        //ES5
        var demo3 = function (){}
        console.log(demo3.name);//结果:demo3 (可能性:浏览器在执行代码的时候,是按照ES6标准来执行的)
       
        var demo4 = ()=>{}
        console.log(demo4.name);

       
        //bind返回的函数,name属性值会加上bound的缀
        function foo(){};
        console.log(foo.bind({}).name) //"bound foo"
        console.log(function foo(){}).bind({}).name //"bound"
    </script>

箭头函数的注意事项:

 <title>Document</title>
    <style>
        div{
            width: 120px;
            height: 80px;
            background-color: rgb(153, 0, 255);
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div class="item">001</div>
    <div class="item">002</div>
    <div class="item">003</div>
    <div class="item">004</div>
    <script>
        document.getElementsByClassName("item")[0].onclick = function(){
            alert(this.innerHTML)
            //[0]当前单击的是001 
            //如果填入[1]单击的是002
            //如果填入[2]单击的是003
            //如果填入[3]单击的是004
        }
        //不存在this伪对象
        document.getElementsByClassName("item")[0].onclick = ()=>{
           alert(this.innerHTML)
        }

        //注意事项
        //1.箭头函数没有自己的this对象,箭头函数没有作用域,this永远指向window对象
        //2.不可以当作构造函数,也就是说,比可以对箭头函数使用new命令,否则会抛出一个错误
        //3.不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替
        //4.不可以使用yield命令,因此箭头函数不能作用Generator函数
    </script>

数值扩展:

 <script>
        //数值分隔符
        //ES2021,允许JavaScript的数值使用下划线(_)作为分隔符
        let num = 10_101
        console.log(num === 10101);//true
        //注意:
        //不能放在数值的最前面(leading)或者最后(trailing)
        //不能两个或者两个以上的分隔符连在一起
        //小数点的前后不能有分隔符
        //科学计数法里面,表示指数的e或E前后不能有分隔符


        //ES5中
        isNaN()
        //ES6中 为了遵循对象的访问格式增加Number 对象
        var res = Number.isNaN('abc')//判断括号中的值是不是NaN 是返回true 不是返回false
        console.log(res);//结果: false



    //扩展

        //ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变
        //ES5写法
        parseInt('12,34')//12
        parseFloat('123.45#')//123.45

        //Number.isInteger()用来判断一个数值是否为整数
        //注意:如果参数类型不是数值,一律返回false
        Number,isInteger(25)//true
        Number,isInteger(25.1)//false
        Number,isInteger(25.0)//true

    </script>

字符串扩展:

<button>新增</button>
    <script>
        $(function(){
            $("button").click(function(){
                let test= 12
                //在模板字符串中解析变量
                var str = `<div class="item">
                            姓名: <input type="text">
                            性别: <input type="radio"name="sex">男 ${test}
                            <input type="radio"name="sex">女 
                        </div>`

                        $("body").append($(str))
            })
        })
    </script>

Aarry.of

<script>
        //var arr = new Array(4)
        //console.log(arr);
        var arr  = Array.of('z','gh')
        console.log(arr);
    </script>

find

<script>
        let arr2=[11,13,15,16,17,19];
        let res3 = arr2.find((n)=>{
            return n<15
        });
        console.log(res3);//结果:16


        /*
        Array.from()
        Array.of()
        find()
        includes
        */

        let arr=[11,13,15,16,17,19,NaN];
        console.log(arr.includes('19'));//false

    </script>

数组复习:

 <script>
        //1.数组的定义
        //a.通过[]方式定义,有人称之为字面量定义法
            var arr = ['张三',18,true]
        //b.通过naw关键字定义
            var arr1 = new Array(3)

        //2.单个数组元素的访问  数组名称[索引]
            arr[0]
            //获取到arr数组中 true
            arr[2]
        //3.数组元素的修改
            arr[2] = false
            arr[3] = 'hebel'
            console.log(arr);
        //4.数组元素的遍历
            for(var i = 0;i<arr.length;i++){
                arr[i]=arr[i]+1
            }
            console.log(arr); //false是1
    </script>

数组遍历扩展:

<script>
        //数组遍历
        let arr=[11,13,1,156,17,19];
        //keys()
        for(let indx of arr.keys()){
            console.log(index);
        }
        //values()
        for(let ele of arr.values()){
            console.log(ele);
        }
        //entries()
        for(let[key,ele] of arr.entries()){
            console.log(ele+"==="+key);
        }
 </script>

数组扩展1:

 <script>
      var num = [25,12,31,14,20]
      var max = num[0]
      //输出两边最大值
      for(var i =0;i<num.length;i++){
        if(max<num[i]){
          max = num[i]
        }
      }
      console.log(max);
      //假如想移除数组中的最后一个元素
      //num.splice(4,1)
      num.pop()
    </script>

数组扩展2:

 <script>
      //1.Array.from()
      let arrayLike = {
          '0':'a',
          '1':'b',
          '2':'c',
          length:3 //对象需要有length属性
      };
      //var res = arrayLike.pop()
      var arr = Array.from(arrayLike)
      console.log(arr);
      //将arguments转换为数组
      function demo(){
          console.log(arguments);
          var res = Array.from(arguments);
          console.log(res);
      }
      demo('zhangsan',20,'男')
    </script>

随机点名器

 <div id="box">随机点名</div>
  <span id="span">开始</span>
    <style>
        #box {
          width: 30%;
          height: 200px;
          background-color: rgb(146, 205, 245);
          border: 1px solid rgb(31, 18, 216);
          font-size: 30px;
          font-weight: 300;
          font-family: Arial, Helvetica, sans-serif;
          line-height: 200px;
          text-align: center;
          /* border-radius: 10px; //角度更改10px数,直角去掉这个   */
          margin: 25px auto;
        }
        span {
          display: block;
          width: 30%;
          height: 44px;
          line-height: 44px;
          background-color: rgb(91, 4, 190);
          /* border-radius: 10px; //角度更改10px数,直角去掉这个    */
          color: #fff;
          text-align: center;
          margin: 0 auto;
          font-size: 18px;
          font-family: 华文细黑;
        }
        span:hover {
          background-color: rgb(91, 4, 190);
        }
      </style>
    <script>
        var arr = ["西施", "马超", "曜", "蔡文姬", "小乔","云中君", "瑶",  "高渐离", "刘禅", "庄周","赵云", "廉颇"
        ]
        var box = document.getElementById("box");
        var span = document.getElementById("span");//获取元素
        var state = 0;//定义状态,开始和结束
        var t;
        span.onclick = function () {
          if (state == 0) {
            //如果是0即开始随机,变为1时结束,不是0时执行else
            clearInterval(t);
            t = setInterval(function () {
              // console.log(1);
              var sj = Math.round(Math.random() * (arr.length - 1));
              console.log(arr[sj]);
              box.innerHTML = arr[sj];
            }, 3)
            span.innerHTML = "结束"//更改按钮的内容
            state=1;
          }else{
            state=0;
            clearInterval(t);
            span.innerHTML = "开始"
          }
        }
      </script>

类的定义:

<script>
        /*
        ES6中通过class关键字来定义一个类
        语法:class 类名{

        }
        */

        //定义类
        class Person{
            //通过构造方法实现属性的定义,在实例化类的时候传入值
            constructor(name,age,sex){
               this.pname = name
               this.page = age
               this.psex  = sex  
            }
            //定义了一个say方法
            say(){
                //console.log("正在说话....");
                console.log("我的名字叫:"+this.pname);
            }
            study(){
                console.log("正在学习....");
            }
        }
        //实例化类,产生一个对象 使用new关键字
        //new Person()
        let p = new Person()
        console.log(p);
        //类中方法的调用  对象名.方法名()
        p.say()
        //调用一下 study方法  
        p.study()
        //实例化类 (类可通过多个对象,多个实例化)
        let p1 = new parent('王小平',0,'男')
        //访问类中的属性 语法:对象名.属性名
        console.log(p1.pname);
        p1.say()
    </script>

类的继承1:

 <script>
        //定义类
        class Person{
            //定义了一个say方法
            say(){
                //console.log("正在说话....");
                console.log("我的名字叫:XXX");
            }
            study(){
                console.log("正在学习....");
            }
        }
        //继承关键字 extends
        //定义一个男人类
        class Man extends Person{  //(Man继承Person的类)
        //重写父类中的方法
        }
        //实例化Man这个类
        let man1 = new Man()
        man1.study()
    </script>

类的继承2:

  <script>
        //定义类
        class Person{
            //通过构造方法实现属性的定义,在实例化类的时候传入值
            constructor(name,age,sex){
               this.pname = name
               this.page = age
               this.psex  = sex  
            }
            //定义了一个say方法
            say(){
                //console.log("正在说话....");
                console.log("我的名字叫:XXX");
            }
            study(){
                console.log("正在学习....");
            }
        }
        //继承关键字 extends
        //定义一个男人类
        class Man extends Person{  //(Man继承Person的类)
        //重写父类中的方法
        }
        //实例化Man这个类
        let man1 = new Man("网名",12,'男')//(继承constructor(name,age,sex)里内容)
        console.log(man1);
        man1.study()
        console.log(man1.pname)
    </script>

面向对象概念:

PHP是一个后门端的脚本语言

MySQL是一个关系型数据库  SQLServer  Oracle  Access

面向对象 是大多数编程语言中都有的一个概念

面向对象: Object  Oriented  简写:OO

面向对象编程: Object  Oriented Programing  简写:OOP

对象: 万物皆对象,在描述对象的过程中需要加上量词 一张桌子  一把椅子

类: 

将具有相同或者相似属性或者功能的事物,抽象出来成为一类

类里面包含属性和方法

        

类和对象之间的关系:

类是对象抽象出来的结果,对象是类实例化后的产物(结果)

重写父类中的方法:

<script>
        //定义类
        class Person{
            //通过构造方法实现属性的定义,在实例化类的时候传入值
            constructor(name,age,sex){
               this.pname = name
               this.page = age
               this.psex  = sex  
            }
            //定义了一个say方法
            say(){
                //console.log("正在说话....");
                console.log("我的名字叫:XXX");
            }
            study(){
                console.log("正在学习....");
            }
        }
        //继承关键字 extends
        //定义一个男人类
        class Man extends Person{  //(Man继承Person的类)
        //重写父类中的方法
            study(){
               alert('12345')
            }
        }
        //实例化Man这个类
        let man1 = new Man("网名",12,'男')//(继承constructor(name,age,sex)里内容)
        console.log(man1);
        man1.study()
        console.log(man1.pname)
    </script>

promise 常用的API

<script>
        /*
        P.then()得到异步任务的正确结果
        P.catch()获取异常结果
        P.finally()成功与否都会执行(并且不是正式标准)
        */
        function queryData(){
            return new Promise(function(resolve,rej){
                setTimeout(function(){
                    //resolve(123);
                    reject('error');
                },100);
            })
        }
        foo()
        .then(function(data){
            console.log(data)
        })
            .catch(function(data){
            console.log(data)
        })
            .finally(function(){
            console.log('finished')
        });
        //可以把两个函数传递给then,也可以then接受一个函数,另外一个通过catch来处理。catch的作用就是专门用来处理异常信息的。
    </script>

ajax

<script>
    /* 
    $({
      ur1:'',
        type:'',
        data:'',
        dataType:'',
        success:function(){
            //ajax成功以后的回调函数
            $ajax({
            })
        }
    })
    */


    /*
    promise(备用)  是一个对象,从它可以获得异步操作
    javaScript  原生的ajax方法  不适合进行项目开发 适合帮助我们理解ajax的
    jQuery   jaax方法  $.ajxa({})
    ES6  promise
    */

    </script>

基本 promise 用法:

  <script>
    /*
    promise(备用)  是一个对象,从它可以获得异步操作
    javaScript  原生的ajax方法  不适合进行项目开发 适合帮助我们理解ajax的
    jQuery   jaax方法  $.ajxa({})
    ES6  promise
    */

    //promise使用好处:1.可以避免多层异步调用嵌套问题;

    //基本用法:
    //1.实训化promise对象 构造函数中传递函数 该函数中用于处理异步任务
    //2.resolve和rejec两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果

    var p = new Promise(function(resolve,rejec){
        setTimeout(function(){
        var fiag = true;
        if (fiag) {
            //正常情况
            resolve('hello');
        }else{
            //异常情况
            reject('出错了');
        }
        },100);
    })
    P.then(function(data){
        //从resolve得到正常结果
        console.log(data)
    },function(info){
        //从reject得到错误结果
        console.log(info)
    });

    </script>

普通对象和函数对象区别:

  <script>
        //定义函数
        function f1(){} 
        let f2 = new Function()//构造函数完成创建
        let f3 = function(){}//匿名函数
        //定义对象
        let o1 = {};
        let o2 = new Object();
        let o3 = f1();
        //函数对象  函数对象基本都是由new function()构造而来
        console.log(typeof Object);//function
        console.log(typeof Function);//function
        console.log(typeof f1)//function
        console.log(typeof f2)//function
        console.log(typeof f3)//function
        //Object对象(普通对象)
        console.log(typeof o1)//object
        console.log(typeof o2)//object
        console.log(typeof o3)//object
       
    </script>

原生的 Ajax

<script>
        //1.基于promise处理Ajax请求
        var xhr = new XMLHttpRequest () ;
        xhr.onreadystatechange = function(){
            if (xhr.readyState !=4)return;
            if (xhr.readyState ==4 && xhr.status == 200){
                //处理正常情况
                console.log(xhr.responseText);
            }else{
                //处理异常情况
                console.log('出错了');
            }
        }
        xhr.open('get',ur1);
        xhr.send(null);

       

        //2.发送多个ajax请求
        //发送多个ajax请求并且保证顺序
        queryData('htta://locaThost:3000//data')
        .then(function(dsta){
            console.log(data);
            return queryData('htta://locaThost:1000//data');
        })
            .then(function(data){
            console.log(data)
        });
        //注意:return的是一个新的promise实例对象,下一个then调用名就是上面return出来的promise对象,并且then当中的函数参数data用于接收上一个异步任务的处理结果。
    </script>

原型和原型链:

 <script>
        //原型
        //在JavaScript中,原型也是一个对象,原型的作用,则是实现对象的继承
        //在js的所有函数对象中,都存在一个属性prototype,该属性对应当前对象的原型


        function f1(a){}
        let f2 = new Function()//构造函数完成创建
        let f3 = function(){}//匿名函数
    let obj = {
        xm:'zhangsan',
        age:18
    }
        //console.log(f1.prototype);
        console.log(obj);

        
        //原型链:
        //除开Object的prototype的原型是null以外,所有的对象和原型都有自己的原型,对象的原型指向原型对象	
        //在已层级多的关系中,多个原型层层相连则构成了原型链	
    	//在查找一个对象的属性时,倘若在当前对象找不到该属性,则会泪着原型链一直往上查找,知道找到为止,如果到了原型链顶端,还没找到,则遇回undefined
        /*
        访问一个对象的属性时,
        先在自身属性中查找,找到返回
        如果没有,再沿着_proto这条链向上查找,找到反回,如果最终没找到返回undefined
        别名:隐式原型链	
        作用:查找对象的属性(方法)
        */
    </script>

模块导入:

 <script type="module">
        //import导入  export导出

        //1.单个变量的导入 (在Wampserver64中打开)
        import{name,age}from".profile,js"
        //2.default 导入
        import date from".profile,js"
        console.log(name);

        /*
        模块开发时注意的问题:
        a.必须基于服务器环境下边运行
        b.导出的时候如果使用了default名称,导入的时候不能加{},import后变量名自定义
        c.导出的时候如果未使用default名称,导出的时候加{变量名}变量名与导出时的变量名保持一致
        d.每个模板块导出的时候只能包含一个default名称
        */
       
  </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值