JavaScript

输出

控制台

console.log("输出！log");

弹出

alert("输出！al");

dom

document.write("你好！wr");

数据类型

number、null、undefied、boolean、string、object

引用类型：array、function

示例

var a=90;
    var b=3.24;
    var c;
    var h="你好";
    var jk=true;
    var ju=null;
    var f=new Date();
    var hj=[1,2,3,4,5];
    var jk=new Array(7).fill(0);
    var lk=function(){
        console.log("nh1");
    }
    // typeof() 查看类型
    //数据类型：null number object boolean undefied  string 
    console.log(typeof(a));//number
    console.log(typeof(b));//number
    console.log(typeof(c));//undefied
    console.log(typeof(h));//string
    console.log(typeof(jk));//boolean
    console.log(typeof(ju));//object
    console.log(typeof(f));//object
    console.log(typeof(hj));//object
    console.log(typeof(lk));//function

    //isNaN:不是一个数 false是数字 ture不是数字 能自动转换
    console.log(isNaN('90'))

数组

定义数组

//定义数组
var sz=["张三","李四","王五","芙蓉"];

数组长度

//数组的长度
console.log(sz.length);

for遍历

//遍历数组
    for(let i=0;i<sz.length;i++){
        // console.log(sz[i]);
    }

for of遍历

// for of循环 i就是值
for(let i of sz){
    console.log(i);
}

for in遍历

//for in循环的i是小标
    for(let i in sz){
        console.log("下标："+i+" 值："+sz[i]);
    }

定义对象

//定义对象
let cf={
    "name":"张三",
    "age":19,
    "address":"湖南长沙"
}

遍历对象

//在循环遍历对象时 i是key
    for(let i in cf){
        console.log(i);
        console.log(cf[i]);
    }

常用方法
push尾部放

var cy=["夯实","立即","嗷","南京","客户"]
console.log(cy.toString());
cy.push("秸黑");//尾部增加

pop尾部弹出

cy.pop();//尾部出来

unshift头部放

cy.unshift("解黑");//

shift头部弹

cy.shift();

splice增加删除元素

index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

//splice("下标","个数","可选增加 可以多个") 增加和删除 返回被删除的元素
cy.splice(2,1);//删除一个
cy.splice(2,0,"滑块","lohan")//增加2个元素
console.log(cy);

合并

//数组合并
cy.concat(值);

排序

cy.sort()

连接

//join() //连接成，的字符串    join("值") 值：符号不是，变成#
var lj=cy.join();
console.log(lj);

字符串拆成数组

//split("分隔的符合")
var t="上市,里啊";
var lk=t.split(",")//字符串变成数组
console.log(lk);

Dom

通过ID获取

//通过ID获取
var cf = document.getElementById("dt");
//修改内容
cf.innerText = "冬天到了！春天还会远嘛！";

通过标签获取

//通过标签获取
var cl = document.getElementsByTagName("h1");
//获取改
for (let i = 0; i < cl.length; i++) {
    cl[i].innerText = "冬天到了第" + (i + 1) + "年";
}

通过class获取

 //通过class获取
var cln=document.getElementsByClassName("cf1");
console.log(cln);

通过Name获取

//name属性
var nj=document.getElementsByName("c1");
for(let i in nj){
    nj[i].innerText="Name属性获取";
}

获取一个

//获取一个 可以是标签名 类名 ID名..  h1 || #.. || ...
var jk=document.querySelector("h1")
console.log(jk);

获取多个

//获取多个 可以是标签名 类名 ID名.. h1 || #.. || ...
var jkal=document.querySelectorAll("h1");
for(let i in jkal){
     jkal[i].innerText="第"+(i)+"年！";
}

//querySelectorAll 通过name获取 name=c1
var jkna=document.querySelectorAll("[name=c1]");
console.log(jkna);

操作元素

改内容

 //可识别标签
hj.innerHTML="<a href='#'>hello</a>";
//不可认识标签
hj.innerText="<a href='#'>hello</a>";

修改属性

var kj=document.querySelector("img");
//src是原生属性 可以直接点
kj.src="31.jpg";
//自定义属性不可以直接点出setAttribute 
kj.setAttribute("price","8888");

设置样式

var t2=document.querySelector("#t2");
//有-的样式不能直接写 
// t2.style.backgroundColor="red";
// t2.style.color="pink";
// t2.style.border='2px dashed red';
// t2.setAttribute("class","uo");

事件绑定

dom直接绑定

<button onclick="dme()">dom直接绑定 点我</button>

    //不推荐
     function dme(){
         console.log("哇！金色传说！");
     }

JS绑定

<button id="bt1">JS绑定 点我</button>

//JS绑定
     var cf=document.querySelector("#bt1");
     cf.onclick=function(){
         console.log("JS绑定！");
     }
    
     //覆盖之前的 鼠标移除
     cf.onmouseout=function(){
         console.log("鼠标移出!")
     }

事件监听绑定

<button id="bt2">JS监听器 点我</button>

//事件监听 两个多会输出
     var bt2=document.querySelector("#bt2");
     bt2.addEventListener("click",function(){
         console.log("事件监听！");
     })
     bt2.addEventListener("click",function(){
         console.log("事件监听2！");
     })

删除监听事件

removeEventListener("事件名"，方法名)

需要删除监听事件的方法需要提出； 如果是匿名函数则 事件=null;

//删除监听事件
     var bt3=document.querySelector("#bt3");
     bt3.onclick=function(){
         console.log("删除！");
         bt2.removeEventListener("click",dj);
         //移除按钮bt1
         cf.onclick=null;
     }

留言板

<h1>留言板</h1>
    <input type="text" />&nbsp;&nbsp;<button>添加</button>
<hr />

  <script>
    var bt = document.querySelector("button");
    bt.onclick = function () {
      var vau = document.querySelector("input").value;
      if (vau == "") {
        alert("请输入内容！");
      } else {
        var p = document.createElement("p");
        var sp = document.createElement("span");
        sp.innerText = vau;
        var bton = document.createElement("button");
        bton.innerText = "删除";
        p.appendChild(sp);
        p.appendChild(bton);
        document.querySelector("body").appendChild(p);
        document.querySelector("input").value = "";
        bton.addEventListener("click", function () {
        //本身元素的父元素
          this.parentNode.parentNode.removeChild(this.parentNode);
        });
      }
    };
  </script>

事件冒泡

冒泡

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    
var ul=document.querySelector("ul");
    ul.onclick=function(){
        //停止冒泡
        event.stopPropagation();
        var cf=event.srcElement;
    }

停止冒泡

event.stopPropagation();

阻止事件的默认行为

event.preventDefault();

<a href="https://baidu.com" onclick="cg()">去百度</a>

让a标签不会跳转 只会执行单击事件

function cg(){
       event.preventDefault();
        alert("1");
    }

计算器

.js {
        display: flex;
        width: 360px;
        flex-wrap: wrap;
        padding-left: 0px;
        margin-top: 0px;
      }
      .js li {
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: #717c83;
        font-size: 20px;
        font-weight: bold;
        color: white;
        margin-top: 0px;
      }
      .xs {
        width: 338px;
        height: 100px;
        border: 1px solid #717c83;
        margin-left: 10px;
        margin-top: 10px;
        line-height: 100px;
        font-size: 40px;
        font-weight: bold;
        text-align: right;
        background-color: #3a4b5a;
        color: white;
      }
      .dxs {
        margin-left: 70px;
        border: 1px solid black;
        width: 360px;
        height: 570px;
        background-color: pink;
      }

<div class="dxs">
      <div class="xs"></div>
      <ul class="js">
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>0</li>
        <li>AC</li>
      </ul>
    </div>
    

var ula = document.querySelector(".js");
    ula.onclick = function () {
      event.stopPropagation();
      var fj = event.srcElement;
      var jk = fj.innerText;
      if (jk == "AC") {
        document.querySelector(".xs").innerText = "";
      } else {
        var xv = document.querySelector(".xs").innerText;
        document.querySelector(".xs").innerText = xv + jk;
      }
    };

值类型和引用类型

值类型不可以加属性

引用类型对象类型可以添加属性

//值 不可以加属性
   var cf = "abscd";

   //引用 可以加属性
   var xz=new String("xyh");
   xz.price=800;
   console.log(xz.price);
   
   function newfa(){
       return "新的字符串！";
   }

   function func(t) {
     t.toString= newfa;
   }
   func(cf);
   func(xz);
   alert(xz);

逻辑

|| 有不为空就是第一个   如果有空则取空
&& 不为空就是最后一个   如果有空则就是空

等于（==）和全等于（===）

//==是判断值是否相同
//===是判断值和类型是否相同 判断引用类型地址

var cf="adb";
var hj="fjg"
var o1=new String("abc");
var o2=new String("abc");

//==是判断值是否相同
//===是判断值和类型是否相同 判断引用类型地址
console.log(o1===o2);

运算优先级

//运算级优先 void比+优先级更高  ，运算符是从左到右
   var i=100;
   //1、先算i+20=120;
   //2、再算120*2=240
   alert((i+=20,i*=2,'value:'+i));

with

//with可以指定缺省对象
    var obj=new Object();
    obj.name="temo";
    obj.age=19;
    obj.hi=function(){
        alert("nnj");
    }
    with(obj){
        name="尼玛";
        age=90;
        hi();
    }
    console.log(obj);

二维数组生成表格

var a=[
        [1,2,3,4],
        [5,6,7,8],
        [9,10,11,12]
    ]
    //循环生成3*4的表格
    var tab=document.createElement("table");
    tab.border="1px";
    tab.width="50%"
    tab.cellSpacing="0px";
    tab.style.height="300px";
    tab.style.textAlign="center"
    for(let i=0;i<a.length;i++){
        var tr=tab.insertRow(tab.rows.length);
        for(let j=0;j<a[i].length;j++){
            var td=tr.insertCell(tr.cells.length);
            td.innerText=a[i][j];
        }
    }
    document.body.appendChild(tab);

二维数组切换下拉框城市

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select id="omit">
      <option>选择省份</option>
    </select>
    <select id="city"></select>
  </body>
  <script>
    var prov = [
      ["湖南省", "长沙", "湘潭", "株洲", "岳阳"],
      ["江西省", "赣州", "南昌", "宜春", "吉安"],
      ["广东省", "广州", "白云", "花都", "增城", "越秀"],
    ];

    var cf = document.querySelector("#omit");
    var ci = document.querySelector("#city");

    window.onload = function () {
    
        //循环添加省
      for (let i = 0; i < prov.length; i++) {
        var moits = new Option(prov[i][0], prov[i][0]);
        for (let j = 0; j < prov[i].length; j++) {
          cf.appendChild(moits);

          //省改变 添加市
          cf.onchange = function () {
            ci.innerHTML = "";
            for (let i = 0; i < prov.length; i++) {
              for (let j = 1; j < prov[i].length; j++) {
                if (cf.value == prov[i][0]) {
                  var citys = new Option(prov[i][j], prov[i][j]);
                  ci.appendChild(citys);
                }
              }
            }
          };
        }
      }
    };
  </script>
</html>

前端路由

//onhashchange() 事件 a标签点击改变后
//location.hash 获取点击a标签后的href
window.onhashchange=function(){
    console.log(location.hash);
}

把字符串变成JS变量

eval(值)

函数

事件调用

<button onclick="fun()">测试函数</button>
//事件调用
    function fun() {
      console.log(this); //this==>window
      alert("函数！");
    }

直接调用

fun()

变量调用

//变量=函数 不能放在上面调用
    var cf = function () {
      alert("变量函数！");
    };
    cf();

newFunction调用

//newfunction
    var funws = new Function(alert("newFunction"));

对象调用

//对象里面的函数 调用
    var stu = {
      age: 19,
      studag: function () {
        this.age += 10;
        alert("大家看inn达克尼斯看看n");
      },
    };
    stu.studag(); //alert
    alert(stu.age); //29
    

//函数对象  如果函数是一个类 名字大写
    function Heros(name) {
      this.name = name;
      this.sayhi = function () {
        alert("Me:" + this.name);
      };
    }
    //函数对象的调用
    var cf = new Heros("张三！");
    cf.sayhi();
    

function Printer(name) {
      this.name = name;
      this.print= function () {
          var i=1;
          var xh=setInterval(function(){
              if(i==10){
                  clearInterval(xh);
              }
              console.log("Name:"+name);
              i++;
          },3000);
      };
    }

    var pr1=new Printer("惠普");
    pr1.print();
    

/**
     * 4、创建一个猫Cat对象，包含一个体重weight属性和吃饭eat的方法，
     * 每调用一次eat方法，体重就加1，调用3次eat方法后，在控制台打印出猫的体重。
       5、创建一个Car对象，包含一个花费属性cost和run方法，
       run方法中包含一个参数公里数kl，每跑1公里，花费就增加0.8元，
       调用run方法后，打印出花费。
     **/

     function Cat(){
         this.wigth=20;
         this.eat=function(){
             for(let i=0;i<3;i++){
                 this.wigth+=1;
             }
             console.log(this.wigth);
         }
     }

     var catr=new Cat();
     catr.eat();
     

function Car(){
         this.cost;
         this.runn=function(kl){
            this.cost=kl*0.8;
            console.log(this.cost);
         }
     }

     var Cars=new Car();
     Cars.runn(10);

JS传参数

普通传

function cf(a,b,c){
    console.log(a,b,c);
}

//不传参数 就是undefind  
cf(2,5,7);

参数是函数

function kj(name){
        console.log("Name:"+name);
    }
    function nj(fun,msg){
        fun(msg);
    }
    nj(kj,"temo");

改变返回值类型

function kl(t){
        if(t==true){
            return "hello word";
        }else{
            return {"name":"李四"}
        }
    }

    var cg=kl(false);
    console.log(cg);

返回值返回函数

function km(t){
        return kl(t);
    }
    var hj=km(false);
    console.log(hj);

    function vj(){
        return function(a,b){
            console.log(a+b);
        }
    }
    var kj=vj();
    kj(2,4);

通过返回值找出最大的值

let a=[90,20,10,191];
function find(){
    var cj={"max":0,"index":0}
    for(let h in a){
        if(a[h]>cj.max){
            cj.max=a[h];
            cj.index=h;
        }
    }
    return cj;
}
var p0=find();
console.log(p0);

返回传入的值集合arguments

//传入值计算总和
    function jz() {
      var num = 0;
      for (var n = 0; n < arguments.length; n++) {
        num += arguments[n];
      }
      return num;
    }
    alert(jz(1, 2, 3));

修改原型

对象修改原型

//对象修改原型
    var proper=function(name){
        this.name=name;
    }
    //修改原型 添加新的方法 
    proper.prototype.seihi=function(){
        console.log("goods");
    }
    var temo=new proper("temo");
    temo.seihi();

string修改原型

//String类型修改原型
var t=new String(" hello ");
String.prototype.mytrim=function(){
    //去掉空格
   var jk=t.replaceAll(' ','');
   console.log(jk.length);
}
t.mytrim();

函数递归

示例1

//函数里面自己调自己就是递归
    function comp(n){
        if(n==1){
            return 1;
        }else{
            return comp(n-1)+n;
        }
    }
    console.log(comp(5));

示例25阶层

//5的阶层
    function jc(n){
        if(n==1){
            return 1;
        }else{
            return jc(n-1)*n;
        }
    }
    console.log(jc(5))

示例3斐波拉契数列

//5=f(4)+f(3)
    //1，1，2，3，5，8，13.....
    function fb(n){
        if(n==1){
            return 1;
        }else if(n==0){
            return 0;
        }else{
            return fb(n-1)+fb(n-2)
        }
    }
    console.log(fb(46));

闭包

示例1

function hello(name){
            let city="广州";
            return {
                gets:function(){
                    var age=18;
                    //内部可以使用外部的资源
                    alert("ME："+city+name);
                    console.log(age);
                }
            }
        }
        //调用
        var hj=hello("temo");
        hj.gets();

示例2

//不会回收
        function count(nmme){
            var x=1;
            return function(){
                x++;
                console.log("name:"+x);
            }
        }
        var col=count("temo");
        col();
        col();

示例3

//循环给按钮绑定事件复制
        var help=function(x){
            return function(){
                alert(x);
                return x;
            }
        }
        var btns=document.querySelectorAll("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=help(i);
        }

示例4封装

//闭包的封装
        var Person=function (){
            var name=name;
            return{
                getName:function(){
                    return name;
                },
                setName:function(Name){
                    return name=Name;
                }
            }
        }
        //直接访问不了 变量访问不了 封装getset才能访问
        var pers=new Person("fawcke");
        pers.setName("重复");
        console.log(pers.getName())

原型机制

//constructor构造方法  //指向类本身
      //每个对象都有constructor
      //prototype 修改原型
      //constructor 在prototype下面 得到它对象的原型 
      //__proto__ 代替prototype and constructor

三种对象创建方式

//三种对象创建方式
    var o1 = {};//json
    var o2 = new Object();
    var o3 = new Heros();
    function Heros() {}
    console.log(typeof o1);//obj
    console.log(typeof o2);//obj
    console.log(typeof o3);//obj

三种函数创建

//函数三种创建  f1可以在前面调用 f2不可以在前面调用 需要创建后才能调用
    function f1() {}
    var f2 = function () {};
    var f3 = new Function("alert(1)");
    console.log(typeof f1);//function
    console.log(typeof f2);//function
    console.log(typeof f3);//function

//constructor构造方法  //指向类本身
function Student(name, age) {
  this.name = name;
  this.age = age;
  this.hi = function () {
    alert("我叫" + this.name + " 我的年龄是" + this.age);
  };
}

var st1 = new Student("张胜男", 19);
var st2 = new Student("黑马", 20);

console.log(Student.prototype.constructor==Student);
console.log(st1.constructor == Student); //true
console.log(st2.constructor == Student); //true
console.log("s1_prop_:"+st1.__proto__);
console.log(st1 == st2); //比的对象不相等
console.log(Student.prototype); //指向类的原型对象 prototype类可以用

//由原型对象 给类动态添加属性和方法

//添加属性
Student.prototype.classname = "默认班";
console.log(st1.classname);

//添加方法
Student.prototype.playgame = function () {
  console.log("喜欢打game!");
};
st2.playgame();

//constructor 对象可以用 
console.log(o1.constructor);

JSONP

JSONP(JSON with Padding)是	[JSON](https://baike.baidu.com/item/JSON)	的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

什么情况出现跨域

1. 协议不同
2. 端口不同
3. IP地址不同
4. 项目名称不同

第一版本

前台直接调用服务器链接地址
<!--服务器不拦截标签-->
<!-- <script src="http://localhost:8090/heros/server.js"></script> -->

后台
新建一个server.js的文件里面写 alert("today is 2021 !")

第二版本

前台

function locatfn2(data){
            alert(data.msg);
        }

        function ycdata(data){
            console.log("远程数据："+data.msg);
        }



<!--用控制器或者servlet代替JS-->
<!-- <script src="http://localhost:8090/heros/callback/locatfn"></script> -->

后台
package com.example.packproject.controller;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
/**
 * @Author: 羡羡
 * @Date: 2021/12/27/09:38
 */
@RestController
public class JsonpController {
    @RequestMapping(path = "/callback/{requestname}",method = RequestMethod.GET)
    public String cf(@PathVariable("requestname") String requestname) throws JsonProcessingException {
        System.out.println("JSON请求！");
        return requestname+("{'msg':"你好"}")
    }
}

第三版本

//第三版本 动态创建srcipt 最终版本
        function createscript(url,method){
            var script=document.createElement("script");
            script.src=url+method;
            document.querySelector("head").appendChild(script);
        }

        var url="http://localhost:8090/heros/callback/";
        createscript(url,"locatfn");
        
后台和第二版本一致

第四版本

前台

//第三版本 动态创建srcipt 最终版本
        function createscript(url,method){
            var script=document.createElement("script");
            script.src=url+method;
            document.querySelector("head").appendChild(script);
        }
        
//第四版本灵活获取
        function locatfn(data){
            alert(data);
        }
        var url="http://localhost:8090/heros/callback/";
        createscript(url,"locatfn");
  
后台
package com.example.packproject.controller;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
/**
 * @Author: 羡羡
 * @Date: 2021/12/27/09:38
 */
@RestController
public class JsonpController {
    @RequestMapping(path = "/callback/{requestname}",method = RequestMethod.GET)
    public String cf(@PathVariable("requestname") String requestname) throws JsonProcessingException {
        System.out.println("JSON请求！");
        List lin=new ArrayList();
        lin.add("张三");
        lin.add("李四");
        lin.add("王五");
        //转换成JSON
        ObjectMapper obj=new ObjectMapper();
        String json=obj.writeValueAsString(lin);
        return requestname+"("+json+")";
    }
}
      

使用jquery调用

//需要导入jquery

前台：

var url = "http://localhost:8090/heros/sheng";
      $(function () {
        $.ajax({
          url: url,
          async: false,
          dataType: "jsonp",
          success: function (da) {
            var se = document.querySelector("select");
            for (var i = 0; i < da.length; i++) {
              var cf = new Option(da[i], da[i]);
              se.appendChild(cf);
            }
          },
        });
      });
      
后台：
/**
 * 省份
 * @param callback
 * @return
 * @throws JsonProcessingException
 */
@GetMapping("/sheng")
public String unall(String callback) throws JsonProcessingException {
    System.out.println("省请求");
    List lis=usdao.seall();
    List prall=new ArrayList();
    for(int i=0;i<lis.size();i++) {
        University un= (University) lis.get(i);
        String priv=un.getProvince();
        prall.add(priv);
    }
    ObjectMapper obj=new ObjectMapper();
    String json=obj.writeValueAsString(prall);
    return callback+"("+json+")";
}

示例2

前台：
function hqs() {
        var hj=document.querySelector("table");
        if(hj!=null){
            document.body.removeChild(hj);
        }
        var indexval = document.querySelector("select").value;
        console.log(indexval);
        var url = "http://localhost:8090/heros/searchun?unname=" + indexval;
        $.ajax({
          url: url,
          async: false,
          dataType: "jsonp",
          success: function (da) {
              var table=document.createElement("table");
              
              table.border="1px";
              table.cellSpacing="0px";
              table.width="500px";
              table.style.textAlign="center"
              var trn=document.createElement("tr");
              var wtd1=document.createElement("td");
              wtd1.innerText="学校名称";
              var wtd2=document.createElement("td");
              wtd2.innerText="学校排行";
              var wtd3=document.createElement("td");
              wtd3.innerText="学校地址";
              trn.appendChild(wtd1);
              trn.appendChild(wtd2);
              trn.appendChild(wtd3);
              table.appendChild(trn);
              for(var i=0;i<da.length;i++){
                  var tr=document.createElement("tr");
                  var td=document.createElement("td");
                  td.innerText=da[i].schoolName;
                  var td2=document.createElement("td");
                  td2.innerText=da[i].ranking;
                  var td3=document.createElement("td");
                  td3.innerText=da[i].province;
                  tr.appendChild(td);
                  tr.appendChild(td2);
                  tr.appendChild(td3);
                  table.appendChild(tr);
              }
              document.body.appendChild(table);
          },
        });
      }
      
后台：
@GetMapping("/searchun")
public String serach(String callback,String unname) throws JsonProcessingException {
    System.out.println("学校："+unname);
    System.out.println("查询学校！");
    List lis=usdao.xzs(unname);
    System.out.println(lis);
    ObjectMapper obj=new ObjectMapper();
    String json=obj.writeValueAsString(lis);
    return callback+"("+json+")";
}

JSOOP高级特征

对象本质可以理解为属性的集合,对象的属性包括数据属性和访问器属性

数据属性

它包含的是一个数据值的位置,可以对数据值进行读写

数据属性四大特征

1、value值
2、writable表示是否可写,默认true,如果为false,则表示当前属性只读不可修改
3、enumerable表示是否可枚举,默认true如果为false,则在for...in中不会被遍历
4、configurable表示是否为可配置的,默认true,如果为false,则不能删除,而且不能再改回true

访问器属性

这个属性不包含数据值的位置(get,set)

访问器属性:访问器属性时专门保护数据属性的特殊属性（getting setting）
    1、get方法负责读取变量的值 取值时会调用get方法
    2、set方法负责修改变量的值 设置值会调用set方法
    新建定义属性：Object.defineProperty(对象,"属性名（随便命名）",{
        get:function(){
            console.log("查询钱！");
            return "余额："+this.money;
        },
        set:function(value){
            console.log("给stu赋值");
            this.money+=value;
        }
    })

//访问器属性
var stu={
    "id":1,
    "name":'temo',
    "money":800
}
Object.defineProperty(stu,"ccb",{
    get:function(){
        console.log("查询钱！");
        return "余额："+this.money;
    },
    set:function(value){
        console.log("给stu赋值");
        this.money+=value;
    }
})

//set赋值
stu.ccb=500;
//get取值
console.log(stu.ccb)

得到属性描述

得到属性描述：Object.getOwnPropertyDescriptor(对象,"属性名")

var o1={};
        //name 、age都是属性值
        o1.name="temo";
        o1.age=18;
        o1.study=function(){
            alert("hello!");
        }
        //得到属性描述 
        var oname=Object.getOwnPropertyDescriptor(o1,"name");
        console.log(oname);
        var oage=Object.getOwnPropertyDescriptor(o1,"age");
        console.log(oage);

对象输出

//对象的属性输出
        console.log(o1.name);
        console.log(o1['name']);

        //循环输出
        for(var td in o1){
            console.log(o1[td]);
        }

修改属性状态（writable、enumerable、configurable）

修改对象是否可读枚举可配置：Object.defineProperty(对象,"属性名",{
        //不可修改
        writable:false,
        //不可枚举
        enumerable:false,
        //不可配置 不能删除修改
        configurable:false
    })

var o1={};
       //name 、age都是属性值
       o1.name="temo";
       o1.age=18;
       o1.study=function(){
           alert("hello!");
       }
       //不可修改 不可枚举
       Object.defineProperty(o1,"name",{
           //不可修改
           writable:false,
           //不可枚举
           enumerable:false,
           //不可配置 不能删除修改
           configurable:false
       })

严格模式

'use strict':严格模式 
        1、with不能使用
        2、未声明的变量不能使用
        3、this默认是undefined不是windows 非严格模式下对象的本身是本身
        4、只读变量修改报错
        5、函数的行参不可以同名
        6、不能使用arguments的属性 callee：函数本身 caller:指向调用者

示例

<pre>
    以下作业在严格模式下完成：
    1、创建一个猫对象,通过defineProperty给它定义name数据属性，值为大黄，不可修改，可枚举可配置，
    color数据属性，值为黄色，可修改可枚举可配置，weight访问器属性，可枚举可配置。
    2、创建一个学生stu对象，通过defineProperty定义一个score访问器属性，当运行stu.score = 5;
    时打印出'成绩进步了5分'，当运行var s = stu.score;时打印出‘成绩是95分’
    3、创建一个car对象，通过defineProperty定义一个price访问器属性，当运行car.price = 9;
    时打印出'售车打9折'，当运行var p = car.price;时打印出‘价格是999999元’
   </pre>
   <script>
       'use strict'

       //1
       var cat={
           "name":"大黄",
           "color":"黄色",
           "tz":10
       };
       Object.defineProperty(cat,"name",{
           writable:false
       })
       Object.defineProperty(cat,"weight",{
           get:function(){
               return "体重:"+this.tz;
           },
           set:function(value){
               this.tz+=value;
           },
           enumerable:true
       })
       cat.weight=20;
       console.log(cat.weight);

       //2
       var stu={
           "cj":90
       }
       Object.defineProperty(stu,"score",{
           get:function(){
               return "成绩："+this.cj
           },
           set:function(value){
               this.cj+=value
               console.log("成绩进步："+value+"分");
           }
       })

       stu.score=5;
       var s=stu.score;
       console.log(s);

       //3
       var car={
           "jg":999990
       };
       Object.defineProperty(car,"price",{
           get:function(){
               return "价格是："+this.jg
           },
           set:function(value){
               this.jg+=value;
               console.log("出售："+value+"折");
           }
       })
       car.price=9;
       var p = car.price;
       console.log(p);
   </script>

封装继承多态

封装

私有变量私有方法

//模拟私有变量 和 私有方法只能自己用
var Animal=function(name,type){
    //私有变量
    var _type=type;
    //私有方法
    var isAnimal=function(){
        console.log("这是方法！"+_type);
    }
    isAnimal();
}
 var cat=new Animal("张胜男","人");

受保护的

//模拟受保护的的属性
var Dog=function(name,type,age){
    var _type=type;
    var _age=age;
    var isDog=function(){
        console.log("受保护的"+_type);
    }
    //访问器
    Object.defineProperty(this,"age",{
        get:function(){
            console.log("查看年龄！");
            return _age;
        },
        set:function(val){
            //保护代码
            if(val>100){
                _age=20;
            }else{
               _age=val;
            }
        }
    })
}

var dog=new Dog("狗","动物");
dog.age=130;
console.log(dog.age);//20

公有属性

//公有属性 public
var Pig=function(name,type){
    this.name=name;
    this.type=type;
    this.eat=function(){
        console.log(name+"在吃东西！");
    }
}
var pig=new Pig("猪","动物");
console.log(pig.name); 
console.log(pig.type);
pig.eat();

原型属性

//原型属性 prototype
console.log(Animal.prototype);
Animal.prototype.color="彩色";

Animal.prototype.fight=function(){
    console.log("打架！");
}
console.log(cat.color);
cat.fight();

var birth=new Animal("鹦鹉","鸟");
birth.fight();

静态属性

//静态属性
         Animal.number=100;
         Animal.count=function(){
             console.log("动物总数："+Animal.number);
         }
         console.log(Animal.number);
         Animal.count();
         //对象不能使用静态属性

继承

//把b的对象复制到a对象
// a.name==a['name']
Object.copy=function(a,b){
    for(arr in b){
        a[arr]=b[arr];
    }
    return a;
}

Object.prototype.exends=function(o){
    return Object.copy(this,o);//当前对象继承o
}

var  temo={
    name:"temo",
    age:18,
    r:function(){
        console.log("你好");
    }
};
var  dm={};
dm.exends(temo);
console.log(dm);
console.log(temo);



// console.log(temo);
// console.log(dm);
// Object.copy(dm,temo);

// var Animal=function(name,type){
//     this.name=name;
//     this.type=type;
//     var color="白色"
// }

// //原型合并
// Animal.prototype={
//     color:"彩色",
//     fight:function(){
//         console.log("打架！");
//     }
//  }

// var dog=new Animal("猫","动物");
// var pig={};
// Object.copy(pig,dog);
// console.log(pig);
// console.log(dog);

var Shape=function(){
    this.draw=function(){
        //调用下方空方法 
        this._draw();
    }
    //空方法 
    this._draw=function(){

    }
}

//矩形
var rect=function(){};
rect.prototype=(new Shape()).exends({
    width:100,
    height:200,
    _draw:function(){
        console.log("画个圈圈诅咒你！");
    }
});

var box=new rect();
box.draw();
console.log(box);

//画圆
var yuan=function(){}
yuan.prototype=(new Shape()).exends({
    _draw:function(){
        console.log("画圆！");
    }
})
var Yuan=new yuan();
Yuan.draw();

多态

var Circle=function(){
    this.draw=function(){
        console.log("画个圆形！");
    }
}
var Rect=function(){
    this.draw=function(){
        console.log("画个矩形！");
    }
}
function dy(obj){
    obj.draw();
}
dy(new Rect())

示例

// 创建一个Person类，包含name公开的属性，age受保护的属性，这个值只能是数字，私有的属性account。
// 创建一个showMoney私有的方法，在这个方法中打印出account的值。
// 创建一个showMsg公开的方法，在这个方法中打印出name和age，并且调用showMoney方法。
var Person=function(name,age){
    this.name=name;
    var _age=age;
    var account="人类";
    Object.defineProperty(this,"age",{
        get:function(){
            return _age;
        },
        set:function(val){
            var cf=/\d/;
            if(cf.test(val)==true){
                _age=val;
            }else{
                _age=19;
            }
        }
    });
    var showMoney=function(){
        console.log(account);
    }
    this.showMsg=function(){
        console.log("name:"+this.name," age:"+_age);
        showMoney();
    }
}

var zs=new Person("张三",89);
zs.showMsg();

//创建一个交通类Trafic和它的两个子类Car和Bike，通过多态实现每种交通工具的run方法。
var Trafic=function(obj){
    obj.runn();
}
var Car=function(){};
Car.prototype.runn=function(){
    console.log("开车回家！");
}
Trafic(new Car());

var Bike=function(){};
Bike.prototype.runn=function(){
    console.log("骑自行车回家！");
}

搭建JQuery框架

对象和数组合并

var stu={
         name:"战三",
         age:18
     }
     var arr=['temo','zs','lis'];
     //合并对象和数组   把数组放到对象里面 下标变成对象的属性名 多了一个length的属性
     //第一个参数是对象 第二个参数是数组  
     Array.prototype.push.apply(stu,arr);

     for(var ar in stu){
         //输出了所有的合并后的结果
         console.log(stu[ar]);
     }

     
     // for(i=0;i<stu.length;i++){
     //     //输出的是原来数字的值
     //     console.log(stu[i]);
     // }

jquery方法

//$是方法  $()返回值是对象 
       (function(){
           var jquery=function(select){
               return new jquery.prototype.Init(select);
           }
           //允许其他人给他框架加功能  使用继承
           jquery.extends=function(obj){
               for(var arr in obj){
                   this[arr]=obj[arr];
               }
           }
           //给原型加载init
           jquery.prototype={
               Init:function(select){
                   //
                   console.log("选择："+select);
                   //查找所有的对应的元素
                   var obj=document.querySelectorAll(select);
                   //把找到的数组放到query里面
                   Array.prototype.push.apply(this,obj);
                   return this;
               },
               //设置样式
               css:function(csname,cscontext){
                   if(cscontext==null || cscontext==undefined){
                       return this[0].style[csname];
                   }
                   for(var i=0;i<this.length;i++){
                       this[i].style[csname]=cscontext;
                   }
                   return this;
               },
               //获取指定的元素
               eq:function(n){
                   return this[n];
               },
               //获取得到元素内容
               html:function(context){
                   if(context==undefined || context==null){
                       return this[0].innerHTML;
                   }
                   for(var i=0;i<this.length;i++){
                       this[i].innerHTML=context;
                   }
               }
           }
           // console.log("你好！"+$);
           
           //把jquery里的方法全部给init 
           jquery.prototype.Init.prototype=jquery.prototype;
           //挂载对象到window  window是网页最大的  windows.alert("hello")
           //可以省略window
           window.$=jquery;
       })();
       //$("h1") 返回init 
       $("h1").css("color","pink").css("font-size","60px");
       console.log($("h1").css("color"))
       $("h1").eq(2);
       $("h1").html();

       //给别人框架加功能
       $.extends({
           //取出两边的空格
           trim:function(str){
               console.log("去掉空格！");
               var zz=/^\s+|\s+$/g;
               return str.replace(zz,'');
           },
       })
       var cf=" ka ";
       var cf=$.trim(cf);
       console.log("去空格："+cf+" "+cf.length);

示例

(function () {
       var jquery = function (select) {
         return new jquery.prototype.Init(select);
       };
       jquery.prototype = {
         Init: function (select) {
           var obj = document.querySelectorAll(select);
           Array.prototype.push.apply(this, obj);
           return this;
         },
         //attr获取设置属性
         attr: function (arname, arcontext) {
           if (typeof arname == "object") {
             //参数是object
             for (let j in arname) {
               //得到的是属性
               console.log(j);
               for (let i = 0; i < this.length; i++) {
                 //得到属性的赋值
                 console.log(arname[j]);
                 this[i].setAttribute(j, arname[j]);
               }
             }
           } else {
             //参数是String
             if (arcontext == undefined) {
               return this[0].getAttribute(arname);
             }
             for (var i = 0; i < this.length; i++) {
               this[i].setAttribute(arname, arcontext);
             }
           }
           return this;
         },
         //each循环
         each: function (obj) {
           for (let i = 0; i < this.length; i++) {
             obj(i, this[i]);
           }
         },
       };

       jquery.prototype.Init.prototype = jquery.prototype;
       window.$ = jquery;
     })();
     //1、实现attr方法 可以获取值 设置值 值可以传json
     $(".h6").attr("class", "h61").attr("name", "cft");

     $("img").attr({ width: "100px", height: "50px" });

     //2、each
     $("ul li").each(function (index, item) {
       console.log(index + "----" + item.innerHTML);
     });

继承的6种方法

用第5种

// 定义一个动物类
function Animal(name) {
  // 属性
  this.name = name || "Animal";
  // 实例方法
  this.sleep = function () {
    console.log(this.name + "正在睡觉！");
  };
}
// 原型方法
Animal.prototype.eat = function (food) {
  console.log(this.name + "正在吃：" + food);
};
//上面是父类
var cat = new Animal("波斯猫");
cat.sleep();
cat.eat("鱼");

//1、原型链继承
function Dog() {}
Dog.prototype = new Animal("狗");
var dog = new Dog();
dog.sleep();
dog.eat("🦴");

//2、构造函数继承

function Ufo() {
  this.fly = function () {
    console.log("反重力飞行！");
  };
}

function birth(name) {
  Animal.call(this); //调用父类构造方法
  //可以多重继承
  //Person.call(this);
  Ufo.call(this);

  this.name = name;
}

var br = new birth("鹦鹉");
br.sleep();
br.fly();
//instanceof 判断是否同一类型
//console.log(cat instanceof Animal); //true
//console.log(cat instanceof Cat); //true

//3、实例继承
function Pig(name) {
  var obj = new Animal();
  obj.name = name;
  return obj;
}
var pg=new Pig("猪");
pg.eat("饭");
pg.sleep();

//4、拷贝继承

//5、组合继承
function Cat2(name){
    Animal.call(this);
    this.name=name;
}
Cat2.prototype=new Animal();
var cat2=new Cat2("小白");
cat2.sleep();
cat2.eat("🐟");

//6、寄生组合继承
function Cat3(name){
    Animal.call(this);
    this.name=name;
}
(function(){
    var supper=function(){
    }
    supper.prototype=Animal.prototype;
    Cat3.prototype=new supper;
})();
var cat3=new Cat3("小黑");
cat3.sleep();
cat3.eat("小米");

let定义

//let的范围更小  var的访问的范围更大
        {
        var i=10;
        let k=20;
        }
        console.log("17:"+i);
        //console.log(k);

        var arr=[];
        for(let i=1;i<20;i++){
            arr[i]=function(){
                console.log("23:"+i);
            }
        }
        arr[6]();//如果循环是var arr[i]=10 

const定义

//const定义的是常量 不可以改变 
        //const PI;

        //对象里面是利用改的  
        const studn={};
        studn.name="展示干";
        console.log(studn.name);
        //内存的地址不能修改 修改就正面变了

        // studn =new Object();
        // console.log(studn);

箭头函数

//函数的参数只有一个时可以省略括号 无参数时不可以省略

//函数体里面只有一行的时候 可以省略花括号 {}

无参数无返回值

let fn1=()=>console.log("无参数无返回值");
let fn11=()=>{
    console.log("无参数无返回值")
}
fn1();

有参数无返回值

let fn2=name=>console.log("有参数无返回值："+name);
fn2("张三");

let fn3=(name,age)=>console.log("有参数无返回值："+name+" "+age);
fn3("散",12);


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

无参数有返回值

let fn4=()=>45;
console.log("无参数有返回值："+fn4());


let fn5=function(){
    return 50;
}

有参数有返回值

let fn5=(a,b)=>a+b;
console.log("有参数有返回值："+fn5(5,1))


let fn6=function(a,b){
    return a+b;
}

函数返回对象 函数的返回值是对象

let fn7=function(){
            let obj={'name':'提莫',"age":19};
            return obj;
        }
        let cf=fn7();
        console.log(cf.name);

        let fn71=()=>{
            return {'name':'提莫',"age":19};
        }
        let cf2=fn71();
        console.log(cf2.age);

        let fn72=()=>({'name':'提莫',"age":19});
        let cf3=fn72();
        console.log(cf3.age);

函数的参数默认值

function hello(text){
            //默认值
            text=text || "无名";
            console.log("你好："+text);
        }
        hello("狗头");
        hello();

展开模式 …

function num3xj(x,y,z){
            console.log(x,y,z);
        }
        num3xj(1,3,5);
        //数组的数填充到函数里面 展开
        let arnum=[45,67,1];
        num3xj(...arnum);

rest模式

//rest模式 ... 可变长度参数
        function renum1(...arr){
            console.log(arr) //数组
        }
        renum1(1,23,56);

对象解构

et stu={
            name:"站撒",
            age:21,
            sex:'男'
        }
        //定义的必须和上面的对象的名字一样
        let {name,age,sex}=stu;
        console.log(name,age,sex)

        //解构名字不一样
        let{name:a,age:b,sex:c}=stu;
        console.log(a,b,c);

数组解构

//解构数组
        var szjg=[1,25,6,8];
        //原
        console.log(szjg[0]);
        console.log(szjg[1]);
        console.log(szjg[2]);
        //ES6解构
        let[x,y,z,h]=szjg;
        console.log(x,y,z,h);

声明对象简写 重构

let name1="张胜男干";
        let age1=19;
        let set1="男";
        let stuj={name1,age1,set1};
        console.log(stuj);

for of

let nums=["num1","num2","num3","num3"];
       Array.prototype.fn=function(){}
       for(let i=0;i<nums;i++){
           console.log(nums[i]);
       }
       //可以打印出原型的方法
       for(let i in nums){
           console.log(nums[i]);
       }

       //打印值
       for(let nhj of nums){
           console.log(nhj);
       }

示例作业

<pre>
        1、给页面中的所有按钮绑定点击事件，当点击这些按钮时弹出“这个页面的第几个按钮”。
        2、分别定义无参无返回，有参无返回，无参有返回和有参有返回的箭头函数，并且调用它。
        3、定义三个变量snum,name,classroom三个变量，通过解构将这三个变量合并成一个对象。
        4、var dog = {n:"旺财",weight:2,color:"黑色"};通过解构取出旺财的所有属性值。
        5、定义一个学生对象，包含一个eat方法，通过解构取出这个方法并调用它。
        6、定义一个没有参数个数限制的函数，打印出输入的参数个数。
    </pre>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        //1
        var cf=document.querySelectorAll("button");
        for(let i=1;i<=cf.length;i++){
            cf[i-1].onclick=()=>alert("第"+i+"个")
        }

        //2
        //无参数无返回值
        let fn1=()=>console.log("无参数无返回值");
        let fn11=()=>{
            console.log("无参数无返回值")
        }
        fn1();

        //有参数无返回值
        let fn2=name=>console.log("有参数无返回值："+name);
        fn2("张三");

        let fn3=(name,age)=>console.log("有参数无返回值："+name+" "+age);
        fn3("散",12);

        //无参数有返回值
        let fn4=()=>45;
        console.log("无参数有返回值："+fn4());

        //有参数有防护值
        let fn5=(a,b)=>a+b;
        console.log("有参数有返回值："+fn5(5,1))

        //3
        let snum=40;
        let name="C1901";
        let classroom="1班";
        let classinfo={snum,name,classroom};
        console.log(classinfo);

        //4
        var dog={
            n:"旺财",
            weight:2,
            color:"黑色"
        }
        let {n,weight,color}=dog;
        console.log(n,weight,color);

        let {n:a,weight:b,color:c}=dog;
        console.log(a,b,c);

        //5
        let student={
            eat:(food)=>console.log("吃"+food)
        }
        let {eat}=student;
        eat("西瓜");

        //6
        let num6=(...arr)=>console.log(arr.length);
        num6(1,5,6,7)
    </script>

Map

创建map

//创建map  如果键相同的话就会覆盖前面的值 
       var map=new Map();

放入值

//放入值
       map.set("st01","张三");
       map.set("st02","李四");
       map.set("st03","王五");
       map.set("st01","vm");
       console.log(map);

得到长度

//得到长度
console.log("map的长度："+map.size);

取值

//取值
console.log(map.get("st01"));

for of取值

//for of 循环map [key,value]:解构
        for(let [key,value] of map){
            console.log(key,value);
        }

foreach循环

map.forEach((value,key) => {
    console.log(key,value);
});

key是对象

//key==对象
        let hm=new Map();
        let js={};
        let tm={name:"提莫",age:19};
        hm.set(js,"这是个空值");
        hm.set(tm,"这是temo对象");
        console.log(hm.get(js));
        console.log(hm.get(tm));

map变数组

//把map变成二维数组
        let arr=Array.from(map);
        console.log(arr);
        console.log(arr[2][1]);

map合并

//两个map 能不能合成一个  多行2列
let a=new Map([['st1','张三'],['st2','李四'],['st3','王五']]);
//二维数组变成Map就直接放
let b=new Map([['num1','香蕉'],['num2','苹果'],['num3','葡萄']]);
        console.log(a);
        console.log(b);
        //展开模式 把2个数组合并
        var merge=new Map([...a,...b]);
        console.log(merge);

Set

添加值

//Set Set去重复值  对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
        let set=new Set();
        //给set添加值
        set.add("提莫");
        set.add("德玛");
        set.add("剑圣");
        

for of取值

//for of 取出set的值 
        for(let hj of set){
            console.log(hj);
        }
        

数组变set

//数组变set
       let arrs=[1,4,6,8];
       let set1=new Set(arrs);
       console.log(set1);
       

set变数组

//set变数组
set1.add("k");
set1.add("L");
let arrs2=[...set1];
console.log(arrs2);

合并 交集 差集

//两个集合
        let hight=new Set(['张三','李四','王五','刘均','刘贺']);
        let mi=new Set(['张三','谢军','王五']);

        //合并
        let mergeset=new Set([...hight,...mi]);
        console.log(mergeset);

        //又高又富 : 交集
        let  intersection=new Set([...hight].filter(x=>mi.has(x)));
        console.log(intersection);

        //只高不富的 差集
        let jk=new Set([...hight].filter(x => !mi.has(x)));
        console.log(jk);
        

ES6类

class Student{
            //构造方法
            constructor(name,age){
                //属性
                this.name=name;
                this.age=age;
                console.log("student构造方法运行！");
            }
            

            //getset里面不能操作原来属性的进行返回 
            get name(){
                console.log("正在取值！");
                //直接返回this的原属性的话 就会一直递归
                return this.newname;
            }
            set name(val){
                console.log("正在设置值！");
                this.newname=val;
            }

            //普通方法
            sayhi(){
                console.log("你好："+this.name);
                console.log("年龄："+this.age)
            }

            static sa(){
                console.log("名字："+this.name);
                console.log("age:"+this.age);
            }
        }
        //new 对象
        let zs=new Student("张三",19);
        //调用普通方法 
        zs.sayhi();
        console.log(zs.name);

        Student.sa();

        //继承 老师继承学生 
        class Teach extends Student{
            constructor(name,age){
                console.log("老师的构造方法！");
                //调用父亲的方法 
                super(name,age);
            }
        }
        //子类调用
        let lis=new Teach("李四",19);
        console.log(lis.age);
        console.log(lis.name);

模板字符串

//模板字符串
let mona='temo';
let age =16;
let t=`
<div>
<h3>名字=${mona}</h3>
<p>年龄=${age}</p>
</div>
`;
document.body.innerHTML=t;
console.log(t);

//模板字符串调用函数
function f(){
    return "你好";
}
let t2=`game start ${f()}`;
console.log(t2);

Promise

task1().then(function(su){
    console.log("Task1服务器返回成功："+su);
}).catch(function (da) {//失败抓取异常
    console.log("抓取异常...."+da);
}).finally(function(){//一定会执行
    console.log("收尾工作");
})

单个使用

function task1(){
            let t1=new Promise(function(su,er){
                let h=Math.random();
                if(h>=0.5){
                    su("成功！");
                }else{
                    er("失败！");
                }
            })
            return t1;
        }

        let tk1=task1();
        tk1.then(function(su){
            console.log(su);
        },function(er){
            console.log(er);
        })

链式

//笑话
        function jok(){
            let p2=new Promise(function(su,er){
                $.ajax({
                    url:'https://autumnfish.cn/api/joke/list?num=3',
                    type:'get',
                    success:function(da){
                         su(da);
                    },
                    error:function(msg){
                      er(msg)
                    }
                })
            })
            return p2;
        }

        //音乐
        function music(){
            let p3=new Promise(function(su,er){
                $.ajax({
                    url:'https://api.uomg.com/api/rand.music?sort=%E7%83%AD%E6%AD%8C%E6%A6%9C&format=json',
                    type:'get',
                    success:function(da){
                         su(da.data);
                    },
                    error:function(msg){
                      er(msg)
                    }
                })
            })
            return p3;
        }

        //链式 joker--->music
        $("#ls").on('click',function(){
            let hj=jok();
            hj.then(function(su){
                console.log(su.jokes);
                //返回下一个执行的
                return music();
            }).then(function(da){
                console.log(da);
            })
        })

all

function ts1(){
            let p4=new Promise(function(su,er){
                setTimeout(function(){
                    su("下单成功！");
                },2000)
            })
            return p4;
        }

        function ts2(){
            let p5=new Promise(function(su,er){
                setTimeout(function(){
                    su("支付成功！");
                },1000)
            })
            return p5;
        }

        function ts3(){
            let p6=new Promise(function(su,er){
                setTimeout(function(){
                    su("订单修改成功！");
                },3000)
            })
            return p6;
        }

        //all 全部执行完 才执行
        Promise.all([ts1(),ts2(),ts3()]).then(function(res){
            console.log("111:"+res);
        })

race

function ts1(){
            let p4=new Promise(function(su,er){
                setTimeout(function(){
                    su("下单成功！");
                },2000)
            })
            return p4;
        }

        function ts2(){
            let p5=new Promise(function(su,er){
                setTimeout(function(){
                    su("支付成功！");
                },1000)
            })
            return p5;
        }

        function ts3(){
            let p6=new Promise(function(su,er){
                setTimeout(function(){
                    su("订单修改成功！");
                },3000)
            })
            return p6;
        }
        //race 赛跑模式 谁先执行完
        Promise.race([ts1(),ts2(),ts3()]).then(function(rs){
            console.log("116："+rs);
        })

练习

    <script>
      /**
         * ES6语法完成：
1、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现两个任务都完成以后才能升级。
2、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现只要其中有一个任务完成就显示“恭喜您获得大陆勇士的称号”
3、在页面上创建三个div，div从左往右移动，通过Promise使这三个div的移动速度不一样，同时当第一个div到达屏幕右边时，弹出当前到达屏幕右边的div的编号，并提示“第x个div获得了冠军”。
         *
         * 
         * */

      //1
      function task1() {
        let p1 = new Promise(function (su, er) {
          console.log("采蘑菇！");
          su("采蘑菇");
        });
        return p1;
      }

      function task2() {
        let p2 = new Promise(function (su, er) {
          console.log("杀鸡！");
          su("杀鸡");
        });
        return p2;
      }
      Promise.all([task1(), task2()]).then(function (res) {
        console.log("升级成功！");
      });

      //2
      function task3() {
        let p3 = new Promise(function (su, er) {
          setTimeout(function () {
            su("采蘑菇");
          }, 2000);
        });
        return p3;
      }
      function task4() {
        let p4 = new Promise(function (su, er) {
          setTimeout(function () {
            su("杀鸡");
          }, 1000);
        });
        return p4;
      }

      Promise.race([task3(), task4()]).then(function (res) {
        console.log("恭喜 " + res + " " + "获得大陆勇士的称号");
      });

      //3
      let dilef1 = 0;
      function div1() {
        let p5 = new Promise(function (su, er) {
          let s1 = setInterval(function () {
            var cf1 = document.querySelector("#d1");
            let num1 = Math.ceil(Math.random() * 20);
            dilef1 = dilef1 + num1;
            cf1.style.left = dilef1 + "px";
            if (dilef1 >= 1446) {
              clearInterval(s1);
              su("1");
            }
          }, 1000);
        });
        return p5;
      }

      let dilef2 = 0;
      function div2() {
        let p5 = new Promise(function (su, er) {
          let s2 = setInterval(function () {
            var cf2 = document.querySelector("#d2");
            let num2 = Math.ceil(Math.random() * 20);
            dilef2 = dilef2 + num2;
            cf2.style.left = dilef2 + "px";
            if (dilef2 >= 1446) {
              clearInterval(s2);
              su("2");
            }
          }, 1000);
        });
        return p5;
      }

      let dilef3 = 0;
      function div3() {
        let p5 = new Promise(function (su, er) {
          let s3 = setInterval(function () {
            var cf3 = document.querySelector("#d3");
            let num3 = Math.ceil(Math.random() * 20);
            dilef3 = dilef3 + num3;
            cf3.style.left = dilef3 + "px";
            if (dilef3 >= 1446) {
              clearInterval(s3);
              su("3");
            }
          }, 1000);
        });
        return p5;
      }
      Promise.race([div1(), div2(), div3()]).then(function (res) {
        console.log("149:第" + res + "个div获得了冠军");
      });
    </script>

ES7 Promise简化

//async 关键字返回的是 promise对象
function task1() {
  return new Promise((su, er) => {
    //模仿ajax
    setTimeout(function () {
      su("task1!");
    }, 2000);
  });
}

function task2() {
  return new Promise(function (su, er) {
    setTimeout(function () {
      su("task2!");
    }, 1000);
  });
}

async function task3() {
  return "hj";
}

let ft = task1();
console.log(ft);

//ES6
task1().then(function (da) {
  console.log(da);
});

task1().then((da) => console.log(da));

// 有async 的函数 才可以使用 await
async function test() {
  //await 等待  返回的是结果
  let ps = await task1();
  console.log("44:" + ps);
  let ps2 = await task2();
  console.log("46:" + ps2);
  let ps3 = await task3();
  console.log("52:" + ps3);
}
test();

some查看数组是否满足条件

var a=[
    {id:1,name:'张三'},
    {id:2,name:'李四'},
    {id:4,name:'王五'}
];
//some 查看条件是否满足
a.some((item)=>{
    if(item.id==2){
        item.name="李思2"
    }
})
console.log(a);

findindex查找下标

//findindex 查找下标
var inde=a.findIndex((index)=>{
    if(index.id==2){
        return index
    }
})
console.log(inde);

filter 满足条件

var nr= a.filter((index)=>{
     if(index.id==2){
         return index;
     }
 })
 console.log(nr);

find 满足条件

//find 返回满足条件
var finsall= a.find((index)=>{
     if(index.id==2){
         return index;
     }
 })
 console.log(finsall);

splice添加

//splice添加 splice(添加的位置,0：不删除,添加的元素)
var hj={id:5,name:"例外"}
a.splice(1,0,hj);
console.log(a);

splice删除

//splice删除 splice(删除的下标,删除几个)
 a.splice(4,1);

内容复制到剪切板

//把内容复制到剪切板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

查找日期位于一年的第几天

const dayOfYear = (date) =>Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
var log=dayOfYear(new Date());
console.log(log);

计算2个日期相差多少天

//计算2个日期之间相差多少天
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))

随机生成16进制颜色

//随机生成16进制颜色
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());

检验数组奇偶

const isEven = num => num % 2 === 0;

求数字的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

回到顶部

const goToTop = () => window.scrollTo(0, 0);
    
goToTop();

JS排序对象数组

var cf=[
        {"name":'张三',"result":98},
        {"name":'张三2',"result":10},
        {"name":'张三3',"result":20},
        {"name":'张三4',"result":30},
        {"name":'张三5',"result":40},
        {"name":'张三6',"result":60},
        {"name":'张三7',"result":70},
        {"name":'张三8',"result":80},
        {"name":'张三9',"result":90},
        {"name":'张三10',"result":100},
        {"name":'张三11',"result":75},
        {"name":'张三12',"result":65},
        {"name":'张三13',"result":74},
        {"name":'张三14',"result":78},
        {"name":'张三15',"result":99},
    ]

    //对象数组排序 降序     a-b:升序 
    function sortData(a, b) {
       return b.result - a.result
    }
    cf.sort(sortData);