javascript学习

javaScript

1、javaScript中任何事物都是对象

2、‘\==’与‘===’的区别：

‘==’只判断数值是否相同；‘===’判断数值同时判断类型是否相同;var myNum1=3;var myNum2=4;var myNum3='3';console.log(myNum1==myNum2);//falseconsole.log(myNum1==myNum3);//trueconsole.log(myNum1===myNum3);//false

3、‘!=’与‘!==’的区别:

‘!=’只判断数值是否相同；‘!==’判断数值同时判断类型是否相同； var myNum1=3; var myNum2=4; var myNum3='3'; console.log(myNum1!=myNum2);//true console.log(myNum1!=myNum3);//false console.log(myNum1!==myNum3);//true

4、’+’的特性：

两个数值类型相加，则得到相加后的结果；一个数值类型与一个字符类型进行'+'运算得到的结果为：将数值类型转为字符类型进行拼接。两个字符类型进行'+'运算得到的结果为两个字符类型拼接的结果。var myNum1=3;var myNum2=4;var myNum3='3';console.log(myNum1+myNum2);//7console.log(myNum2+myNum3);//43console.log(myNum3+myNum3);//33

5、点击事件定义

var img=document.querySelector('img');img.onclick=function(){ var imgSrc=img.getAttribute('src'); if(imgSrc==='01.png'){     img.setAttribute('src','02.png'); }else{      img.setAttribute('src','01.png'); }}

6、标签属性的设置和获取

html文件中：<img src='01.png'/>js文件中：var imgSrc=img.getAttribute('src');if(imgSrc==='01.png'){     img.setAttribute('src','02.png');}else{      img.setAttribute('src','01.png');}

7、数据类型（data-type）

• Number
  Math.sin(value)正弦
  Math.cos(value) 余弦
  parseInt(value) 转整型
  parseFloat(value) 转浮点型
  Infinity 正无穷
  -Infinity 负无穷
  NaN 不是数值
  isNaN(value) 是否为数值类型
  isFinity(value) 是否为无穷
• String
  字符串第i个位置的字符:“hello”.charAt(i);
  字符串长度：”hello”.length;
  字符串替换：”hello”.replace(‘hello’,”aa”);
  字符串变为大写：”hello”.toUpperCase();
• boolean
• symbol
• object
  function
  array
  date
  regExp
• null
• undefined
  we declare a variable without assigning a value to it.

8、variables（变量）

• let：声明变量
• var：声明变量
• const：声明常量

• let与var的异同：
  ①作用范围不同
  let的作用范围：
  //myLetVariable is not visible out here

          for( let myLetVariable = 0; myLetVariable < 5; myLetVariable++ ) {            //myLetVariable is only visible in here        }        //myLetVariable is *not* visible out here        var的作用范围：        //myVarVariable *is* visible out here           for( var myVarVariable = 0; myVarVariable < 5; myVarVariable++ ) {              //myVarVariable is visible to the whole function           }           //myVarVariable *is* visible out here    ②在function中声明的变量只能作用在该function中。

9、control structure(控制结构)

(1)if-else    var name = "kittens";    if (name == "puppies") {      name += "!";    } else if (name == "kittens") {      name += "!!";    } else {      name = "!" + name;    }    name == "kittens!!"(2)while(3)do-while(4)for(5)for-of ：用于取到数组中的值，不能用于取得对象中的属性    for(let value of array) {      // do something with value    }    例如：        var aa=[1,2,3,4,5,6,8];        for(let value of aa){//同样可以使用var来声明变量value            console.log("let of log"+value);        }        输出结果：            let of log1            let of log2            let of log3            let of log4            let of log5            let of log6            let of log8        总结：for-of 方式是对aa进行遍历将aa中的值依次赋给value，并使用value(6)for-in：用于取到对象中的属性，array是一个对象，其属性为下标        for(let property in object) {          // do something with object property        }        例如：            var aa=[1,2,3,4,5,6,8];            for(let value in aa){                console.log("let in log"+aa[value]);            }             输出结果：                let in log1                let in log2                let in log3                let in log4                let in log5                let in log6                let in log8            总结：for-of 方式是对aa进行遍历将aa的下标值依次赋给value，并使用value            function Person(name,age){                    this.name=name;                    this.age=age;                }                var ff=new Person("ff",12);                for(let a in ff){                    console.log(a);//输出属性名称                   // console.log(ff[a]);//输出对象中属性的值                }                输出结果：                    name                    age(7)&&（and）(8)||（or）(9) 三目运算    条件 ? value1：value2(10)swich-case     case:的值可以为字符串和数值类型        switch(action) {          case 'draw':            drawIt();            break;          case 'eat':            eatIt();            break;          default:            doNothing();        }

10、function

function定义的方法中传递参数，我们在使用的时候可以不传递参数，或者传递的参数个数大于需要的个数，这样方法同样可以使用。    function add(x,y){        var a=1;        var b=2;        return x+y;    }    console.log(add());//undefined    console.log(add("s",2));//s2    console.log(add("s",2,3));//s2对于function定义的方法没有参数的，我们同样可以传递参数但是通过arguments来获取传递的参数        function addAll(){            var total=0;            for(let i=0;i<arguments.length;i++){                total+=arguments[i];            }            return total;        }        console.log(addAll(1,2));//3        console.log(addAll(1,2,3));//6        console.log(addAll(1,2,3,4));//10function方法中的参数为不定长参数：            function avg(...args) {                  var sum = 0;                  for (let value of args) {                    sum += value;                  }                  return sum / args.length;                }                avg(2, 3, 4, 5); // 3.5

11、(function foo() {…})();的理解：

(function foo() {...})();      这就等价于：    var foo = function () {...};    foo();

12、使用对象的属性

    方式一：         function People(firstName,lastName){             this.firstName=firstName;             this.lastName=lastName;         }        function fullName(people){           console.log(people.firstName+'  '+people.lastName);        }        var people=new People("aa","bb");        fullName(people);    方式二：        function People(firstName,lastName){             this.firstName=firstName;             this.lastName=lastName;             this.fullName=function(){                console.log(this.firstName+'  '+this.lastName);             };         }         var people=new People("aa","bb");         people.fullName();    方式三：         function People(firstName,lastName){            return {                firstName:firstName,                lastName:lastName,                fullName:function(){                    return this.firstName+'  '+this.lastName;                }            }            }           var people=new People("aa","bb");         console.log(people.fullName());    方式四：建议使用        function People(firstName,lastName){             this.firstName=firstName;             this.lastName=lastName;         }        People.prototype.fullName=function(){            return this.firstName+'  '+this.lastName;        }         var people=new People("aa1","bb");         console.log(people.fullName());

13、数值的取整运算

◎Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；◎Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；◎Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；    ceil()：将小数部分一律向整数部分进位。        如：        Math.ceil(12.2)//返回13        Math.ceil(12.7)//返回13        Math.ceil(12.0)// 返回12    floor()：一律舍去，仅保留整数。        如：        Math.floor(12.2)// 返回12        Math.floor(12.7)//返回12        Math.floor(12.0)//返回12    round()：进行四舍五入        如：        Math.round(12.2)// 返回12        Math.round(12.7)//返回13        Math.round(12.0)//返回12