JavaScript基本语法使用

系统函数

escape() 字符串转换成通用的unicode字符集

unescape() 解码

isFinite() 判断一个数字是否是有限的

isNaN() 判断一个变量是否为非数字

parseFloat() 把字符串前缀数字转换成浮点型

parseInt() 把字符串前缀数字转换成整型

eval() 执行一段js代码

DOM事件

onclick()

onmouseover() 鼠标经过

onmouseout() 鼠标离开

onmousedown()

onmouseup()

onmousemove() 鼠标移动

onkeypress()

onkeydown()

onchange() select时经常使用

onblur() 失去焦点

onsubmit() 提交表单

onload() 页面加载

onunload()

prototype原型对象

  function Cat(name, color) {
            this.name = name;
            this.color = color;
        }

        Cat.prototype.type = "animal";
        Cat.prototype.eat = function () {
            console.log("吃鱼");
        };
        var cat1 = new Cat("大明", "黄色");
        console.log(cat1.name);

call

        function Cat(name, color) {
            this.name = name;
            this.color = color;
        }
        var o = {};
        Cat.call(o,"猫","颜色");
        console.log(o.name);

apply

        function Cat(name, color) {
            this.name = name;
            this.color = color;
        }
        var o = {};
        Cat.apply(o,["猫","颜色"]);
        console.log(o.name);

事件冒泡

事件冒泡是指事件会从里面标签向外面传递

阻止事件冒泡

event.stopPropagation();//阻止事件冒泡

事件委托

<html>
<head>
    <style type="text/css">
    </style>
</head>

<body>
    <div>
        <ul id="list">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>

        <script type="text/javascript">
            //事件触发
            var list = document.getElementById("list");
               //事件委托实现
               list.onclick = function (e) {
                   var e = e || window.event;
                   e.target = e.target || e.srcElement;   //e.target当前触发节点
                   if (e.target.nodeName.toLowerCase() == 'li') {
                       console.log(e.target.innerHTML);
                   }
               }
       </script>

    </div>
</body>
</html>

对象解构

对象解构没有次序，变量必须与属性同名

        let {name:n,age:a} = {name:'abc',age:18};  
        console.log(n);

数组结构

    //默认值  ===
        let [x=4,y,z] = [1,2,3];
        //x = 1 || 4
        let [x=4,y,z] = [,2,3];   //x=4
        let [x=1,y=2,z=3] = [5];   //5,2,3
        let [x,y='b'] = ['a'];    //a,b
        //注意   成员等于undefined   默认值会生效
        let [x =1] =[undefined];  //x=1
        let [x,y='b'] = ['a',undefined];    //a,b

        let [x =1] =[null];   //x = null
        //默认值  函数
        function f() {
            return 'abc'
        };
        let [x=f()] =[1];   //获取的顺序  f()没有执行  1
        let [x=f()] =[];   //abc
        let [x=f()] =[undefined];   //abc

         //坑
         let [x=1,y=x] = [];  //x=1;y=1;
         let [x=1,y=x] = [2];  //x=2;y=2;
         let [x=1,y=x] = [1,2];  //x=1;y=2;
         let [x=y,y=1] = [];  //error   y并没有声明

Math函数

        parseInt(11.123)  //11
        parseFloat(11.123)  //11.123
        //ES6 Number对象
        Number.parseInt(11.123)  //11
        Number.parseFloat(11.123)  //11.123

        Number.isInteger(12) //判断一个数值是否为整数   true
        Number.isInteger(12.123) ;  //false

        //Math对象   
        Math.ceil(3.9);  // 向上4
        Math.floor(3.9);  //向下   3
        Math.round(3.9);   //四舍五入

        Math.trunc(3.9);   //用于去除小数部分   返回整数部分
        Math.trunc('3.9a');  //NaN
        Number.parseInt('3.9a')   //3

        Math.sign()   //判断一个数到底是正数/负/零/其它非数值，
        //参数正数   返回+1 
        //负数   返回-1 
        //0   返回0
        //其它非数值   返回NAN
        Math.sign(3);

Set

        //转为数组   Array.from();
        var s4 = new Set([1,4,5,2,6,6]);
        let arr = Array.from(s4);

浅拷贝和深拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，

var a =[1,2,3],b=a;

a[0]= 100;


深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存
用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象

Promise

const getJSON = function(url,type, data) {

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

const handler = function() {

if (this.readyState !== 4) {

return;

};

if (this.status === 200) {

//resolve promise对象从未完成到成功 ,将异步操作的结果作为参数传递

resolve(this.response);

} else {

//resolve promise对象从未完成到失败,将异步操作的结果作为参数传递

reject(new Error(this.statusText));

}

};

const client = new XMLHttpRequest();

client.open(type, url);

client.onreadystatechange = handler;

client.responseType = "json";

if(type =='get'){

client.send();

}else {

client.setRequestHeader("Content-Type", "application/json");

client.send(JSON.stringify(data));

}

});

return promise;

};

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

// //resolve 异步操作成功时调用，

// //reject 异步操作失败时调用，

// //then() 方法分别指定resolve 和reject的回调函数

// resolve(res)

// }).then(function(){

// resolve(res)

// }).then(function(){

// resolve(res)

// }).catch(function(){

// })

let obj ={

// m:new Map(),

init:function(){

this.bind()

bind:function(){

$(".container .submit").click(()=>{

let _name = $(".name").val(),

_msg = $(".message").val();

if(_name =='' || _msg ==''){

alert('请输入信息')

}else {

//this.m.set(_name,_msg);

this.add(_name,_msg);

$(".name,.message").val('');

}

});

$(".container .queryThen").click(()=>{ //链式调用

this.queryThen();

});

$(".container .queryWhen").click(()=>{ //链式调用并行

this.queryWhen();

});

add:function(name,msg){

getJSON('http://localhost:3000/add','post',{name:name,message:msg})

.then((res)=>{

console.log(res)

if(res.code =='200'){

this.getData();

}

},function(error){

console.log(error)

})

getData:function(){

getJSON('http://localhost:3000/get','get')

.then(function(res){

if(res.code =='200'){

let str = '';

for(let item of res.result){

str+=`<li class="list-group-item">${item.name}<span>说：</span>${item.message}</li>`;

};

$(".messageList").html(str);

}

},function(error){

console.log(error)

})

queryThen:function(){ //链式请求串行

// getJSON('http://localhost:3000/get_query','get')

// .then(function(res){

// //res.result.id 发送get请求获取ID

// console.log(res.result.id);

// return getJSON('http://localhost:3000/add','post',{id:res.result.id,name:'123',message:'123'})

// })

// .then(function(res){

// console.log(res);

// },function(error){

// console.log(error)

// });

//jquery

$.ajax({url:'http://localhost:3000/get_query',type:'get',dataType:'json'})

.then(res=>{

console.log(res);

return $.ajax({

url:'http://localhost:3000/add',

type:'post',

data:{id:res.result.id,name:'123',message:'123'}})

},(error)=>{

console.log(error)

})

queryWhen:function(){ //链式请求并行

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

// getJSON('http://localhost:3000/get','get')

// .then(function(res){

// resolve(res)

// },function(error){

// console.log(error)

// })

// });

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

// getJSON('http://localhost:3000/get_query','get')

// .then(function(res){

// resolve(res)

// },function(error){

// console.log(error)

// })

// });

// // a b请求完成后返回

// Promise.all([a,b]).then(([a1,b1])=>{

// console.log(a1);

// console.log(b1)

// },function(){

// })

//jquery 写法

$.when(

$.ajax({url:'http://localhost:3000/get',type:'get',dataType:'json'}),

$.ajax({url:'http://localhost:3000/get_query',type:'get',dataType:'json'}),

).then((a,b)=>{

console.log(a[0]);

console.log(b[0]);

},(error)=>{

console.log(error)

})

}

$(function(){

obj.init();

})

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

//resolve 异步操作成功时调用，

//reject 异步操作失败时调用，

})

posted @ 2020-03-01 15:31 bradleydan 阅读(85) 评论(0) 收藏举报

刷新页面返回顶部

bradleydan

JavaScript基本语法使用

系统函数

DOM事件

prototype原型对象

call

apply

事件冒泡

事件委托

对象解构

数组结构

Math函数

Set

浅拷贝和深拷贝

Promise

公告